基于事件实现Arcgis绘制功能

作者: dsjaikdnsajdnua | 来源:发表于2019-01-15 19:26 被阅读94次

基于事件实现Arcgis绘制功能
基于Arcgis绘制采样点地图
R 地图绘制-比例尺与指北针
arcgis api for js入门开发系列十九图层在线编辑
布局拼图功能实现
Android Canvas实现可拖拽的电子白板系统（画笔，橡皮
Android调整画笔的粗细
ArcGIS for qml-测距
vue中使用leaflet实现地图卷帘功能
2019-08-28

Arcgis JavaScript Api 3.23、Typescript

背景

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

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

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

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

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

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

面绘制的动作

实现过程

重点！我一开始是直接监听map的事件，但是发现这样做在切换底图的时候，监听事件会出现问题（我遇到好几个问题，但是具体的我也没有做记录）。所以，我直接监听了地图DIV的原始dom的事件，放心监听的时间类型是：esri.AGSMouseEvent，所以会见地理信息都带过来。

准备工作，写辅助的方法

先写一个工具类：Utils.ts，然后写添加/移除事件的方法，为了兼容IE，直接使用最普通的监听也是可以的、写将点集合转化成线/面集合的二维数组。

  /**  
     *@description 事件绑定，兼容各浏览器  
     * @param target 事件触发对象   
     * @param type   事件  
     * @param func   事件处理函数  
     */  
    static addEvents(target:HTMLElement, type:string, func:any) {  
        if (target.addEventListener)    //非ie 和ie9  
            target.addEventListener(type, func, false);  
        else if ((target as any).attachEvent)   //ie6到ie8  
            (target as any).attachEvent("on" + type, func);  
        else target["on" + type] = func;   //ie5  
    };

/**  为了不影响地图自身的事件，所以我们需要在操作完成之后移除所有的绘制事件
     * @description 事件移除，兼容各浏览器  
     * @param target 事件触发对象  
     * @param type   事件  
     * @param func   事件处理函数  
     */  
    static removeEvents(target:HTMLElement, type:string, func:any){  
        if (target.removeEventListener)  
            target.removeEventListener(type, func, false);  
        else if ((target as any).detachEvent)  
            (target as any).detachEvent("on" + type, func);  
        else target["on" + type] = null;  
    }; 

  /**
     * @param pts 将多个点数组，解析成线段的点集合。
     * @returns ptArr 返回点的二维数组
     */
  public static buildCoordinates(pts:Point[]){
      let ptArr:number[][] = [];
      if(pts){
          pts.forEach(pt => {
              ptArr.push([pt.x,pt.y])
          });
      }
      return ptArr;
  }

 /**
   * 返回一个通用的面
   */
public static getComFillSymbol(){
    return new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("red"), 2),new Color([30,30,30, 0.5]));
  }

添加一个专门存放绘制临时图形的图层，因为绘制线/多边形的过程会不断的清除图层。这个图层不是常驻图层，所以能直接全部清除，方便操作

  drawEntity:{
        layer?:GraphicsLayer;
        geometry?:Geometry;//存放临时图形
    } = {
        layer:new GraphicsLayer({id:"buffer-draw",opacity: 1})
    }

绘制过程。监听各种事件

点、圆的绘制，调用以上的addEvents方法，添加对地图div的“click”事件，然后在点击事件里面（arcgis官方封装过有传递坐标信息），根据事件传递过来的坐标信息绘制相应的点符号即可：

    /**  
     * @param viewDiv 为地图的div   
     * @param toolboxLayer   将图形绘制的图层  
     * @param func   事件处理函数  
     */  
Utils.addEvents(this.viewDiv,"click",function(event: Event){
  let point = (event as esri.AGSMouseEvent).mapPoint;
  let circle = new Circle({
      center: point,
      radius: 10,
      radiusUnit: "esriKilometers"
  });
  let symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("red"), 2),new Color([30,30,30, 0.5]));
  let graphic = new Graphic(circle, symbol);
  this.toolboxLayer.add(graphic);
})

下面是绘制圆的代码，绘制点的，只需要把circle替换成点就可以了。其他不变

let point = (event as esri.AGSMouseEvent).mapPoint;
let symbol = new PictureMarkerSymbol({
    "url":this.pinConfig.pic.url,//图片地址
    "height":20,
    "width":13,
    "type":"esriPMS",
});
let graphic = new Graphic(point, symbol);
this.toolboxLayer.add(graphic);

线的绘制：线的过程需要监听3个事件：点击（开始）、移动（过程）、双击（结束）。
-监听单击事件，绘制一个点，并开始绘制和记录之后的所有点击的坐标：

    /**
     * @param point 添加的点
     * @prop clickPoints 存储点的变量
     */
  addClickPoint(point:Point){//用于记录画线过程中的所有点坐标，用于后面的绘制多边形
        this.clickPoints.push(point);
        return this.clickPoints.length;
    }
    /**
     * 用于监听点击的方法。
     */
  drawPolylineClick(event: Event){
        let point  (event as esri.AGSMouseEvent).mapPoint;
        let len = this.addClickPoint(point);
        if(len===1){//当第一个点的时候，绘制
            let geometry = new Polyline(ToolUtils.buildCoordinates([point]));
            let graphic = new Graphic(geometry, new SimpleLineSymbol());
            this.toolboxLayer.add(graphic);
        }else{
            let gLen = this.toolboxLayer.graphics.length;
            let geo = ( this.toolboxLayer.graphics[gLen-1].geometry as Polyline).insertPoint(0, len-1, point)
            this.toolboxLayer.graphics[gLen-1].setGeometry(geo);
        }
    }
  /**
     * 在鼠标移动的时候，我们需要不断的监听并绘制线。并将过程的图形存放于drawEntity变量中
     */
    drawPolylineMouseMove(event: Event){
        let point = (event as esri.AGSMouseEvent).mapPoint;
        let len = this.clickPoints.length;
        this.drawEntity.layer.clear();
        if(len>0){
            let lastPt = this.clickPoints[len-1];
            let polyline = new Polyline(ToolUtils.buildCoordinates([lastPt,point]));
            let graphic = new Graphic(polyline, new SimpleLineSymbol());
            this.drawEntity.layer.add(graphic);//这个图层不是常驻图层，所以能直接全部清除，方便操作
        }
    }
/*这个是辅助方法*/
  generateBufferGraphic(geometry:Geometry,distance: number | number[],unit: string | number,){
        let geometryTmp =<Polygon>GeometryEngine.geodesicBuffer(geometry,distance,unit);
        this.BufferLineAnalyze(geometry,this.currentLayers);
        let graphic = new Graphic(geometryTmp, ToolUtils.getComFillSymbol());
        return graphic;
    }
   /**
     * 监听双击事件，已停止绘制
     */
    drawPolylineDblClick(event: Event){
        if(this.clickPoints.length < 1){
            this.$message.warning("请绘制2个以上的点")
            return;
        }
        let point = (event as esri.AGSMouseEvent).mapPoint;
        let len = this.addClickPoint(point);
        let graphics = this.toolboxLayer.graphics
        let gLen = graphics.length;
        let geo = ( graphics[gLen-1].geometry as Polyline).insertPoint(0, len-1, point)
        graphics[gLen-1].setGeometry(geo);
        this.endDrawPolyline();
        let graphic = this.generateBufferGraphic(graphics[gLen-1].geometry,this.BufferConfig.bufferDistance,this.BufferConfig.unit);
        this.BufferLineAnalyze(graphic.geometry,this.currentLayers);
        this.toolboxLayer.remove(graphics[gLen-1])
        this.toolboxLayer.add(graphic);
    }
/**
     * 将上面的事件都添加进来
     */
    drawPolyline(){
        Utils.addEvents(this.viewDiv,"click",this.drawPolylineClick)
        Utils.addEvents(this.viewDiv,"mousemove",this.drawPolylineMouseMove)
        Utils.addEvents(this.viewDiv,"dblclick",this.drawPolylineDblClick)
    }
    /**
     * 双击绘制结束，将所有事件移除
     */
    endDrawPolyline(){
        this.drawEntity.layer.clear();
        Utils.removeEvents(this.viewDiv,"click",this.drawPolylineClick)
        Utils.removeEvents(this.viewDiv,"mousemove",this.drawPolylineMouseMove)
        Utils.removeEvents(this.viewDiv,"dblclick",this.drawPolylineDblClick)
        this.enableAllEvent();
    }

面的绘制：线的过程需要监听3个事件：点击（开始）、移动（过程，需要实时绘制首位相接的面和跟随鼠标移动的线）、双击（结束，将所有的点绘制成一个面即可完成）。

  /**
     * 监听面的点击。如果是第一个点则初始化面，之后的就直接在该面的基础上追加点
     */
    drawPolygonClick(event: Event){
        let point = (event as esri.AGSMouseEvent).mapPoint;
        let len = this.addClickPoint(point);
        if(len===1){//如果是第一个点则初始化面
            let geometry = new Polygon(ToolUtils.buildCoordinates([point]));
            let graphic = new Graphic(geometry, ToolUtils.getComFillSymbol());
            this.toolboxLayer.add(graphic);
        }else{//之后的就直接在该面的基础上追加点
            let graphics = this.toolboxLayer.graphics
            let gLen = graphics.length
            let geo = (this.toolboxLayer.graphics[gLen-1].geometry as Polygon).insertPoint(0, len-1, point)
            this.toolboxLayer.graphics[gLen-1].setGeometry(geo);
        }
    }
  /**
     * 监听绘制面过程中鼠标的移动。就是不断得更新线和面。不断得将前一个点和鼠标形成的线和面不断绘制
     */
    drawPolygonMouseMove(event: Event){
        let point = (event as esri.AGSMouseEvent).mapPoint;
        let len = this.clickPoints.length;
        this.drawEntity.layer.clear();
        if(len===1){//当只有一个点，那么就只绘制线
            let lastPt = this.clickPoints[0];
            let polyline = new Polyline(ToolUtils.buildCoordinates([lastPt,point]));
            let graphic = new Graphic(polyline, ToolUtils.getComFillSymbol());
            this.drawEntity.layer.add(graphic);
        }else if(len>1){//如果大于2个点，则开始绘制面
            let lastPt = this.clickPoints[len-1];
            let firstPt = this.clickPoints[0];
            let geometry = new Polygon(ToolUtils.buildCoordinates([firstPt,point,lastPt]));
            let graphic = new Graphic(geometry, ToolUtils.getComFillSymbol());
            this.drawEntity.layer.add(graphic);
        }
    }
/**
     * 监听双击，结束绘制
     */
    drawPolygonDblClick(event: Event){
        if(this.clickPoints.length < 2){
            this.$message.warning("请绘制2个以上的点")
            return;
        }
        let point = (event as esri.AGSMouseEvent).mapPoint;
        let len = this.addClickPoint(point);
        let graphics = this.toolboxLayer.graphics
        let gLen = graphics.length
        let geo = (graphics[gLen-1].geometry as Polygon).insertPoint(0, len-1, point)
        graphics[gLen-1].setGeometry(geo);
        this.endDrawPolygon();
    }
/**
     * 开始绘制面，将所有的事件添加
     */
    drawPolygon(){
        let lay = AllEsriMap.findLayer(this.drawEntity.layer.id);
        Utils.addEvents(this.viewDiv,"click",this.drawPolygonClick)
        Utils.addEvents(this.viewDiv,"mousemove",this.drawPolygonMouseMove)
        Utils.addEvents(this.viewDiv,"dblclick",this.drawPolygonDblClick)
    }
    /**
     * 结束绘制面，将所有的事件移除
     */
    endDrawPolygon(){
        this.drawEntity.layer.clear();
        this.clickPoints = [];
        Utils.removeEvents(this.viewDiv,"click",this.drawPolygonClick)
        Utils.removeEvents(this.viewDiv,"mousemove",this.drawPolygonMouseMove)
        Utils.removeEvents(this.viewDiv,"dblclick",this.drawPolygonDblClick)
        this.enableAllEvent();
    }

总结

以上，就是实现的过程。一开始，我还是使用arcgis自带的针对map的点击事件，发现切换底图（地形图，影像图）会出现不能绘制的问题。这个纳闷了很久。所以查了下，监听原生的dom也是可以的。其实所有的都是为了缓冲区分析服务的。自己写工具，可以兼容所有的图层。针对不同的图层（要素图层，自己绘制的图层）都可以进行缓冲区分析。下次有空再写吧

基于事件实现Arcgis绘制功能
Arcgis JavaScript Api 3.23、Typescript 背景需要做一个地图小工具（测距、侧面...
基于Arcgis绘制采样点地图
参考：基于Arcgis绘制采样点地图 - 知乎[https://zhuanlan.zhihu.com/p/1967...
R 地图绘制-比例尺与指北针
ggplot绘制map R语言可以进行数据分析，也可以进行地图绘制，而且非常简洁，快速。虽然Arcgis基于桌面可...
arcgis api for js入门开发系列十九图层在线编辑
本篇主要讲述的是利用arcgis api实现图层在线编辑功能模块，效果图如下：实现思路： 1.arcgis se...
布局拼图功能实现
一、功能简述二、布局模板三、布局功能实现构建矩形边框模型构建图片缩放平移模型布局绘制事件触发边框拖动规则图片缩...
Android Canvas实现可拖拽的电子白板系统（画笔，橡皮
先看效果图WechatIMG1.png 实现功能拖拽功能一键还原功能绘制文字功能绘制集合图形功能画笔功能...
Android调整画笔的粗细
基于绘制进度条的基础上实现调整画笔粗细的功能首先呢就是创建一个类继承于View来管理我们绘制的控件，然后完成进度...
ArcGIS for qml-测距
源码：sueRimn实现求地图上两点之间距离功能这个功能主要实现鼠标在地图上点击两点进行测距。在ArcGIS ...
vue中使用leaflet实现地图卷帘功能
背景最近在做一个vue项目里面需要实现一个地图卷帘功能，本来是打算使用arcgis api 来实现这个功能，后来...
2019-08-28
基于REmap包和Echarts绘制地图前段时间帮朋友处理数据，用到了热力地图，一直知道R可以实现这个功能，但未...