|
|
@@ -94,6 +94,9 @@ export class olMap {
|
|
|
// 自定义绘制结束调用方法
|
|
|
private drawEndMethod;
|
|
|
private selectedFeature;
|
|
|
+ private drawing;
|
|
|
+ private path;
|
|
|
+ private anyLine;
|
|
|
|
|
|
constructor(options) {
|
|
|
this.options = options;
|
|
|
@@ -357,7 +360,8 @@ export class olMap {
|
|
|
}
|
|
|
this.closeDraw();
|
|
|
if (newOptions.graphicsType === 'anyLine') {
|
|
|
- this.drawAnyLine();
|
|
|
+ this.drawOptions.fillOpacity = 0;
|
|
|
+ this.drawAnyLine(this.drawOptions);
|
|
|
} else {
|
|
|
// 创建绘制交互
|
|
|
let style = new Style({
|
|
|
@@ -485,74 +489,59 @@ export class olMap {
|
|
|
data.id = id;
|
|
|
return { text, data };
|
|
|
}
|
|
|
- drawAnyLine() {
|
|
|
- document.addEventListener('touchend', this.handleTouchEnd);
|
|
|
- this.map.on('pointerdown', this.handleTouchStart);
|
|
|
- this.map.on('pointermove', this.handleTouchMove.bind(null, this.options));
|
|
|
- document.addEventListener('mouseup', this.handleTouchEnd.bind(null, this.options));
|
|
|
- }
|
|
|
- handleTouchStart(e) {
|
|
|
- this.drawing = true;
|
|
|
- const interactions = this.map.getInteractions();
|
|
|
- interactions.forEach((interaction) => {
|
|
|
- if (interaction instanceof DragPan || interaction instanceof DoubleClickZoom) {
|
|
|
- interaction.setActive(false); // 修改为需要的值，true或false
|
|
|
- }
|
|
|
- });
|
|
|
+ drawAnyLine(drawOptions) {
|
|
|
+ const handleTouchStart = (e) => {
|
|
|
+ this.drawing = true;
|
|
|
+ const interactions = this.map.getInteractions();
|
|
|
+ interactions.forEach((interaction) => {
|
|
|
+ if (interaction instanceof DragPan || interaction instanceof DoubleClickZoom) {
|
|
|
+ interaction.setActive(false); // 修改为需要的值，true或false
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- this.path = [e.lnglat];
|
|
|
- // if (this.anyLine) {
|
|
|
- // map.remove(anyLine);
|
|
|
- // }
|
|
|
- }
|
|
|
- handleTouchMove(options, e) {
|
|
|
- if (!this.drawing) return;
|
|
|
- this.path.push(e.lnglat);
|
|
|
- // if (anyLine) {
|
|
|
- // map.remove(anyLine);
|
|
|
- // }
|
|
|
- this.anyLine = new Feature({
|
|
|
- geometry: new LineString(this.path) // path为坐标数组，如[[x1,y1], [x2,y2]]
|
|
|
- });
|
|
|
- const lineStyle = new Style({
|
|
|
- stroke: new Stroke({
|
|
|
- color: hexToRgba(options.strokeColor, options.strokeOpacity), // 合并颜色与透明度
|
|
|
- width: options.strokeWeight,
|
|
|
- lineJoin: 'round' // 线段连接处圆角
|
|
|
- })
|
|
|
- });
|
|
|
- this.anyLine.setStyle(lineStyle);
|
|
|
- // new AMap.Polyline({
|
|
|
- // path: path,
|
|
|
- // strokeColor: options.strokeColor,
|
|
|
- // strokeOpacity: options.strokeOpacity,
|
|
|
- // strokeWeight: options.strokeWeight,
|
|
|
- // strokeStyle: options.strokeStyle,
|
|
|
- // lineJoin: 'round'
|
|
|
- // });
|
|
|
- this.drawVector.getSource().addFeature(this.anyLine);
|
|
|
- }
|
|
|
- handleTouchEnd(options) {
|
|
|
- // drawing = false;
|
|
|
- // map.setStatus({
|
|
|
- // showIndoorMap: true,
|
|
|
- // dragEnable: true,
|
|
|
- // keyboardEnable: true,
|
|
|
- // doubleClickZoom: true,
|
|
|
- // zoomEnable: true,
|
|
|
- // rotateEnable: true
|
|
|
- // });
|
|
|
- // map.off('touchstart', handleTouchStart);
|
|
|
- // map.on('touchmove', handleTouchMove.bind(null, options));
|
|
|
- // document.addEventListener('touchend', handleTouchEnd.bind(null, options));
|
|
|
- // map.off('mousedown', handleTouchStart);
|
|
|
- // map.off('mousemove', handleTouchMove);
|
|
|
- // document.removeEventListener('mouseup', handleTouchEnd);
|
|
|
- // if (!!drawEndMethod) {
|
|
|
- // drawEndMethod(options, anyLine);
|
|
|
- // }
|
|
|
- // anyLine = null;
|
|
|
+ this.path = [e.coordinate];
|
|
|
+ // 移除旧的线段
|
|
|
+ if (this.anyLine) {
|
|
|
+ this.drawVector.getSource().removeFeature(this.anyLine);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const handleTouchMove = (e) => {
|
|
|
+ if (!this.drawing) return;
|
|
|
+ this.path.push(e.coordinate);
|
|
|
+ // 移除旧的线段
|
|
|
+ if (this.anyLine) {
|
|
|
+ this.drawVector.getSource().removeFeature(this.anyLine);
|
|
|
+ }
|
|
|
+ this.anyLine = new Feature({
|
|
|
+ geometry: new LineString(this.path)
|
|
|
+ });
|
|
|
+ const lineStyle = new Style({
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: hexToRgba(this.drawOptions.strokeColor, this.drawOptions.strokeOpacity), // 合并颜色与透明度
|
|
|
+ width: this.drawOptions.strokeWeight,
|
|
|
+ lineJoin: 'round' // 线段连接处圆角
|
|
|
+ })
|
|
|
+ });
|
|
|
+ this.anyLine.setStyle(lineStyle);
|
|
|
+ this.drawVector.getSource().addFeature(this.anyLine);
|
|
|
+ };
|
|
|
+ const handleTouchEnd = () => {
|
|
|
+ this.drawing = false;
|
|
|
+ document.removeEventListener('touchend', handleTouchEnd);
|
|
|
+ this.map.un('pointerdown', handleTouchStart);
|
|
|
+ this.map.un('pointermove', handleTouchMove);
|
|
|
+ document.removeEventListener('mouseup', handleTouchEnd);
|
|
|
+ if (!!this.drawEndMethod) {
|
|
|
+ this.drawEndMethod(drawOptions, this.anyLine);
|
|
|
+ }
|
|
|
+ this.anyLine = null;
|
|
|
+ };
|
|
|
+ document.addEventListener('touchend', handleTouchEnd);
|
|
|
+ this.map.on('pointerdown', handleTouchStart);
|
|
|
+ this.map.on('pointermove', handleTouchMove);
|
|
|
+ document.addEventListener('mouseup', handleTouchEnd);
|
|
|
}
|
|
|
+
|
|
|
// 关闭绘制
|
|
|
closeDraw() {
|
|
|
if (!this.drawTool) return;
|
