基于事件实现Arcgis绘制功能

Arcgis JavaScript Api 3.23、Typescript

背景

需要做一个地图小工具（测距、侧面积、缓冲区分析），我尝试了Arcgis 自带的绘制工具，但由于图层比较复杂，并且自带的工具几乎不能定制。我就打算使用基本的事件去实现绘制点线面的工具。大体的步骤为：分析点线面的绘制过程，然后监听鼠标事件，再进行绘制。因为是半年前的事情了，所以就简单重现一下。以下主要提供思路参考(千万不要想直接复制代码就能运行)。

分析点、线、面的绘制过程

• 点：点很简单。就是监听鼠标事件，然后获取鼠标的坐标，然后再绘制就可以了。

  
  
  

  绘制点的动作

• 圆：圆的绘制和点的差不多，也是监听鼠标单击事件，然后获取鼠标的坐标，再根据半径绘制圆。

  
  
  

  圆的绘制动作

• 线：单击地图开始绘制，从起始点，线段跟随鼠标移动，再此单击鼠标，绘制2个端点的线，线段从新的起点继续跟随鼠标移动。直到双击，绘制多段线结束。

  
  
  

  线段绘制的动作

• 面：单击地图开始绘制，从起始点，线段跟随鼠标移动，再此单击鼠标，绘制2个短点的线，线段从新的起点继续跟随鼠标移动，首尾相接，同时出现一个多边形，并随着鼠标，多边形的顶点不断变化。直到双击，绘制面结束。

  
  
  

  面绘制的动作

实现过程

重点！我一开始是直接监听map的事件，但是发现这样做在切换底图的时候，监听事件会出现问题（我遇到好几个问题，但是具体的我也没有做记录）。所以，我直接监听了地图DIV的原始dom的事件，放心监听的