@lxc_07/maplibre-gl-draw NPM

@lxc_07/maplibre-gl-draw

基于mapbox-gl-draw@1.4.3修改支持maplibire-gl-js

✨相比mapbox-gl-draw的改动

支持maplibire-gl-js
新增绘制矩形
新增对于多边形（包含矩形）的面积限制
新增TIP提示
新增keepActive保持绘制的选中状态，开启后默认只能画一个图形【实验性】

安装

npm install @lxc_07/maplibre-gl-draw

确保将maplibre-gl-draw.css包含在构建中

使用

JavaScript

When using modules

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

CSS

When using modules

import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";

Typescript【TODO】

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

npm install @types/mapbox__mapbox-gl-draw

示例

var map = new maplibre.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v12",
  center: [40, -74.5],
  zoom: 9,
});

var Draw = new MapboxDraw();

var Draw1 = new MaplibreDraw({
  displayControlsDefault: false,
  controls: {
    polygon: true,
    rectangle: true,
    trash: true,
  },
  keepActive: true,
  areaLimit: 5 * 1000000,
  tip: {
    show: true,
    unit: "km²",
  },
})

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

map.on("load", function () {
  var feature = { type: "Point", coordinates: [-74.5, 40] };
  var featureIds = Draw.add(feature);
  //设置
  map.on("draw.create", (e) => {
    console.log(e);
  });
  map.on("draw.update", (e) => {
    console.log(e);
  });
  map.on("draw.delete", (e) => {
    console.log(e);
  });
});