MapBox绘制框选范围之后禁止拖动

最新推荐文章于 2025-04-08 10:47:07 发布

七月_Mo

最新推荐文章于 2025-04-08 10:47:07 发布

阅读量1.2k

点赞数 1

分类专栏：地图文章标签：前端

本文链接：https://blog.csdn.net/Mozifei73/article/details/131220129

版权

地图专栏收录该内容

19 篇文章

订阅专栏

文章介绍了一种修改MapboxDraw的SimpleSelect模式，避免在点击时选中并编辑区域。通过重写onTap和onClick方法，禁用对中间顶点的点击响应，只允许点击非特征区域和顶点进行操作。此外，还展示了如何添加绘图工具并配置MapboxDraw实例的参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;


import SimpleSelectWithoutMiddleVertexMode from '../utils/drawSimpleSelect';


/**
 * 添加绘图工具
 */
const modes = MapboxDraw.modes;

export const ADD_DRAW = () => {
  if (draw) {
    REMOVE_DRAW();
  }

  draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
      polygon: true,
      trash: false,
    },
    defaultMode: 'draw_polygon',
    boxSelect: false,
    touchEnabled: false,
    keybindings: false,
    modes: {
      ...MapboxDraw.modes, // draw_rectangle // mapboxgl-draw-rectangle-drag
      // draw_rectangle: DrawRectangle,
      simple_select: SimpleSelectWithoutMiddleVertexMode, // 取消MapboxDraw自定义取消选中功能
    },
  });
  map.addControl(draw, 'bottom-right');
  //绘制好的框选框禁止拖动
  modes.simple_select.onDrag = function (state, e) {
    //when polygon is deselected onDrag will be false and user not be able to drag it
    // console.log(state, e);

    return;
  };
};