雏形： 最初拿到这个需求想的是直接用一层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) {
if (CommonSelectors.noTarget(e)) return this.clickAnywhere(state, e);
if (CommonSelectors.isOfMetaType(Constants.meta.VERTEX)(e)) return this.clickOnVertex(state, e);
if (CommonSelectors.isFeature(e)) return;
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': DrawRectangle,
"simple_select": SimpleSelectWithoutMiddleVertexMode
this.map.addControl(this.drawTool, 'top-right');
this.drawTool.changeMode('draw_rectangle');
好了，文章到此就结束了。
文章主要针对mapbox绘制矩形中的一些操作，发现没有类似的文章，
也发现很多人在问自定义模式怎么禁止选中功能，希望能帮助到有需要的小伙伴们～
怎么发现文章好单调呢～有会写文章的小姐妹们多指教啊
复制代码
