@langge-data/mapbox-gl-draw

Adds support for drawing and editing features on mapbox-gl.js maps. See a live example here

Requires mapbox-gl-js. Compatible versions are documented in the package.json

On NPM this package has recently moved from mapbox-gl-draw to @langge-data/mapbox-gl-draw

Installing

npm install @langge-data/mapbox-gl-draw

Draw ships with CSS, make sure you include it in your build.

Typescript

Typescript definition files are available as part of the DefinitelyTyped package.

npm install @types/mapbox__mapbox-gl-draw

When using modules

import '@langge-data/mapbox-gl-draw/dist/mapbox-gl-draw.css'

Usage in your application

When using modules

import mapboxgl from 'mapbox-gl';
import MapboxDraw from "@langge-data/mapbox-gl-draw";

Example setup

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v8',
  center: [40, -74.50],
  zoom: 9
});

var Draw = new MapboxDraw();

// Map#addControl takes an optional second argument to set the position of the control.
// If no position is specified the control defaults to `top-right`. See the docs
// for more details: https://docs.mapbox.com/mapbox-gl-js/api/#map#addcontrol

map.addControl(Draw, 'top-left');

map.on('load', function() {
  // ALL YOUR APPLICATION CODE
});

Naming actions

We're trying to follow standards when naming things. Here is a collection of links where we look for inspiration.

自定拓展功能

limitScope 设置允许绘图操作可编辑范围属性

setLimitScope(Feature) 设置允许绘图操作可编辑范围属性

npm