add MouseTool component

components/map/index.js

@@ -11,6 +11,7 @@ import Polyline from '../polyline';
 import InfoWindow from '../infowindow';
 import Circle from '../circle';
 import GroundImage from '../groundimage';
+import MouseTool from '../mousetool';
 // import CircleEditor from '../circleeditor';
 // import PolyEditor from '../polyeditor';
 
@@ -31,7 +32,8 @@ const ComponentList = [
   Markers,
   Marker,
   Polyline,
-  Polygon
+  Polygon,
+  MouseTool
 ];
 
 const configurableProps = [

components/mousetool/demo/basic.md

@@ -0,0 +1,65 @@
+---
+title: MouseTool 的基本使用
+order: 0
+---
+
+
+```jsx 
+import { Map, MouseTool } from 'react-amap';
+
+class App extends React.Component{
+  constructor(){
+    super(); 
+    this.toolEvents = {
+      created: (tool) => {
+        this.tool = tool;
+      }
+    }
+  }
+
+  drawCircle(){
+    if(this.tool){
+      this.tool.circle();
+    }
+  }
+
+  drawRectangle(){
+    if(this.tool){
+      this.tool.rectangle();
+    }
+  }
+
+  drawMarker(){
+    if (this.tool){
+      this.tool.marker();
+    }
+  }
+
+  close(){
+    if (this.tool){
+      this.tool.close();
+    }
+  }
+
+  render(){
+    return <div>
+      <div style={{width: '100%', height: 370}}>
+        <Map 
+          plugins={['ToolBar']} 
+          center={{longitude: 120, latitude: 35}} 
+        >
+          <MouseTool events={this.toolEvents}/>
+        </Map>
+       </div>
+       <button onClick={()=>{this.drawMarker()}}>Draw Marker</button>
+       <button onClick={()=>{this.drawRectangle()}}>Draw Rectangle</button>
+       <button onClick={()=>{this.drawCircle()}}>Draw Circle</button>
+       <button onClick={()=>{this.close()}}>Close</button>
+     </div>
+  }
+}
+
+ReactDOM.render(
+  <App/>, mountNode
+)
+```

components/mousetool/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import isFun from '../../lib/utils/isFun';
+import log from '../../lib/utils/log';
+
+class MouseTool extends React.Component {
+  constructor(props) {
+    super(props);
+    if (!props.__map__) {
+      log.warning('MAP_INSTANCE_REQUIRED');
+    } else {
+      this.map = props.__map__;
+      this.loadToolInstance(props);
+    }
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  loadToolInstance(props) {
+    this.map.plugin(['AMap.MouseTool'], () => {
+      this.createToolInstance(props);
+    });
+  }
+
+  createToolInstance(props) {
+    this.tool = new window.AMap.MouseTool(this.map);
+    const events = props.events || {};
+    if (isFun(events.created)) {
+      events.created(this.tool);
+    }
+    if (isFun(events.draw)) {
+      this.tool.on('draw', (e) => {
+        events.draw(e);
+      });
+    }
+    return this.tool;
+  }
+
+  render() {
+    return (null);
+  }
+}
+
+export default MouseTool;

components/mousetool/index.md

@@ -0,0 +1,26 @@
+---
+category: 地图
+order: 2
+title: MouseTool 组件
+---
+
+
+## 何时使用
+
+需要在地图上启用鼠标工具插件时使用；启用该插件可以进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。
+
+
+## API
+
+这个插件的最佳使用方法就是通过绑定`created`事件获得实例后，对实例调用不同方法，从而可以实现不同的鼠标操作。
+
+详情请参考[高德官方文档](http://lbs.amap.com/api/javascript-api/reference/plugin#AMap.MouseTool)。
+
+
+### 静态属性
+
+| 属性       |  类型 | 默认取值 | 说明     |
+|-----------|-----------|-------|-----|
+| events    | `Object`  |  / | 就像其他组件的 events 属性一样绑定事件 |
+
+> 当前可以绑定的事件只有两个：`created`（MouseTool 实例创建完成后调用）,`draw`（鼠标工具绘制覆盖物结束时触发此事件）。

lib/index.js

@@ -8,6 +8,7 @@ import InfoWindow from '../components/infowindow';
 import GroundImage from '../components/groundimage';
 import CircleEditor from '../components/circleeditor';
 import PolyEditor from '../components/polyeditor';
+import MouseTool from '../components/mousetool';
 
 export {
   Map,
@@ -19,7 +20,8 @@ export {
   PolyEditor,
   InfoWindow,
   GroundImage,
-  Marker
+  Marker,
+  MouseTool
 };
 
 export default {
@@ -32,5 +34,6 @@ export default {
   PolyEditor,
   InfoWindow,
   GroundImage,
-  Marker
+  Marker,
+  MouseTool
 };