React-Amap

想要有个勾画范围的功能，就是用鼠标在地图上单击，就能定个点，然后最后双击的时候，形成一个封闭图形，要用到React-Amap的mouseTool组件

image.png

这个组件需要

然后constructor里面定义toolEvents

 constructor() {
    super();
    const self = this;
    this.toolEvents = {
      created: tool => {
          console.log(tool);
          self.tool = tool;
          let { points } = self.props;
          points = points.map((item, index) => {
            return new window.AMap.LngLat(item.longitude, item.latitude);
          });
          self.P=new AMap.Polygon({
            map:self.instance,
            path:points,
          })
          self.tool.polygon({
            path:points
          })
          console.log(self.tool)
        }
      },
      draw({ obj }) {
        self.drawWhat(obj);
      }
}

这个toolEvents有两个固定的api，一个是created，一个是draw,
在created里面要根据服务器上读取的范围，进行回显，所以，本来应该在self.tool.polygon({})中传入path，就像上面代码写的一样，但是传入得path，得是LngLat 类的数组，不是简简单单的对象数组，这里就需要用Amap的基类LngLat去new一个经纬度

image.png

React-Amap文档里面并没有说，有直接的Amap可以使用，因为引入的时候都没引入，引入的时候是引入这两个

import { Map, MouseTool } from 'react-amap';

但是在github的issues里面有提到，其实默认就有AMap绑在window上了的，所以直接使用Amap或者window.Amap即可，把坐标点，转换成经纬度对象，

于是像上面代码写的那样子，传入改造后的points,但是发现并没有生效

self.tool.polygon({
     path:points
})

把这个函数打印出来发现，根本函数里面根本没有用到传入的path，这个跟文档上面写的不太一样，

image.png

image.png

所以也只能用

 self.P=new AMap.Polygon({
            map:self.instance,
            path:points,
  })

自己画轨迹了