README

mapbox-draw-expand

Expanded development based on mapbox-gl-draw.

CHANGE LOGS

1.3.5

FEAT: support removeLayer.

1.3.4 1.3.3

FIX: delete auxiliaryLine.

1.3.2

DOCS: update change logs.

1.3.1

FIX: Optimize the adsorption effect.

1.3.0

FEAT: support Angle Snapping.

Use this function to draw segment that is parallel, perpendicular or at precisely defined angles (30°, 45°, 60°, 90°) degrees to the base segment.

Basic usage

Activate Draw mode as usual
To select base segment:
- click Right mouse click on segment you want to use as reference OR
- move mouse that you can choose the direction of next segment to make specific angle between segments (0,30,45,90, degrees etc.).
Angle snapping mode will snap angle of the new segments to predefined list of angles - thus it's name

EXPAND FUNCTIONS

In the simple_select or direct_mode, hold Esc to switch to simple_select mode and clear all selected features.
In the simple_select mode, hold down shift + e to select the feature that has an intersection with the selected feature. And hold down shift + r to select all.
In the direct_select mode and the seleted feature's type is LineString, when you select the first or last vertex, press and hold shift + q to enter the draw_line_string mode. This allows you to continue drawing the current feature.
In the simple_select mode, if some features are selected, press ctrl + v to paste the features, and the new features will be rendered to the position centered on the mouse position.

NOTES

同层吸附说明

// 进入绘制 mode 时会触发 draw.drawingInit 事件，可在此设置绘制图形的属性
map.on('draw.drawingInit', function(e) {
    Draw.setFeatureProperty(e.featureId, 'level', 1);
})

// mapbox-gl-draw 初始化时增加 adsorbFilterFunc 配置项
/**
 * 可吸附 features 过滤
 * @param {Object} nowFeature 当前绘制 feature
 * @param {Array<Object>} allAdsorbFeatures 当前鼠标位置下可吸附的 features
 * @return {Array<Object>} 返回所有可吸附的 features 集合 默认为 allAdsorbFeatures
 */
{
    ...
    adsorbFilterFunc: (nowFeature, allAdsorbFeatures) => {
        return allAdsorbFeatures.filter(v => Number(v.properties.level) === Number(nowFeature.properties.level));
    }
}

Usage no npm install needed!