mineMap地图编辑图形功能---多边形绘制

需求：在已有显示地图上增加一个可编辑的动态面，圆形拖动圆形实现将圆形范围内的点位显示；初始化时需要默认一个范围面
…
效果预览



需求分解：类似的功能会有很多，单核心都只有一个就是可以编辑的动态的图形的绘制问题。
加载地图相关应用

/**
       * @Description: 初始化地图

       * @Author: ShiWei

       * @Date: 2020-09-07
       */
      init(){
        if (!this.mapController) { this.mapController = new MapController(this);}
        this.mapController.initMap("map-main");
        this.map=this.mapController.getMap();
        this.map.setCenter([106.699069493,26.5961406396])
        this.map.setZoom(10)
        let _this=this;

        /* 地图加载完成
         * 创建地图对象后,开始加载地图资源, 地图资源加载完成后触发load事件
         * 如果地图数据加载并渲染完成后,调用.isStyleLoaded()会返回true, 否则返回false
         */
        this.map.on("load", function() {
          var t = setInterval(function() {
            if (_this.map && _this.map.isStyleLoaded()) {
              _this.addMapHandle(_this.map)
              // 绑定编辑操作记录新增事件
              _this.map.on("edit.record.create", _this.onEditRecordCreate);
              //加入监听
              _this.map.on("edit.selected", _this.onEditSelected);
              //初始化所有区域都加载
              // _this.getAreaByType(1);
              // _this.handleSilder()
              clearInterval(t);
              _this.$message({
                message: '地图数据加载完成',
                type: "success",
              });
            } else {
              clearInterval(t);
            }
          }, 200);
        });

      },

1.绘制一个一直半径和中心的圆面

     /**
       * @Description:设置初始3公里数据

       * @Author: ShiWei

       * @Date: 2020-10-22
       */
      initThreeKilometers(){
       let center=[106.699069493,26.5961406396];
       let radius=30 //代表半径3000
        //steps 默认64
        var options = {steps: 64, units: 'kilometers', properties: {foo: 'bar',center:center, feature_type: "circle", radius: radius}}; //实体
        var circle = turf.circle(center, radius, options);
        if(this.edit){
         this.startId=this.edit.draw.add(circle);
        }
      },

采用turf.js中circle类处理可以快速得到一个我们需要的圆面的GeoJson;
2.绘制到编辑器中this.startId=this.edit.draw.add(circle);
1.2步骤的前提是我们已经激活一个编辑器

   /**
       * @Description:初始化编辑器

       * @Author: ShiWei

       * @Date: 2020-10-22
       */
      initMapEdit(map){
        this.edit = new minemap.edit.init(map, {
          boxSelect: true,
          touchEnabled: true,
          displayControlsDefault: true,
          showButtons: false,
          adsorbEnabled:false,
        });
        this.initThreeKilometers()
        // keybindings, boolean (default true): 地图编辑器是否支持键盘交互;
        // touchEnabled, boolean (default true): 地图编辑器是否支持触摸交互;
        // boxSelect, boolean (default true): 地图编辑器是否支持数据框选，使用 shift+click+drag 进行操作;
        // displayControlsDefault, boolean (default: true): 是否启用或关闭全部控件;
        // drawEnabled, boolean (default: true): 是否启用或关闭图形编辑功能;
        // adsorbEnabled, boolean (default: true): 是否启用或关闭线面吸附功能;
      },

核心步骤处理；
1.启用编辑器：

    /**
       * @Description:开启绘制圆形

       * @Author: ShiWei

       * @Date: 2020-10-22
       */
      onEditBtnClick(mode) {
        if (this.edit && mode) {
          this.edit.onBtnCtrlActive(mode);
        }
      },

为保证我们图上初始化的图形可编辑我们要做当前图形选中时再激活我们的编辑功能

     /**
       * @Description:记录编辑器初始化后第一次选择的图形id

       * @Author: ShiWei

       * @Date: 2020-10-22
       */
     onEditSelected(e) {
        console.log(e.featureIds) //e.featureIds为当前选中的图形id
       if(e.featureIds===this.startId){
         this.onEditBtnClick('circle');
       }
    },

绘制过程中的数据获取

   /**
       * @Description:编辑器绘制结果记录

       * @Author: ShiWei

       * @Date: 2020-10-22
       */
      onEditRecordCreate(e) {
        // record结果说明如下：
        // {
        //     type:0,/*操作类型：0-无、1-删除、2-修改、3-新增、4-替换*/
        //     action:0,/*更新操作行为：0-无、1-图形移动、2-更改图形形状点、3-更改properties*/
        //     features:[],/*本次操作后的features*/
        //     prevFeatures[] /*本次操作前的features*/
        // }


        console.log(e.record)
      },

清除数据及消化实例

   /**
       * @Description:清除编辑器中所有数据

       * @Author: ShiWei

       * @Date: 2020-10-22
       */
      deleteAllOfEdit(){
        this.edit.draw.deleteAll().getAll();
      },
      /**
       * @Description:销毁编辑器

       * @Author: ShiWei

       * @Date: 2020-10-22
       */
       destroyEdit(){
        if(this.edit){
          this.edit.dispose();
          this.edit=null;
        }
       },

使用onEditRecordCreate（e） 方法我们可以动态的实时获取当前绘制图形相关的信息

核心radius我们也可以动态获取根据这个这个半径参数跟后台联动匹配符合范围的点进行绘制