粤政图绘制更新

src/utils/olMap/olMap.ts

@@ -33,8 +33,10 @@ import Overlay from 'ol/Overlay';
 import { Draw, Select } from 'ol/interaction';
 import { click } from 'ol/events/condition';
 import Circle from 'ol/geom/Circle';
-import { hexToRgba } from '@/utils';
+import { deepClone, hexToRgba } from '@/utils';
 import { createBox } from 'ol/interaction/Draw';
+import * as turf from '@turf/turf';
+import { nanoid } from 'nanoid';
 
 const tk = 'a8df87f1695d224d2679aa805c1268d9';
 const commonUrl = import.meta.env.VITE_APP_BASE_API2 + 'api/oneShare/proxyHandler/gd/';
@@ -70,7 +72,9 @@ export class olMap {
     strokeWeight: 2,
     fillColor: '#f80102',
     fillOpacity: 0,
-    strokeStyle: 'solid'
+    strokeStyle: 'solid',
+    icon: '',
+    iconName: ''
   };
   private plot;
   private drawVector;
@@ -302,20 +306,98 @@ export class olMap {
   }
 
   // 绘制图形
-  drawGraphics(type: string) {
-    if (type === 'circle') {
-      // 绘制圆形
-      // activate('Circle');
-    } else if (type === 'rectangle') {
-      // 绘制矩形
-      this.plot.plotDraw.activate('RectAngle');
-    } else if (type === 'polygon') {
-      // 绘制多边形
-      this.plot.plotDraw.activate('Polygon');
-    } else if (type === 'freePolygon') {
-      // 绘制索套
-      this.plot.plotDraw.activate('FreePolygon');
+  drawGraphics(newOptions: MouseTool) {
+    const typeList = {
+      circle: 'Circle',
+      rectangle: 'Circle',
+      polygon: 'Polygon',
+      measureArea: 'Polygon',
+      straightLine: 'LineString',
+      marker: 'Point',
+      text: 'Point'
+    };
+    let geometryFunction = null;
+    if (newOptions.graphicsType === 'rectangle') {
+      // 绘制矩形的方法
+      geometryFunction = createBox();
     }
+    if (!!typeList[newOptions.graphicsType]) {
+      if (newOptions.graphicsType === 'text') {
+        this.drawOptions = {
+          type: newOptions.graphicsType,
+          title: newOptions.title,
+          text: newOptions.text,
+          fontSize: newOptions.fontSize,
+          fontColor: newOptions.fontColor,
+          lnglat: newOptions.lnglat
+        };
+        // 绘制文字
+        return this.addText(this.drawOptions);
+      } else {
+        this.drawOptions = {
+          type: newOptions.graphicsType,
+          strokeColor: newOptions.color,
+          strokeOpacity: 1,
+          strokeWeight: 1,
+          fillColor: newOptions.color,
+          fillOpacity: newOptions.drawType === '1' ? '0' : '0.5',
+          strokeStyle: 'solid'
+        };
+        if (newOptions.graphicsType === 'marker') {
+          this.drawOptions.icon = newOptions.icon;
+          this.drawOptions.iconName = newOptions.iconName;
+          this.drawOptions.size = newOptions.size;
+        }
+        this.closeDraw();
+        // 创建绘制交互
+        let style = new Style({
+          stroke: new Stroke({
+            color: hexToRgba(this.drawOptions.strokeColor, this.drawOptions.strokeOpacity),
+            width: this.drawOptions.strokeWeight
+          }),
+          fill: new Fill({
+            color: hexToRgba(this.drawOptions.fillColor, this.drawOptions.fillOpacity)
+          })
+        });
+        this.drawTool = new Draw({
+          source: this.drawVector.getSource(),
+          type: typeList[newOptions.graphicsType],
+          geometryFunction: geometryFunction,
+          style: style
+        });
+        // 添加绘制交互到地图
+        this.map.addInteraction(this.drawTool);
+        // 监听绘制结束事件
+        this.drawTool.on('drawend', (event) => {
+          const feature = event.feature;
+          // 获取几何对象
+          if (newOptions.graphicsType !== 'marker') {
+            if (newOptions.graphicsType === 'measureArea') {
+              const geometry = feature.getGeometry();
+              const coordinates = geometry.getCoordinates();
+              const pathArr = coordinates[0];
+              const area = turf.area(turf.polygon([pathArr]));
+              style = new Style({
+                stroke: style.getStroke(),
+                fill: style.getFill(),
+                text: new Text({
+                  text: '区域面积' + area.toFixed(2) + '平方米',
+                  font: '14px Calibri,sans-serif',
+                  fill: new Fill({ color: '#000' }),
+                  stroke: new Stroke({
+                    color: '#fff',
+                    width: 3
+                  }),
+                  overflow: true
+                })
+              });
+            }
+            feature.setStyle(style);
+          }
+        });
+      }
+    }
+    return this.drawOptions;
   }
   // 空间分析绘制图形
   drawGraphics2(newOptions: MouseTool) {
@@ -366,6 +448,32 @@ export class olMap {
       });
     }
   }
+  addText(options) {
+    // 创建文本覆盖物
+    const style = new Style({
+      text: new Text({
+        text: options.text,
+        font: options.fontSize + ' Calibri,sans-serif',
+        fill: new Fill({ color: options.fontColor }),
+        // stroke: new Stroke({
+        //   color: '#fff',
+        //   width: 3
+        // }),
+        overflow: true
+      })
+    });
+    const text = new Feature({
+      geometry: new Point(options.lnglat)
+    });
+    text.setStyle(style);
+    // 将文本覆盖物添加到地图
+    this.drawVector.getSource().addFeature(text);
+    const id = nanoid();
+    text.set('id', id);
+    const data: any = deepClone(options);
+    data.id = id;
+    return { text, data };
+  }
   // 关闭绘制
   closeDraw() {
     if (!this.drawTool) return;