76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
// @ts-nocheck
|
|
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
|
|
import MapboxDraw from '@mapbox/mapbox-gl-draw';
|
|
import type { DrawModes } from '@mapbox/mapbox-gl-draw';
|
|
import type { MapboxMap } from 'react-map-gl';
|
|
import drawLineSelectMode from './drawLineSelectMode.draw.js';
|
|
import drawCircleMode from './drawCircleMode.draw.js';
|
|
import drawRectMode from './drawRectMode.draw.js';
|
|
import drawDirectMode from './drawDirectMode.draw.js';
|
|
import drawSimpleSelectMode from './drawSimpleSelectMode.draw.js';
|
|
import drawStaticMode from './drawStaticMode.draw.js';
|
|
import mapboxDrawStyle from './drawStyle';
|
|
|
|
interface DrawControl {
|
|
modes?: DrawModes;
|
|
}
|
|
function noop(): void {
|
|
/* do nothing */
|
|
}
|
|
//mapbox-gl-draw api
|
|
//https://github.com/mapbox/mapbox-gl-draw/blob/main/docs/MODES.md#life-cycle-functions
|
|
|
|
function drawControl(
|
|
map: MapboxMap,
|
|
params: DrawControl = {},
|
|
defaultMode = 'static',
|
|
onDrawCreate = () => {}
|
|
) {
|
|
const { modes: paramModes = {} } = params;
|
|
|
|
if (!map) {
|
|
return;
|
|
}
|
|
/**
|
|
* MapboxDraw 里面有的
|
|
* draw_line_string 画线
|
|
* draw_polygon 多边形
|
|
* draw_point
|
|
* simple_select
|
|
* direct_select
|
|
*
|
|
* 需要自定义的
|
|
* draw_line_select; 路径框选1
|
|
* direct_select;
|
|
* simple_select;
|
|
* draw_circle;1
|
|
* draw_rect;1
|
|
*
|
|
* 用MapboxDraw的
|
|
* draw_polygon 多边形
|
|
* draw_line_string 画线
|
|
*/
|
|
|
|
const draw = new MapboxDraw({
|
|
defaultMode: defaultMode,
|
|
displayControlsDefault: false, // 取消默认的按钮
|
|
styles: mapboxDrawStyle,
|
|
modes: {
|
|
...MapboxDraw.modes,
|
|
draw_line_select: drawLineSelectMode,
|
|
draw_line_string: drawLineSelectMode,
|
|
draw_circle: drawCircleMode,
|
|
draw_rect: drawRectMode,
|
|
direct_select: drawDirectMode,
|
|
simple_select: drawSimpleSelectMode,
|
|
static: drawStaticMode,
|
|
...paramModes,
|
|
},
|
|
});
|
|
map.addControl(draw);
|
|
map.on('draw.create', onDrawCreate || noop);
|
|
return draw;
|
|
}
|
|
|
|
export default drawControl;
|