映射框- gl- draw- 圆形

添加对绘制和编辑圆形特性的支持 映射框- gl- draw 图书馆.

演示

圆形模式

拖动圆形模式

使用量

安装

npm install mapbox-gl-draw-circle

import {
    CircleMode,
    DragCircleMode,
    DirectMode,
    SimpleSelectMode
} from 'mapbox-gl-draw-circle';


// userProperties has to be enabled
const draw = new MapboxDraw({
  defaultMode: "draw_circle",
  userProperties: true,
  modes: {
    ...MapboxDraw.modes,
    draw_circle  : CircleMode,
    drag_circle  : DragCircleMode,
    direct_select: DirectMode,
    simple_select: SimpleSelectMode
  }
});

// Add this draw object to the map when map loads
map.addControl(draw);

默认半径单位在 公里数 初始半径为 2公里长。 。 。 .

// Provide the default radius as an option to CircleMode
draw.changeMode('draw_circle', { initialRadiusInKm: 0.5 });

它与地图盒-gl-draw 库发生相同事件. 欲知详情,请遵照此条 链接。 。 。 .

返回的样本特征对象 draw.create 事件

{
  "id": "e184898e58feaa5c2c56f20a178ffe2c",
  "type": "Feature",
  "properties": {
    "isCircle": true,
    "center": [
      -0.2472604947478203,
      51.53200220026099
    ],
    "radiusInKm": 2
  },
  "geometry": {
    "coordinates": [], // populated with 64 vertices used to render the circle
    "type": "Polygon"
  }
}

更改日志

页:1

• 添加了新的 DragCircle 模式 .
• 固定 (# 5) , 多边形模式与 CircleMode 一起使用时无效 .