@mapgis/webclient-vue-cesium 10.5.5-1 → 10.5.5-6

package/src/components/Layer/Marker/Marker3dSetPro.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <mp-3d-marker-pro
+      v-for="marker in markers"
+      :vue-key="vueKey"
+      :key="marker.fid"
+      :marker="marker"
+      :current-marker-id="currentMarkerId"
+      :field-configs="fieldConfigs"
+      @marker-id="updateCurrentMarkerId"
+      @mouseenter="mouseEnterEvent"
+      @mouseleave="mouseLeaveEvent"
+      @change="changePopup"
+      @popupload="popupLoad"
+    >
+      <template slot="popup" slot-scope="slotProps">
+        <slot name="popup" v-bind="slotProps"></slot>
+      </template>
+    </mp-3d-marker-pro>
+  </div>
+</template>
+
+<script>
+import Mp3dMarkerPro from './Marker3dPro.vue'
+
+export default {
+  name: 'mapgis-3d-marker-set-pro',
+  components: { Mp3dMarkerPro },
+  props: {
+    vueKey: {
+      type: String,
+      default: 'default'
+    },
+    markers: {
+      type: Array,
+      required: true
+    },
+    fieldConfigs: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentMarkerId: ''
+    }
+  },
+  methods: {
+    updateCurrentMarkerId(id) {
+      this.currentMarkerId = id
+    },
+    mouseEnterEvent(e, id) {
+      this.$emit('mouseenter', e, id)
+    },
+    mouseLeaveEvent(e, id) {
+      this.$emit('mouseleave', e, id)
+    },
+    popupLoad(fid) {
+      this.$emit('popupload', fid)
+    },
+    changePopup(val) {
+      this.currentMarkerId = val
+    }
+  }
+}
+</script>

package/src/components/Layer/VectorTile/VectorTileLayer.vue

@@ -1,32 +1,78 @@
 <script>
 import VectorTileOptions from "./VectorTileOptions";
+import ServiceLayer from "../ServiceLayer";
+import clonedeep from 'lodash.clonedeep'
+
 export default {
   name: "mapgis-3d-vectortile-layer",
+  mixins: [ServiceLayer],
   props: { ...VectorTileOptions },
+  data() {
+    return {
+      managerName: "VectorTileManager"
+    };
+  },
   inject: ["Cesium", "webGlobe", "CesiumZondy"],
   created() {},
   mounted() {
-    this.mount();
+    this.$_mount();
     this.watchProp();
   },
   destroyed() {
-    this.unmount();
+    this.$_unmount();
+  },
+  watch: {
+    layerStyle: {
+      handler: function(next, old) {
+        let { vueKey, vueIndex } = this;
+        let layer = window.CesiumZondy[this.managerName].findSource(
+          vueKey,
+          vueIndex
+        );
+        if (this.layerStyleCopy.visible !== this.layerStyle.visible) {
+          layer.source.show = this.layerStyle.visible;
+        }
+        if (this.layerStyleCopy.opacity !== this.layerStyle.opacity) {
+          layer.source.alpha = this.layerStyle.opacity;
+        }
+        if (this.layerStyleCopy.zIndex !== this.layerStyle.zIndex) {
+          this.$_moveLayer();
+        }
+        this.layerStyleCopy = clonedeep(next);
+      },
+      deep: true
+    }
   },
   methods: {
-    createCesiumObject() {
+    /* layerLoaded(e) {
+      console.log("layerLoaded", e);
+    }, */
+    async createCesiumObject() {
       const { $props, webGlobe, CesiumZondy } = this;
       const { tilingScheme } = $props;
       const viewer = webGlobe.viewer;
       let tileScheme;
-      
-      if (typeof tilingScheme === 'string') {
+
+      if (typeof tilingScheme === "string") {
         tileScheme = this.checkTiling(tilingScheme);
       } else {
         tileScheme = tilingScheme;
       }
 
-      const opt = {...$props, tilingScheme: tileScheme}
-      return new CesiumZondy.Overlayer.VectorTileLayer(viewer, opt);
+      return new Promise(
+        resolve => {
+          let vectortile;
+          const opt = {
+            ...$props,
+            tilingScheme: tileScheme,
+            callback: () => {
+              resolve(vectortile);
+            }
+          };
+          vectortile = new CesiumZondy.Overlayer.VectorTileLayer(viewer, opt);
+        },
+        reject => {}
+      );
     },
     checkTiling(tileMatrixSetName) {
       let tilingScheme;
@@ -52,16 +98,13 @@ export default {
         vueIndex,
         show,
         mvtStyle,
-        vectortilejson,
+        vectortilejson
       } = this;
       const viewer = webGlobe.viewer;
-      let find = CesiumZondy.VectorTileManager.findSource(
-        vueKey,
-        vueIndex
-      );
+      let find = CesiumZondy.VectorTileManager.findSource(vueKey, vueIndex);
 
       if (show) {
-        this.$watch("show", function (next) {
+        this.$watch("show", function(next) {
           if (this.initial) return;
           if (find) {
             !viewer.isDestroyed() && find.source.setVisible(next);
@@ -75,7 +118,7 @@ export default {
               !viewer.isDestroyed() && this.$vectortile.updateStyle(nextStyle);
             }
           },
-          deep: true,
+          deep: true
         });
       }
       if (vectortilejson) {
@@ -85,46 +128,87 @@ export default {
               !viewer.isDestroyed() && this.$vectortile.updateStyle(nextStyle);
             }
           },
-          deep: true,
+          deep: true
         });
       }
     },
     updateStyle(style) {
       this.$vectortile.updateStyle(style);
     },
-    mount() {
+    provider() {
+      return this.$vectortile ? this.$vectortile.provider : undefined;
+    },
+    $_mount() {
       const { webGlobe, vueIndex, vueKey, CesiumZondy } = this;
+      const { layerStyle } = this;
+      const { visible, opacity, zIndex } = layerStyle;
+      //取得webGlobe对象，防止当页面有多个webGlobe只会取得
+      let webGlobeObj = this.$_getWebGlobe();
+      const { imageryLayers } = webGlobeObj.viewer;
       const viewer = webGlobe.viewer;
 
       if (viewer.isDestroyed()) return;
       this.$emit("load", this);
+      const vm = this;
+      let promise = this.createCesiumObject();
+      promise.then(vectortile => {
+        vm.$vectortile = vectortile;
+        let imageryLayer = vectortile.provider;
 
-      let vectortile = this.createCesiumObject();
-      this.$vectortile = vectortile;
+        if (vueKey && vueIndex) {
+          CesiumZondy.VectorTileManager.addSource(
+            vueKey,
+            vueIndex,
+            imageryLayer,
+            { vectortile }
+          );
+        }
 
-      if (vueKey && vueIndex) {
-        CesiumZondy.VectorTileManager.addSource(
-          vueKey,
-          vueIndex,
-          vectortile
-        );
-      }
+        //初始化imageryLayers.addImageryProvider需要的index
+        let providerZIndex;
+        if (zIndex < 0) {
+          throw new Error("zIndex不能为负数");
+        } else if (!zIndex) {
+          //如果没有设置layerStyle.zIndex，则layer的zIndex统一设置为0，并且按照初始化的顺序向上叠放
+          providerZIndex = 0;
+        } else {
+          //确定zIndex不能重复
+          vm.$_checkZIndex(imageryLayers);
+          //如果有layerStyle.zIndex，则layer的zIndex为layerStyle.zIndex
+          providerZIndex = zIndex;
+        }
+
+        //如果有zIndex，则保证zIndex大于0的layer始终在zIndex为0的layer上面，并按照zIndex从大到小排序
+        //如果没有zIndex，则按初始化顺序向上叠放，如果在此layer的下方含有zIndex大于0的layer，则layer向下一层，直到下方没有包含zIndex大于0的layer
+        //只会根据imageryLayers排序，不会影响其他图层
+        vm.$_initLayerIndex();
+
+        //设置图层是否可见
+        if (typeof visible === "boolean") {
+          imageryLayer.show = visible;
+        }
+
+        //设置涂层的透明度
+        if (typeof opacity === "number") {
+          imageryLayer.alpha = opacity;
+        }
+
+        //得到layerStyle的副本，供watch使用
+        vm.layerStyleCopy = clonedeep(layerStyle);
+      });
     },
-    unmount() {
+    $_unmount() {
       const { webGlobe, vueKey, vueIndex, CesiumZondy } = this;
       const viewer = webGlobe.viewer;
-      let find = CesiumZondy.VectorTileManager.findSource(
-        vueKey,
-        vueIndex
-      );
+      let find = CesiumZondy.VectorTileManager.findSource(vueKey, vueIndex);
       if (find) {
-        !viewer.isDestroyed() && find.source.destroy();
+        !viewer.isDestroyed() && find.options.vectortile.destroy();
       }
       CesiumZondy.VectorTileManager.deleteSource(vueKey, vueIndex);
-    },
+    }
   },
   render(createElement) {
     return createElement("span");
-  },
+  }
 };
 </script>

package/src/components/Layer/VectorTile/VectorTileOptions.js

@@ -67,5 +67,5 @@ export default {
   /**
    * @description 是否可见
    */
-  show: { type: Boolean, default: true }
+  show: { type: Boolean, default: true },
 };

package/src/components/M3D/3DTilesetOptions.js

@@ -14,6 +14,28 @@ export default {
     type: [String, Number],
     default: () => (Math.random() * 100000000).toFixed(0)
   },
+
+  enableTips: {},
+  enablePopup: {},
+  tipsOptions: {
+    type: Object,
+    default: () => {
+      return { title: "name" };
+    }
+  },
+  popupOptions: {
+    type: Object,
+    default: () => {
+      return { title: "name" };
+    }
+  },
+
+  highlightStyle: {},
+
+  layers: {
+    type: [String],
+    default: undefined
+  },
   /**
    * @type Cesium.Resource.headers
    * @example headers: { "szvsud-license-key": '3AE2IROq5nGn5K/+zQlUxSoHoNdjCoS1l5567rK5SKjHfRbQIvhtbInd7S9X6bFl' },
@@ -21,7 +43,7 @@ export default {
   headers: {},
   url: { type: String, required: true },
   show: { type: Boolean, default: true },
-  opacity : { type: Number },
+  opacity: { type: Number },
   autoReset: { type: Boolean, default: true },
 
   /**

package/src/components/M3D/G3D.vue

@@ -0,0 +1,150 @@
+<script>
+import Tileset3dOptions from "./3DTilesetOptions";
+
+export default {
+  name: "mapgis-3d-igs-m3d",
+  inject: ["Cesium", "CesiumZondy", "webGlobe"],
+  props: {
+    ...Tileset3dOptions
+  },
+  created() {},
+  mounted() {
+    this.mount();
+    this.watchProp();
+  },
+  destroyed() {
+    this.unmount();
+  },
+  methods: {
+    createCesiumObject() {
+      const { CesiumZondy, webGlobe } = this;
+      let m3dLayer = new CesiumZondy.Layer.M3DLayer({
+        viewer: webGlobe.viewer
+      });
+      return m3dLayer;
+    },
+    watchProp() {
+      let { show, opacity } = this;
+      if (show) {
+        this.$watch("show", function(next) {
+          if (this.initial) return;
+          this.changeShow(next);
+        });
+      }
+      if (opacity >= 0 && opacity <= 1) {
+        this.$watch("opacity", function(next) {
+          if (this.initial) return;
+          this.changeOpacity(next);
+        });
+      }
+    },
+    onM3dLoaded(e) {},
+    mount() {
+      const vm = this;
+      const {
+        webGlobe,
+        vueIndex,
+        vueKey,
+        $props,
+        offset,
+        scale,
+        opacity
+      } = this;
+      const viewer = webGlobe.viewer;
+
+      if (viewer.isDestroyed()) return;
+      // this.$emit("load", { component: this });
+
+      let m3dLayer = this.createCesiumObject();
+      let m3ds = m3dLayer.append(`${this.url}`, {
+        ...$props,
+        loaded: tileset => {
+          if (vueKey && vueIndex) {
+            CesiumZondy.M3DIgsManager.addSource(vueKey, vueIndex, m3ds);
+            !vm.show && m3ds && m3ds.forEach(m3d => (m3d.show = vm.show));
+          }
+          if (offset) {
+            let boundingSphere = tileset.boundingSphere;
+            let cartographic = Cesium.Cartographic.fromCartesian(
+              boundingSphere.center
+            );
+            let surface = Cesium.Cartesian3.fromRadians(
+              cartographic.longitude,
+              cartographic.latitude,
+              0.0
+            );
+            let { longitude = 0, latitude = 0, height = 0 } = offset;
+            let offsetParam = Cesium.Cartesian3.fromRadians(
+              cartographic.longitude + longitude,
+              cartographic.latitude + latitude,
+              height
+            );
+
+            let translation = Cesium.Cartesian3.subtract(
+              offsetParam,
+              surface,
+              new Cesium.Cartesian3()
+            );
+            tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+          }
+          if (scale) {
+            tileset.setScale(new Cesium.Cartesian3(scale.x, scale.y, scale.z));
+          }
+          if (opacity >= 0) {
+            m3ds.forEach(
+              m3d =>
+                (m3d.style = new Cesium.Cesium3DTileStyle({
+                  color: `color('#FFFFFF', ${opacity})`
+                }))
+            );
+          }
+          vm.$emit("loaded", { tileset: tileset, m3ds: m3ds });
+        }
+      });
+    },
+    unmount() {
+      const { webGlobe, CesiumZondy, vueKey, vueIndex } = this;
+      const viewer = webGlobe.viewer;
+      let find = CesiumZondy.M3DIgsManager.findSource(vueKey, vueIndex);
+      if (find) {
+        let m3ds = find.source;
+        !viewer.isDestroyed() &&
+          m3ds &&
+          m3ds.forEach(l => {
+            l.destroy();
+          });
+      }
+      this.$emit("unload", { component: this });
+      CesiumZondy.M3DIgsManager.deleteSource(vueKey, vueIndex);
+    },
+    changeShow(show) {
+      const { vueKey, vueIndex } = this;
+      let find = CesiumZondy.M3DIgsManager.findSource(vueKey, vueIndex);
+      if (find) {
+        let m3ds = find.source;
+        m3ds && m3ds.forEach(m3d => (m3d.show = show));
+      }
+    },
+    changeOpacity(opacity) {
+      const { vueKey, vueIndex } = this;
+      let find = CesiumZondy.M3DIgsManager.findSource(vueKey, vueIndex);
+      console.log('find', find.source);
+      if (find) {
+        let m3ds = find.source;
+        m3ds &&
+          m3ds.forEach(m3d => {
+            m3d.style = new Cesium.Cesium3DTileStyle({
+              color: `color('#FFFFFF', ${opacity})`
+            });
+          });
+      }
+    }
+  },
+  render(h) {
+    return h("span", {
+      class: "mapgis-3d-igs-m3d",
+      ref: "m3d"
+    });
+  }
+};
+</script>