@kq_npm/client3d_webgl_vue 3.6.9-beta → 3.7.1-beta

package/scenceview/index.js

@@ -7964,6 +7964,7 @@ const __default__ = {
               dataList = JSON.parse(JSON.stringify(dataList));
               dataList.forEach(path => {
                 path.isPlaying = false;
+                path.isRepeat = false;
                 pathList.push(path);
               });
             });
@@ -8049,7 +8050,9 @@ const __default__ = {
       }
 
       viewModel.play();
-      item.isPlaying = true;
+      item.isPlaying = true; // 设置循环播放
+
+      viewModel.setAutoRepeat(item.isRepeat);
     } //路径播放暂停
 
 
@@ -8065,9 +8068,12 @@ const __default__ = {
     } //循环播放
 
 
-    function repeat() {
-      var isRepeat = viewModel.getAutoRepeat();
-      viewModel.setAutoRepeat(!isRepeat);
+    function repeat(item) {
+      item.isRepeat = !item.isRepeat;
+
+      if (item.isPlaying) {
+        viewModel.setAutoRepeat(item.isRepeat);
+      }
     } //显示更多功能菜单
 
 
@@ -8414,17 +8420,17 @@ const __default__ = {
             /* PROPS, DYNAMIC_SLOTS */
             , ["onClick", "title"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
               size: 16,
-              class: "menuIcon",
-              onClick: repeat,
+              class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(item.isRepeat ? 'kq-icon-light' : ''),
+              onClick: $event => repeat(item),
               title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).repeat
             }, {
               default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(client_icons_vue_.IconVideoRepeat))]),
-              _: 1
-              /* STABLE */
+              _: 2
+              /* DYNAMIC */
 
-            }, 8
-            /* PROPS */
-            , ["title"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
+            }, 1032
+            /* PROPS, DYNAMIC_SLOTS */
+            , ["class", "onClick", "title"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
               size: 16,
               class: "menuIcon",
               onClick: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => showDropDownMenu(item, index), ["prevent", "stop"]),
@@ -13964,7 +13970,7 @@ const __default__ = {
 
                 if (res.measureResult && res.measureResult.labels && res.measureResult.labels.length > 0) {
                   res.measureResult.labels._labels.forEach(label => {
-                    label.text = label.text.replace('X', language.value.longitude).replace('Y', language.value.latitude).replace('Z', language.value.height);
+                    label.text = label.text.replace('X', language.value.longitude).replace('Y', language.value.latitude).replace('Z', language.value.elevation);
                   });
                 }
               }
@@ -14337,7 +14343,7 @@ const __default__ = {
       /* TEXT */
       ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", _hoisted_28, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(result).latitude), 1
       /* TEXT */
-      ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", _hoisted_29, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).height), 1
+      ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", _hoisted_29, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).elevation), 1
       /* TEXT */
       ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("p", _hoisted_30, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(result).height) + " m", 1
       /* TEXT */
@@ -25948,13 +25954,12 @@ class DrawManager {
       text: {
         text: "文字标注",
         //文字内容
-        fontSize: 30,
+        fontSize: 25,
         //文字大小
-        color: "#ff0000",
-        //文字颜色
-        opacity: 0.5,
-        //文字颜色透明度
-        clampToGround: false //是否贴地
+        fontFamily: 'Microsoft YaHei',
+        color: "#ff0000" //文字颜色
+        // opacity: 0.5, //文字颜色透明度
+        // clampToGround: false //是否贴地
 
       },
       //点-图标样式
@@ -25965,8 +25970,9 @@ class DrawManager {
         //图标宽度
         height: 32,
         //图标高度
-        clampToGround: true //是否贴地
-
+        clampToGround: true,
+        //是否贴地
+        disableDepthTestDistance: Number.POSITIVE_INFINITY
       },
       //折线样式
       polyline: {
@@ -26107,22 +26113,65 @@ class DrawManager {
       transparent: true
     });
     return material;
+  }
+
+  getImageWithColor(imgUrl, color, width = 32, height = 32) {
+    if (color) {
+      var svgStr = window.atob(imgUrl.split(',')[1]);
+      var regex = /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g; // 修改svg颜色
+
+      svgStr = svgStr.replace(regex, color); // 修改svg大小
+
+      svgStr = svgStr.replace('width="16"', 'width="' + width + '"').replace('height="16"', 'height="' + height + '"');
+      imgUrl = "data:image/svg+xml;base64," + window.btoa(svgStr);
+    }
+
+    return imgUrl;
   } //开始绘制
 
 
   startDraw(type, options, callback, groupName) {
-    this._viewer.scene.globe.depthTestAgainstTerrain = true;
+    if (!options) options = {};
 
     if (type === "point") {
       type = "marker";
-      options.disableDepthTestDistance = Number.POSITIVE_INFINITY;
     }
 
-    if (!options) options = {};
-    var unionOptions = JSON.parse(JSON.stringify(this._drawStyle[type]));
+    if (type === "coloricon") {
+      type = "marker";
+      options.iconSize = [32, 32];
+      options.iconUrl = const_image_.LABEL_SVG_ICONS[0];
+      options.image = this.getImageWithColor(const_image_.LABEL_SVG_ICONS[0], options.color);
+    }
+
+    if (type === "text") {
+      this._viewer.scene.globe.depthTestAgainstTerrain = false;
+    } else {
+      this._viewer.scene.globe.depthTestAgainstTerrain = true;
+    }
+
+    var unionOptions = { ...this._drawStyle[type],
+      ...options
+    };
+
+    if (type === "polyline") {
+      //标记组件使用
+      options.opacity = 1;
+    }
+
+    if (type === "text") {
+      //标记组件使用
+      options.fontSize = this._drawStyle.text.fontSize;
+      options.fontFamily = this._drawStyle.text.fontFamily;
+      options.content = this._drawStyle.text.text;
+      options.is3D = true;
+    }
 
-    for (var key in options) {
-      unionOptions[key] = options[key];
+    if (type === "polyline" || type === "polygon") {
+      //标记组件使用
+      if (unionOptions.hasOwnProperty("weight")) {
+        unionOptions.width = unionOptions.weight;
+      }
     }
 
     if (unionOptions.hasOwnProperty("color")) {
@@ -26135,24 +26184,31 @@ class DrawManager {
 
     this._drawHandler.startDraw(type, type, unionOptions);
 
-    if (callback) {
-      var that = this;
-      var removeEventListener = this.drawFinishedEvent.addEventListener(shape => {
-        if (groupName) shape.groupName = groupName;
-        that._viewer.scene.globe.depthTestAgainstTerrain = false;
+    var that = this;
+    var removeEventListener = this.drawFinishedEvent.addEventListener(shape => {
+      if (groupName) shape.groupName = groupName;
+
+      if (shape.type === "text") {
+        setTimeout(() => {
+          shape._label.disableDepthTestDistance = Number.POSITIVE_INFINITY;
+        }, 200);
+      }
+
+      shape.options = options;
+
+      if (callback) {
         var feature = that.shapeToGeoFeature(shape);
         callback(feature.geometry, {
           layer: shape.guid
         });
-        removeEventListener();
-      });
-    }
+      }
+
+      removeEventListener();
+    });
   }
 
   stopDraw() {
     this._drawHandler.stopDraw();
-
-    this._viewer.scene.globe.depthTestAgainstTerrain = false;
   } //是否启用连续绘制
 
 
@@ -26217,7 +26273,9 @@ class DrawManager {
     var that = this;
 
     if (shape) {
-      if (shape.type === that._drawHandler.ShapeTypes.MARKER.type) {
+      if (shape.controlPoints && shape.controlPoints.length === 0) return shape;
+
+      if (shape.type === that._drawHandler.ShapeTypes.MARKER.type || shape.type === that._drawHandler.ShapeTypes.TEXT.type) {
         let position = that.transformPosition(shape._position);
         geoFeature = window.turf.point(position);
       } else if (shape.type === that._drawHandler.ShapeTypes.CIRCLE.type) {
@@ -26235,12 +26293,14 @@ class DrawManager {
         });
         geoFeature = window.turf.lineStrings(position).features[0];
       } else if (shape.type === that._drawHandler.ShapeTypes.RECTANGLE.type) {
-        let minX = shape.rectangle.west / Math.PI * 180;
-        let maxX = shape.rectangle.east / Math.PI * 180;
-        let minY = shape.rectangle.south / Math.PI * 180;
-        let maxY = shape.rectangle.north / Math.PI * 180;
-        let positions1 = [[[minX, minY], [minX, maxY], [maxX, maxY], [maxX, minY], [minX, minY]]];
-        geoFeature = window.turf.polygon(positions1);
+        if (shape.rectangle) {
+          let minX = shape.rectangle.west / Math.PI * 180;
+          let maxX = shape.rectangle.east / Math.PI * 180;
+          let minY = shape.rectangle.south / Math.PI * 180;
+          let maxY = shape.rectangle.north / Math.PI * 180;
+          let positions1 = [[[minX, minY], [minX, maxY], [maxX, maxY], [maxX, minY], [minX, minY]]];
+          geoFeature = window.turf.polygon(positions1);
+        }
       } else if (shape.type === that._drawHandler.ShapeTypes.POLYGON.type) {
         let positions = [[]];
         let posi;
@@ -26489,23 +26549,221 @@ class DrawManager {
     let primitive = this._drawLayer.getById(id);
 
     if (!primitive) return;
-    let type = primitive.geoType;
-
-    if (type === 'point') {// 绘制点暂时不需要修改样式
+    let type = primitive._geoType;
+
+    if (primitive.type === 'text') {
+      primitive.fontSize = style.fontSize;
+      primitive.fontFamily = style.fontFamily;
+      primitive.text = style.content;
+      primitive.fillColor = Cesium.Color.fromCssColorString(style.color);
+    } else if (type === 'point') {
+      primitive.image = this.getImageWithColor(style.iconUrl, style.color, style.iconSize[0], style.iconSize[1]);
+      primitive.width = style.iconSize[0];
+      primitive.height = style.iconSize[1];
     } else if (type === 'polyline' || type === 'polygon') {
       if (style.weight) primitive.width = style.weight;
       if (style.color) primitive.color = Cesium.Color.fromCssColorString(style.color);
       if (style.dashArray) primitive.dashArray = style.dashArray;
+      if (style.opacity) primitive.color = primitive.color.withAlpha(style.opacity);
     }
 
     if (type === 'polygon') {
-      primitive.fill = style.fill;
+      primitive.fill = style.fill === undefined ? true : style.fill;
 
-      if (style.fill) {
+      if (primitive.fill) {
         let opacity = style.fillOpacity || this._drawStyle.polygon.fillOpacity;
         if (style.fillColor) primitive.fillColor = Cesium.Color.fromCssColorString(style.fillColor).withAlpha(opacity);
       }
+    } // 存储绘图样式, 标记组件使用
+
+
+    primitive.options = style;
+  }
+
+  getShapeTypeById(id) {
+    let type = '';
+
+    let primitive = this._drawLayer.getById(id);
+
+    if (primitive) {
+      type = primitive.type;
+      if (type == 'marker') type = 'Marker';
+      if (type == 'polyline') type = 'Line';
+      if (type == 'polygon') type = 'Polygon';
+      if (type == 'rectangle') type = 'Rectangle';
+      if (type == 'circle') type = 'Circle';
+      if (type == 'text') type = 'Text';
     }
+
+    return type;
+  }
+
+  getShapeStyle(id) {
+    let primitive = this._drawLayer.getById(id);
+
+    if (primitive) {
+      return primitive.options;
+    }
+  }
+
+  getShapeInfo(id) {
+    let primitive = this._drawLayer.getById(id);
+
+    if (!primitive) return;
+    let type = this.getShapeTypeById(id);
+    let info = null;
+    let options = primitive.options;
+
+    if (type == "Marker") {
+      info = {
+        coordinate: primitive.position,
+        style: {
+          iconSize: options.iconSize,
+          iconUrl: options.iconUrl,
+          color: options.color
+        }
+      };
+    } else if (type == "Line") {
+      info = {
+        coordinate: primitive.controlPoints,
+        style: {
+          opacity: options.opacity,
+          color: options.color,
+          weight: options.weight,
+          dashArray: options.dashArray
+        }
+      };
+    } else if (type == "Polygon" || type == "Rectangle" || type == "Circle") {
+      info = {
+        coordinate: primitive.controlPoints,
+        style: {
+          fillColor: options.fillColor,
+          fillOpacity: options.fillOpacity,
+          color: options.color,
+          weight: options.weight
+        }
+      };
+    } else if (type == "Text") {
+      info = {
+        coordinate: primitive.position,
+        style: {
+          fontSize: options.fontSize,
+          fontFamily: options.fontFamily,
+          color: options.color,
+          content: options.content,
+          is3D: true
+        }
+      };
+    }
+
+    return info;
+  }
+
+  getJsonByLayerList(layerList) {
+    let items = [];
+
+    for (let i = 0; i < layerList.length; i++) {
+      const layer = layerList[i];
+      const name = layer.name || "";
+      const info = this.getShapeInfo(layer.layer);
+      items.push({
+        name: name,
+        info: info,
+        shape: layer.shape
+      });
+    }
+
+    return JSON.stringify(items);
+  }
+
+  createShapeByInfo(info, type) {
+    let shape = null;
+
+    if (type == "Marker") {
+      shape = this._drawHandler.createShape(this._drawHandler.ShapeTypes.MARKER.type, '', {
+        position: info.coordinate,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        width: info.style.iconSize[0],
+        height: info.style.iconSize[1],
+        image: this.getImageWithColor(info.style.iconUrl, info.style.color, info.style.iconSize[0], info.style.iconSize[1])
+      });
+    } else if (type == "Line") {
+      shape = this._drawHandler.createShape(this._drawHandler.ShapeTypes.POLYLINE.type, '', {
+        controlPoints: info.coordinate,
+        color: Cesium.Color.fromCssColorString(info.style.color).withAlpha(info.style.opacity),
+        width: info.style.weight,
+        dashArray: info.style.dashArray,
+        clampToGround: true
+      });
+    } else if (type == "Polygon") {
+      shape = this._drawHandler.createShape(this._drawHandler.ShapeTypes.POLYGON.type, '', {
+        controlPoints: info.coordinate,
+        color: Cesium.Color.fromCssColorString(info.style.color),
+        width: info.style.weight,
+        fillColor: Cesium.Color.fromCssColorString(info.style.fillColor).withAlpha(info.style.fillOpacity),
+        fill: true,
+        clampToGround: true
+      });
+    } else if (type == "Rectangle") {
+      shape = this._drawHandler.createShape(this._drawHandler.ShapeTypes.RECTANGLE.type, '', {
+        controlPoints: info.coordinate,
+        color: Cesium.Color.fromCssColorString(info.style.color),
+        width: info.style.weight,
+        fillColor: Cesium.Color.fromCssColorString(info.style.fillColor).withAlpha(info.style.fillOpacity),
+        fill: true,
+        clampToGround: true
+      });
+    } else if (type == "Circle") {
+      shape = this._drawHandler.createShape(this._drawHandler.ShapeTypes.CIRCLE.type, '', {
+        controlPoints: info.coordinate,
+        color: Cesium.Color.fromCssColorString(info.style.color),
+        width: info.style.weight,
+        fillColor: Cesium.Color.fromCssColorString(info.style.fillColor).withAlpha(info.style.fillOpacity),
+        fill: true,
+        clampToGround: true
+      });
+    } else if (type == "Text") {
+      shape = this._drawHandler.createShape(this._drawHandler.ShapeTypes.TEXT.type, '', {
+        latlng: info.coordinate,
+        text: info.style.content,
+        fontSize: info.style.fontSize,
+        fontFamily: info.style.fontFamily,
+        color: Cesium.Color.fromCssColorString(info.style.color)
+      });
+      setTimeout(() => {
+        shape._label.disableDepthTestDistance = Number.POSITIVE_INFINITY;
+      }, 200);
+    }
+
+    return shape;
+  }
+
+  createLayerListByJson(items) {
+    let layerList = [];
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const type = item.shape;
+      let shape = this.createShapeByInfo(item.info, type);
+
+      if (shape) {
+        shape.options = item.info.style;
+
+        this._drawLayer.add(shape);
+
+        layerList.push({
+          name: item.name,
+          shape: type,
+          layer: shape.id
+        });
+      }
+    }
+
+    return layerList;
+  }
+
+  removeGeometryById(id) {
+    this._drawLayer.removeById(id);
   }
   /********** 地理编码通用组件使用 start ************/
   // 绘制点图标自带点击弹出气泡, 地理编码通用组件使用