mapbox小知识

说实话，不是很友好。文档东西很少。
mapbox-gl-draw插件。默认的不想用。
需求是自定义绘制，新增，编辑。
初次接触，如有不对，请指教，谢谢。

自定义绘制区域总结：

自己定义事件使用：

初始化:
draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
      // polygon: true,
      // trash: true,
    },
  });
  map.addControl(draw);
  map.on("draw.create", this.updateArea);
  
  点击新增：draw.changeMode("draw_polygon");
  点击编辑：draw.changeMode("simple_select");

  updateArea(e){
      
  }
  
  
  以下两种为查询时渲染可用
  
  <!-- 绘制可编辑的-->
draw.add({
    id: "polygon-3355",
    type: "Feature",
    properties: {},
    geometry: {
      type: "Polygon",
      coordinates: [
        [
          [110.45665844376919, 39.05322570269783],
          [110.46253784592864, 39.05572513719673],
          [110.46682938035315, 39.05249251846436],
          [110.46017750199667, 39.04945972100103],
          [110.45665844376919, 39.05322570269783],
        ],
      ],
    },
  });
 

  <!-- 新建图层绘制多边形-->
  map.addSource("draw", {
    /* 添加Source，类型是geojson */
    type: "geojson",
    data: {
      /* geojson数据 */
      type: "Feature",
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [110.45665844376919, 39.05322570269783],
            [110.46253784592864, 39.05572513719673],
            [110.46682938035315, 39.05249251846436],
            [110.46017750199667, 39.04945972100103],
            [110.45665844376919, 39.05322570269783],
          ],
        ],
      },
    },
  });
  map.addLayer({
    id: "draw",
    type: "fill" /* fill类型layer */,
    source: "draw",
    layout: {},
    paint: {
      "fill-color": "#088" /* fill颜色 */,
      "fill-opacity": 0.3 /* fill透明度 */,
    },
  });
  绘制多边形，但不可使用插件进行编辑。
  查询展示：两种都可以
  
  这时候就有问题了，如果使用第一种，新增时之前已绘制的也可以进行编辑，这肯定是不行的。
  第二种是编辑时有问题，无法编辑。
  
  最终解决方案是，点编辑时隐藏掉图层，使用draw.add重新绘制。

新增区域：

addDrawArea() {
// 清掉点击事件
  this.map.off("click", this.selectDrawInfo);
  this.draw.deleteAll();
  this.map.setLayoutProperty("draw", "visibility", "visible");
  // 禁止双击缩放
  this.map.doubleClickZoom.disable();
 
  this.draw.changeMode("draw_polygon");
  this.map.on("draw.create", this.updateArea);
}

编辑区域

  editDraw() {
    this.map.setLayoutProperty("draw", "visibility", "none");
    this.map.on("draw.update", this.updateArea);
    this.map.on("draw.create", this.updateArea);
    this.draw.changeMode("simple_select");
    this.drawData.id = "draw";
    // 绘制
    this.draw.add(this.drawData);
    // 获取点击数据
    this.map.on("click", this.selectDrawInfo);
  }