mapbox-extensions 中文

mapboxgl controls : measure、switch map、switch layers、doodle、back ...

DEMO

examples

usage

CDN

<scriptsrc="https://cdn.jsdelivr.net/npm/mapbox-extensions@1.3.14/dist/mapbox-extensions.js"></script><linkhref="https://cdn.jsdelivr.net/npm/mapbox-extensions@1.3.14/dist/index.css" rel="stylesheet">

NODE

npm install / yarn add mapbox-extensions
import { SwitchLayerControl } from 'mapbox-extensions'
import 'mapbox-extensions/dist/index.css'

Give a Star! ⭐

If you like or are using this project to learn or start your solution, please give it a star. Thanks!

features

Measure

map.addControl(newMeasureControl({horizontal : true,//default false btnBgColor : 'red',//default '#ffffff'btnActiveColor:'red',//default '#ddd'geometryClick:true,//defualt false enableModes:['LineString'],//default allonStart:()=>{},onStop:()=>{},measurePointOptions:{},measureLineStringOptions:{},measurePolygonOptions:{}}))

mouse operation

• left click : add a point
• right click : remove a point
• left double click : finish measure and start next

Back to origin

map.addControl(newBackToOriginControl({}))

Switch Mapwith swtch-layer

map.addControl(newSwitchMapControl({satelliteOption:{name: "satellite",textColor : 'red',backgroundImage : "",},showSatelliteDefault:true,extra:{// default undefined, similar to SwitchLayerControlOptionsnailActiveColor : "red"}}));

Switch Layer

map.addControl(newSwitchLayerControl({name:"Layer Manager",position:"top-left",selectAndClearAll:true,selectAllLabel:"select all",clearAllLabel:"clear all",showToTop:true,topLayerId:"",layerGroups:{"layer group 1":{mutex:true,collapse:true,uiType:"SwitchBtn",layers:[{name:"layer1",layer: {},fixed:true,zoom:-100,easeToOptions:{},mutex:true,mutexIdentity:"t1",active:true,backgroundImage:"",backgroundImageActive:"",onVisibleChange:(visible:boolean)=>{}}]}}}));

Extend

map.addControl(newExtendControl({img1 : "",img2 : "",content : div,position : "top-left",mustBe : "pc",onChange:(open:boolean)=>{}}));

Doodle

map.addControl(newDoodleControl({name: '',reName : '',exitText : '',lineColor : '',lineWidth : 1,polygonColor: '',polygonOpacity : 1,onStart: ()=>{measureControl.stop()},onDrawed: polygon=>{()=>{alert(JSON.stringify(polygon))}},onClear:()=>{},onExit:()=>{}}))