mapbox-gl-draw 绘制态势标绘-分队战斗行动

本文链接：https://blog.youkuaiyun.com/xm_w_xm/article/details/129028448

本文介绍了如何利用Mapbox GL Draw库在前端进行态势标绘，特别是针对分队战斗行动的场景。通过DrawSquadCombat.js和CreateSquadCombat.js两个关键文件，详细阐述了绘制过程和实现细节。

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

DrawSquadCombat.js

import{CreateSquadCombat}from"./CreateSquadCombat";import createVertex from"@mapbox/mapbox-gl-draw/src/lib/create_vertex";const Constants=require("@mapbox/mapbox-gl-draw/src/constants");import*as CommonSelectors from"@mapbox/mapbox-gl-draw/src/lib/common_selectors";import isEventAtCoordinates from"@mapbox/mapbox-gl-draw/src/lib/is_event_at_coordinates";const doubleClickZoom={enable(t){setTimeout(()=>{t.map&&t.map.doubleClickZoom&&t._ctx&&t._ctx.store&&t._ctx.store.getInitialConfigValue&&t._ctx.store.getInitialConfigValue("doubleClickZoom")&&t.map.doubleClickZoom.enable()},0)},disable(t){setTimeout(()=>{t.map&&t.map.doubleClickZoom&&t.map.doubleClickZoom.disable()},0)}},DrawSquadCombat={onSetup:function(t){const e=this.newFeature({type:Constants.geojsonTypes.FEATURE,properties:{isSquadCombat:!0},geometry:{type:Constants.geojsonTypes.POLYGON,coordinates:[[]]}});return this.addFeature(e),this.clearSelectedFeatures(),doubleClickZoom.disable(this),this.updateUIClasses({mouse:Constants.cursors.ADD}),this.activateUIButton(Constants.types.POLYGON),this.setActionableState({trash:!0}),{squadCombat:e,currentVertexPosition:0}},onTap:function(t,e){t.squadCombat.properties.squadCombatPoint1&&this.onMouseMove(t,e),this.onClick(t,e)},onKeyUp:function(t,e){CommonSelectors.isEscapeKey(e)?(this.deleteFeature([t.squadCombat.id],{silent:!0}),this.changeMode(Constants.modes.SIMPLE_SELECT)):Common