Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	src/types/components.d.ts

src/types/components.d.ts

@@ -27,6 +27,7 @@ declare module 'vue' {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -43,7 +44,10 @@ declare module 'vue' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -54,6 +58,7 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElStep: typeof import('element-plus/es')['ElStep']
     ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
@@ -64,6 +69,8 @@ declare module 'vue' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
@@ -78,6 +85,9 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
+    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/utils/index.ts

@@ -436,6 +436,30 @@ export const hexToRgba = (hex, alpha) => {
   return `rgba(${r}, ${g}, ${b}, ${alpha || 1})`;
 };
 
+export const rgbToRgba = (rgbString, alpha) => {
+  if (!rgbString) return '';
+  // 去掉字符串两端的空格
+  rgbString = rgbString.trim();
+
+  // 使用正则表达式匹配 rgb 格式的数字部分
+  const rgbMatch = rgbString.match(/\d+/g);
+
+  // 如果没有匹配到 rgb 格式，返回 null
+  if (!rgbMatch || rgbMatch.length !== 3) {
+    return null;
+  }
+
+  // 将匹配到的数字部分转换为整数
+  const r = parseInt(rgbMatch[0], 10);
+  const g = parseInt(rgbMatch[1], 10);
+  const b = parseInt(rgbMatch[2], 10);
+
+  // 拼接 rgba 字符串
+  const rgbaString = `rgba(${r}, ${g}, ${b}, ${alpha})`;
+
+  return rgbaString;
+};
+
 export const initDrag = (el, scaleX = 1, scaleY = 1) => {
   if (!el) return;
   el.style.position = 'fixed';

src/utils/olMap/olMap.ts

@@ -33,7 +33,7 @@ import Overlay from 'ol/Overlay';
 import { Draw, Select } from 'ol/interaction';
 import { click } from 'ol/events/condition';
 import Circle from 'ol/geom/Circle';
-import { deepClone, hexToRgba, initDrag } from '@/utils';
+import { deepClone, getRgba, hexToRgba, initDrag, rgbToRgba } from '@/utils';
 import { createBox } from 'ol/interaction/Draw';
 import * as turf from '@turf/turf';
 import { nanoid } from 'nanoid';
@@ -321,6 +321,7 @@ export class olMap {
       marker: 'Point',
       text: 'Point'
     };
+    const data = getRgba(newOptions.color);
     let geometryFunction = null;
     if (newOptions.graphicsType === 'rectangle') {
       // 绘制矩形的方法
@@ -341,11 +342,12 @@ export class olMap {
       } else {
         this.drawOptions = {
           type: newOptions.graphicsType,
-          strokeColor: newOptions.color,
+          title: newOptions.title,
+          strokeColor: !!data.color ? data.color : newOptions.color,
           strokeOpacity: 1,
           strokeWeight: 1,
-          fillColor: newOptions.color,
-          fillOpacity: newOptions.drawType === '1' ? '0' : '0.5',
+          fillColor: data.color,
+          fillOpacity: data.opacity,
           strokeStyle: 'solid'
         };
         if (newOptions.graphicsType === 'marker') {
@@ -357,11 +359,11 @@ export class olMap {
         // 创建绘制交互
         let style = new Style({
           stroke: new Stroke({
-            color: hexToRgba(this.drawOptions.strokeColor, this.drawOptions.strokeOpacity),
+            color: rgbToRgba(this.drawOptions.strokeColor, this.drawOptions.strokeOpacity),
             width: this.drawOptions.strokeWeight
           }),
           fill: new Fill({
-            color: hexToRgba(this.drawOptions.fillColor, this.drawOptions.fillOpacity)
+            color: rgbToRgba(this.drawOptions.fillColor, this.drawOptions.fillOpacity)
           })
         });
         this.drawTool = new Draw({
@@ -575,27 +577,34 @@ export class olMap {
       });
       // 设置自定义属性
       feature.set('pointer', true);
-      // 定义样式
-      const style = new Style({
-        image: new Icon({
-          anchor: [0.5, 0.5],
-          scale: 0.146,
-          anchorXUnits: 'fraction',
-          anchorYUnits: 'pixels',
-          src: point.icon
-        }),
-        text: new Text({
-          text: point.name,
-          fill: new Fill({
-            color: '#000'
+      const img = new Image();
+      img.onload = () => {
+        // 图片加载完成后，可以访问其 width 和 height 属性
+        const width = img.width;
+        const height = img.height;
+        const style = new Style({
+          image: new Icon({
+            anchor: [0.5, 0.5],
+            anchorXUnits: 'fraction',
+            anchorYUnits: 'pixels',
+            src: point.icon,
+            size: [width, height],
+            scale: !!point.size[0] ? point.size[0] / width : 1
           }),
-          stroke: new Stroke({
-            color: '#fff',
-            width: 3
+          text: new Text({
+            text: point.name,
+            fill: new Fill({
+              color: '#000'
+            }),
+            stroke: new Stroke({
+              color: '#fff',
+              width: 3
+            })
           })
-        })
-      });
-      feature.setStyle(style);
+        });
+        features.setStyle(style);
+      };
+      img.src = point.icon; // 设置图片的 URL，触发加载
       features.push(feature);
       this.markers.push(point);
     });
@@ -904,11 +913,11 @@ export class olMap {
     feature.setStyle(
       new Style({
         stroke: new Stroke({
-          color: hexToRgba(data.strokeColor, data.strokeOpacity),
+          color: rgbToRgba(data.strokeColor, data.strokeOpacity),
           width: data.strokeWeight
         }),
         fill: new Fill({
-          color: hexToRgba(data.fillColor, data.fillOpacity)
+          color: rgbToRgba(data.fillColor, data.fillOpacity)
         })
       })
     );
@@ -921,11 +930,28 @@ export class olMap {
     feature.setStyle(
       new Style({
         stroke: new Stroke({
-          color: hexToRgba(data.strokeColor, data.strokeOpacity),
+          color: rgbToRgba(data.strokeColor, data.strokeOpacity),
           width: data.strokeWeight
         }),
         fill: new Fill({
-          color: hexToRgba(data.fillColor, data.fillOpacity)
+          color: rgbToRgba(data.fillColor, data.fillOpacity)
+        })
+      })
+    );
+    this.drawVector.getSource().addFeature(feature);
+    return feature;
+  }
+  createLineString(data) {
+    const lineString = new LineString(data.path);
+    const feature = new Feature(lineString);
+    feature.setStyle(
+      new Style({
+        stroke: new Stroke({
+          color: rgbToRgba(data.strokeColor, data.strokeOpacity),
+          width: data.strokeWeight
+        }),
+        fill: new Fill({
+          color: rgbToRgba(data.fillColor, data.fillOpacity)
         })
       })
     );
@@ -1021,6 +1047,96 @@ export class olMap {
     const geo = this.carFeature.getGeometry().clone();
     this.carFeature.setGeometry(geo);
   }
+  drawData(data) {
+    const res = [];
+    data.forEach((item) => {
+      let graphic;
+      if (['rectangle', 'polygon', 'anyLine'].includes(item.type)) {
+        graphic = this.createPolygon(item);
+        graphic.set('id', item.id);
+        res.push(graphic);
+      } else if (item.type === 'circle') {
+        graphic = this.createCircle(item);
+        graphic.set('id', item.id);
+        res.push(graphic);
+      } else if (item.type === 'straightLine') {
+        graphic = this.createLineString(item);
+        graphic.set('id', item.id);
+        res.push(graphic);
+      } else if (item.type === 'text') {
+        const { text } = this.addText(item);
+        res.push(text);
+      } else if (item.type === 'measureArea') {
+        graphic = this.createPolygon(item);
+        graphic.set('id', item.id);
+        const style = new Style({
+          stroke: new Stroke({
+            color: rgbToRgba(item.strokeColor, item.strokeOpacity),
+            width: item.strokeWeight
+          }),
+          fill: new Fill({
+            color: rgbToRgba(item.fillColor, item.fillOpacity)
+          }),
+          text: new Text({
+            text: '区域面积' + item.area.toFixed(2) + '平方米',
+            font: '14px Calibri,sans-serif',
+            fill: new Fill({ color: '#000' }),
+            stroke: new Stroke({
+              color: '#fff',
+              width: 3
+            }),
+            overflow: true
+          })
+        });
+
+        graphic.setStyle(style);
+        res.push(graphic);
+      } else if (item.type === 'marker') {
+        // 创建标注点
+        const marker = new Feature({
+          // 必须是数字类型，字符串不识别
+          geometry: new Point([item.longitude, item.latitude]),
+          // name: item.name,
+          // icon: item.icon,
+          // imageHover: item.imageHover,
+          // size: item.size,
+          pointer: true
+        });
+        marker.set('id', item.id);
+        const img = new Image();
+        img.onload = () => {
+          // 图片加载完成后，可以访问其 width 和 height 属性
+          const width = img.width;
+          const height = img.height;
+          const style = new Style({
+            image: new Icon({
+              anchor: [0.5, 0.5],
+              anchorXUnits: 'fraction',
+              anchorYUnits: 'pixels',
+              src: item.icon,
+              size: [width, height],
+              scale: !!item.size[0] ? item.size[0] / width : 1
+            }),
+            text: new Text({
+              text: item.name,
+              fill: new Fill({
+                color: '#000'
+              }),
+              stroke: new Stroke({
+                color: '#fff',
+                width: 3
+              })
+            })
+          });
+          marker.setStyle(style);
+        };
+        img.src = item.icon; // 设置图片的 URL，触发加载
+        this.drawVector.getSource().addFeature(marker);
+        res.push(marker);
+      }
+    });
+    return res;
+  }
   getVectorLayer() {
     return this.vectorLayer;
   }

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -572,39 +572,33 @@ const initDrawMethod = (options) => {
             // })
           });
           feature.setStyle(style);
-          const position = geometry.getCoordinates();
-          data.lnglat = position;
-          data.latitude = position[0];
-          data.longitude = position[1];
-          data.icon = data.iconName;
-          data.image = data.iconName;
-          data.imageHover = data.iconName;
-          data.visible = true;
         };
+        const position = geometry.getCoordinates();
+        data.lnglat = position;
+        data.longitude = position[0];
+        data.latitude = position[1];
+        data.icon = data.iconName;
+        data.image = data.iconName;
+        data.imageHover = data.iconName;
+        data.visible = true;
         img.src = options.icon; // 设置图片的 URL，触发加载
       } else {
         if (options.type == 'circle') {
-          data.center = [geometry.getCenter().lng, geometry.getCenter().lat];
+          data.center = geometry.getCenter();
           data.radius = geometry.getRadius();
         } else {
           const coordinates = geometry.getCoordinates();
-          const pathArr = coordinates[0];
-          data.path = pathArr;
+          if (options.type !== 'straightLine') {
+            data.path = coordinates[0];
+          } else {
+            data.path = coordinates;
+          }
         }
       }
       if (options.type == 'measureArea') {
         // 计算区域面积
         const area = turf.area(turf.polygon([data.path]));
-
-
-        // const text = new AMap.Text({
-        //   position: data.path[data.path.length - 1],
-        //   text: '区域面积' + area + '平方米',
-        //   offset: new AMap.Pixel(-20, -20)
-        // });
         data.area = area;
-        // map.add(text);
-        // overlays.push([feature, text]);
         overlays.push(feature);
         overlaysData.push(data);
         commit(deepClone(overlaysData));