mapbox-gl-draw库如何禁止区域选中（mapbox disabled selected）

需求背景：

在mapbox底图上绘制矩形区域
点击矩形区域不能被选中（阻止编辑拖拽等）
最后利用区域形成的坐标点去请求服务进行渲染。
实现类似图片这样：
复制代码

思路与问题

1. 如何绘制矩形区域
2. 如何更改绘制矩形的虚线样式
3. 如何阻止npm库自己的点击触发选中事件
复制代码

方案

针对第一点和第二点：

雏形： 最初拿到这个需求想的是直接用一层canvas覆盖在mapbox上面，
      点击的时候设法透传点击事件到mapbox层,拿到经纬度，再执行接下来的动作。
     （透传事件没有找到解决方案，失败告终）
end solution: 导入mapbox-gl-draw和mapbox-gl-draw-rectangle-mode库。
              mapbox-gl-draw库支持线条，点，多边形的绘制。
              mapbox-gl-draw-rectangle-mode库用于扩展
              mapbox-gl-draw的自定义rectangle mode，有兴趣可以看看源码。

附上以上两点的解决方案：
  import MapboxDraw from "@mapbox/mapbox-gl-draw";
  import DrawRectangle from 'mapbox-gl-draw-rectangle-mode';
  import drawStyles from '@mapbox/mapbox-gl-draw/src/lib/theme'

  getdefaultDrawStyle = () => {
    // 修改为你想要的颜色宽度
    return drawStyles.map(item => {
      if (item.id === 'gl-draw-polygon-stroke-inactive') {
        return {
          ...item, paint: {
            'line-color': 'blue',
            'line-dasharray': [0.4, 2],
            'line-width': 1.5
          }
        }
      }
      return item
   })
 }

 this.drawTool = new MapboxDraw({
    defaultMode: 'draw_rectangle',
    displayControlsDefault: false,
    styles: this.getdefaultDrawStyle(),
    boxSelect: false,
    touchEnabled: false,
    keybindings: false,
    modes: {
      ...MapboxDraw.modes,
      'draw_rectangle': DrawRectangle, // 自定义模式绘制矩形
    }
  });
 this.map.addControl(this.drawTool, 'top-right');
 this.drawTool.changeMode('draw_rectangle'); 



针对第三点（如何阻止选中）：
  首先，要找到是触发了什么事件导致被选中，这个方法能不能被阻止，能不能被重写。
  通过一系列手动查找～～～（此处忽略），最后找到下图文件
复制代码

执行顺序如上图，好了，那问题来了，可不可以使用某种手段来阻止呢～
答案是当然可以啦～～～（此处应该有一个开心到飞起的表情）

既然可以自定义模式来做一些事情～
那为什么不可以自定义simple_select模式呢（偷偷更改选中的方法）

好了，附上代码吧～

SimpleSelectWithoutMiddleVertexMode.js 
import * as MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw';
import * as Constants from '@mapbox/mapbox-gl-draw/src/constants';
import * as CommonSelectors from '@mapbox/mapbox-gl-draw/src/lib/common_selectors';

const SimpleSelectWithoutMiddleVertexMode = MapboxDraw.modes.simple_select;

SimpleSelectWithoutMiddleVertexMode.onTap = SimpleSelectWithoutMiddleVertexMode.onClick = function (state, e) {
 // 目的是为了避免绘制区域被选中而被拖拽编辑（clickOnFeature）等操作。自带属性没有发现可以实现这种功能
 // Click (with or without shift) on no feature
 if (CommonSelectors.noTarget(e)) return this.clickAnywhere(state, e); // also tap
 if (CommonSelectors.isOfMetaType(Constants.meta.VERTEX)(e)) return this.clickOnVertex(state, e); //tap
 if (CommonSelectors.isFeature(e)) return; // 直接return 简单粗暴 而不是this.clickOnFeature(state, e);
};
export default SimpleSelectWithoutMiddleVertexMode;

index.js
import SimpleSelectWithoutMiddleVertexMode from './drawSimpleSelect';
this.drawTool = new MapboxDraw({
    defaultMode: 'draw_rectangle',
    displayControlsDefault: false,
    styles: this.getdefaultDrawStyle(),
    boxSelect: false,
    touchEnabled: false,
    keybindings: false,
    modes: {
      ...MapboxDraw.modes, // draw_rectangle // mapboxgl-draw-rectangle-drag
      'draw_rectangle': DrawRectangle,
      "simple_select": SimpleSelectWithoutMiddleVertexMode // 取消MapboxDraw自定义取消选中功能
    }
  });
  this.map.addControl(this.drawTool, 'top-right');
  this.drawTool.changeMode('draw_rectangle');
复制代码

好了，文章到此就结束了。

文章主要针对mapbox绘制矩形中的一些操作，发现没有类似的文章，
也发现很多人在问自定义模式怎么禁止选中功能，希望能帮助到有需要的小伙伴们～

怎么发现文章好单调呢～有会写文章的小姐妹们多指教啊
复制代码