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

package/src/components/UI/Controls/Measure/components/MeasureTool.vue

@@ -0,0 +1,155 @@
+<template>
+  <div :class="prefixCls">
+    <!-- 测量控制按钮 -->
+    <mapgis-ui-toolbar :class="`${prefixCls}-toolbar`">
+      <!-- 面积或长度设置按钮 -->
+      <mapgis-ui-toolbar-command-group>
+        <mapgis-ui-toolbar-command
+          v-for="{ title, mode, icon } in modes"
+          :key="title"
+          :title="title"
+          :icon="icon"
+          :active="activeMode === mode"
+          @click="startMeasure(mode)"
+        />
+      </mapgis-ui-toolbar-command-group>
+      <mapgis-ui-toolbar-space />
+      <!-- 清除或设置 -->
+      <mapgis-ui-toolbar-command-group>
+        <mapgis-ui-toolbar-command
+          title="清除"
+          icon="mapgis-shanchu_dianji"
+          @click="clearMeasure"
+        />
+        <mapgis-ui-toolbar-command
+          @click="showSettingPanel = !showSettingPanel"
+          :active="showSettingPanel"
+          title="设置"
+          icon="mapgis-setting"
+        />
+      </mapgis-ui-toolbar-command-group>
+    </mapgis-ui-toolbar>
+    <!-- 测量结果 -->
+    <measure-3d-result :mode="activeMode" :result="measureResult" />
+    <!-- 测量样式设置 -->
+    <measure-3d-setting
+      v-if="showSettingPanel"
+      @measure-style-change="measureStyleChange"
+    />
+  </div>
+</template>
+<script>
+import { last } from "../../../../Utils/util";
+import Measure3dResult, { measureModeMap } from "./MeasureResult.vue";
+import Measure3dSetting from "./MeasureSetting.vue";
+
+//  todo 暂不支持样式的实时更改
+export default {
+  name: "measure-3d-tool",
+  inject: ["webGlobe"],
+  components: {
+    "measure-3d-result": Measure3dResult,
+    "measure-3d-setting": Measure3dSetting
+  },
+  props: {
+    result: {
+      type: Object
+    }
+  },
+  data: vm => ({
+    prefixCls: "measure-3d-tool",
+    showSettingPanel: false,
+    measureResult: null,
+    activeMode: "",
+    // todo 替换ICON
+    modes: [
+      {
+        mode: measureModeMap.MeasureLengthTool,
+        title: "长度",
+        icon: "mapgis-huizhixian1"
+      },
+      {
+        mode: measureModeMap.MeasureAreaTool,
+        title: "面积",
+        icon: "mapgis-area"
+      },
+      {
+        mode: measureModeMap.TriangulationTool,
+        title: "三角",
+        icon: "mapgis-sanjiaoceliang"
+      }
+    ]
+  }),
+  methods: {
+    /**
+     * 保留2位小数
+     */
+    precision(n, p = 2) {
+      return n.toFixed(p);
+    },
+    /**
+     * 设置测量结果
+     * @param {*} result
+     */
+    setMeasureResult(result) {
+      let _measureResult;
+      switch (this.activeMode) {
+        case measureModeMap.MeasureLengthTool:
+          _measureResult = {
+            cesiumLength: this.precision(last(result) / 1000)
+          };
+          break;
+        case measureModeMap.MeasureAreaTool:
+          _measureResult = {
+            cesiumArea: this.precision(result / Math.pow(1000, 2))
+          };
+          break;
+        case measureModeMap.TriangulationTool:
+          _measureResult = {
+            horizontalDiatance: this.precision(result.horizontalDiatance),
+            verticalDiatance: this.precision(result.verticalDiatance)
+          };
+          break;
+        default:
+          break;
+      }
+      this.measureResult = _measureResult;
+    },
+    /**
+     * 开始测量
+     */
+    startMeasure(mode) {
+      this.activeMode = mode;
+      this.clearMeasure();
+      this.enableMeasure(mode);
+    },
+    /**
+     *  关闭测量工具
+     */
+    clearMeasure() {
+      this.activeMode = "";
+      this.measureResult = null;
+      this.$parent.remove();
+    },
+    /**
+     * 开始测量
+     */
+    enableMeasure(mode) {
+      this.$parent.$_enableMeasure(mode, this.setMeasureResult);
+    },
+    /**
+     * 测量样式变化
+     */
+    measureStyleChange(style) {
+      this.$parent.initStyles(style);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.measure-3d-tool {
+  &-toolbar {
+    justify-content: space-between;
+  }
+}
+</style>

package/src/components/UI/Geojson/Popup.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="mapgis-featuretool-content" ref="geojsontool">
+    <div class="mapgis-inspect-prop-tabs">
+      <mapgis-ui-tabs
+        v-if="mode === 'click'"
+        v-model="activeKey"
+        :style="{ height: '240px' }"
+        size="small"
+        :tab-position="tabPosition"
+      >
+        <mapgis-ui-tab-pane
+          class="mapgis-inspect-prop-content"
+          v-for="(f, i) in currentLayerInfo"
+          :key="i"
+        >
+          <div slot="tab" class="mapgis-inspect-layer-name">
+            <mapgis-ui-tooltip :title="f.layer.id">
+              <span>
+                {{ f.layer.id.substr(0, 12) }}
+              </span>
+            </mapgis-ui-tooltip>
+          </div>
+          <div class="mapgis-popup-content-title">
+            {{ f.title }}
+          </div>
+          <div
+            v-for="(value, key) in f.properties"
+            class="mapgis-inspect-prop-style"
+            :key="key"
+          >
+            <div class="mapgis-inspect-prop-key">
+              <span style="padding-right: 5px">{{ key }}</span>
+            </div>
+            <div>{{ value }} ({{ typeof value }})</div>
+          </div>
+          <br />
+        </mapgis-ui-tab-pane>
+      </mapgis-ui-tabs>
+      <div v-else>
+        <div v-if="currentLayerInfo && currentLayerInfo.length > 0">
+          <div>
+            {{ currentLayerInfo[0].title }}
+          </div>
+          <div
+            v-for="(value, key) in currentLayerInfo[0].properties"
+            class="mapgis-inspect-prop-style"
+            :key="key"
+          >
+            <div class="mapgis-inspect-prop-key">
+              <span style="padding-right: 5px">{{ key }}</span>
+            </div>
+            <div>{{ value }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "mapgis-3d-geojson-popup",
+  inject: ["Cesium", "CesiumZondy"],
+  props: {
+    outStyle: {
+      type: Object,
+      default: () => {
+        return { height: "120px", width: "240px" };
+      }
+    },
+    mode: {
+      type: String,
+      default: "click"
+    },
+    currentLayerInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    activeKey(next) {
+      this.$emit("select-layer", next);
+    },
+    currentLayerInfo() {
+      this.activeKey = 0;
+    }
+  },
+  data() {
+    return {
+      tabPosition: "top",
+      activeKey: 0
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.activeKey) {
+        this.$emit("select-layer", this.activeKey);
+      }
+    });
+  }
+};
+</script>

package/src/components/UI/Marker/Marker.vue

@@ -1,13 +1,21 @@
 <template>
-
+  <div style="display: none">
+    <!-- slot for custom marker -->
+    <slot name="marker" />
+    <!-- slot for popup -->
+    <slot v-if="marker" />
+  </div>
 </template>
 
 <script>
-
 export default {
-  name: "mapgis-3d-Marker",
+  name: "mapgis-3d-marker",
   inject: ["Cesium", "CesiumZondy", "webGlobe"],
   props: {
+    fid: {
+      type: String,
+      default: ""
+    },
     text: {
       type: String,
       default: ""
@@ -42,11 +50,11 @@ export default {
     },
     iconHeight: {
       type: Number,
-      default: 50
+      default: 32
     },
     iconWidth: {
       type: Number,
-      default: 50
+      default: 32
     },
     farDist: {
       type: Number,
@@ -73,13 +81,33 @@ export default {
       default() {
         return Number((Math.random() * 100000000).toFixed(0));
       }
+    },
+    changeEvent: {
+      type: Function
     }
   },
+  data() {
+    return {
+      marker: undefined,
+      isMoveIn: false,
+      isMoveOut: true
+    };
+  },
+  provide() {
+    const self = this;
+    return {
+      get marker() {
+        // 提供marker给子组件popup或者插槽槽
+        return self.marker;
+      }
+    };
+  },
   mounted() {
     let vm = this;
-    Object.keys(this.$props).forEach(function (key) {
-      if(key !== "vueKey" && key !== "vueIndex"){
-        vm.$watch(key,function () {
+    const defaults = ["vueKey", "vueIndex"];
+    Object.keys(this.$props).forEach(function(key) {
+      if (defaults.indexOf(key) < 0) {
+        vm.$watch(key, function() {
           vm.$_unmount();
           vm.$_mount();
         });
@@ -91,24 +119,29 @@ export default {
     this.$_unmount();
   },
   methods: {
-    $_mount(){
+    $_mount() {
       let vm = this;
-      window.CesiumZondy.getWebGlobeByInterval(function (webGlobe) {
+      window.CesiumZondy.getWebGlobeByInterval(function(webGlobe) {
         vm.$_init(webGlobe);
-      },this.vueKey)
+      }, this.vueKey);
     },
-    $_unmount(){
-      const {vueKey, vueIndex } = this;
+    $_unmount() {
+      const { vueKey, vueIndex } = this;
       const vm = this;
       let CesiumZondy = this.CesiumZondy || window.CesiumZondy;
-      window.CesiumZondy.getWebGlobeByInterval(function (webGlobe) {
-        let MarkerManager = CesiumZondy.MarkerManager.findSource(vueKey, vueIndex);
+      window.CesiumZondy.getWebGlobeByInterval(function(webGlobe) {
+        let MarkerManager = CesiumZondy.MarkerManager.findSource(
+          vueKey,
+          vueIndex
+        );
         let webGlobeMarker = vm.webGlobe || webGlobe;
         webGlobeMarker.viewer.entities.remove(MarkerManager.source);
         CesiumZondy.MarkerManager.deleteSource(vueKey, vueIndex);
-      },vueKey);
+      }, vueKey);
     },
     $_init(webGlobe) {
+      const { CesiumZondy } = this;
+      let vm = this;
       let Cesium = this.Cesium || window.Cesium;
       let webGlobeMarker = this.webGlobe || webGlobe;
       let labelLayer = new CesiumZondy.Manager.LabelLayer({
@@ -116,54 +149,158 @@ export default {
       });
       let heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
       switch (this.heightReference) {
-        case "clamped" :
+        case "clamped":
           heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
           break;
-        case "absolute" :
+        case "absolute":
           heightReference = Cesium.HeightReference.NONE;
           break;
-        case "above" :
+        case "above":
           heightReference = Cesium.HeightReference.RELATIVE_TO_GROUND;
           break;
       }
-      if(this.height > 0){
+      if (this.height > 0) {
         heightReference = Cesium.HeightReference.NONE;
       }
-      this.$_append(labelLayer,heightReference);
+      let label = {
+        //文本内容
+        text: this.text,
+        //经度、纬度、高度
+        longitude: this.longitude,
+        latitude: this.latitude,
+        height: this.height,
+        //文字大小、字体
+        font: this.fontSize + " " + this.fontFamily,
+        //文字颜色
+        fontColor: Cesium.Color.fromCssColorString(this.color),
+        // "data/picture/icon.png",
+        iconUrl: this.iconUrl,
+        iconWidth: this.iconWidth,
+        iconHeight: this.iconHeight,
+        //最远显示距离：相机到注记的距离大于该值 注记不显示
+        farDist: this.farDist,
+        //最近显示距离：相机到注记的距离小于该值 注记不显示
+        nearDist: this.nearDist,
+        //图片位置：'center','top','bottom'
+        iconPos: this.iconPos,
+        //相对位置
+        heightReference: heightReference
+      };
+      this.$_append(labelLayer, heightReference, label);
+      this.marker = this;
+      
+      if (!window.DynamicMarkerHandler) {
+        window.DynamicMarkerHandler = new Cesium.ScreenSpaceEventHandler(
+          webGlobeMarker.viewer.scene.canvas
+        );
+      }
+      window.DynamicMarkerHandler.removeInputAction(
+        vm.$_markerMouseAction,
+        Cesium.ScreenSpaceEventType.MOUSE_MOVE
+      );
+      window.DynamicMarkerHandler.setInputAction(
+        vm.$_markerMouseAction,
+        Cesium.ScreenSpaceEventType.MOUSE_MOVE
+      );
+    },
+    $_hasId(id) {
+      let marker = {};
+      marker.flag = false;
+      let markerManagers = CesiumZondy.MarkerManager[this.vueKey];
+      for (let i = 0; i < markerManagers.length; i++) {
+        if (markerManagers[i].source._id === id) {
+          marker.flag = true;
+          marker.label = markerManagers[i].source.markLabel;
+          break;
+        }
+      }
+      return marker;
     },
-    $_append(labelLayer,heightReference) {
+    $_markerMouseAction(movement) {
+      const { Cesium, CesiumZondy } = this;
+      const vm = this;
+      let webGlobeMarker = this.webGlobe;
+      let scene = webGlobeMarker.viewer.scene;
+      window.DynamicMarkerLastActiceId = window.DynamicMarkerLastActiceId || undefined;
+      if (scene.mode !== Cesium.SceneMode.MORPHING) {
+        let pickedObject = scene.pick(movement.endPosition);
+        if (
+          Cesium.defined(pickedObject) &&
+          pickedObject.hasOwnProperty("id") &&
+          pickedObject.id.label &&
+          vm.$_hasId(pickedObject.id.id).flag
+        ) {
+          if (!vm.isMoveIn) {
+            vm.isMoveIn = true;
+            vm.isMoveOut = false;
+            let label = vm.$_hasId(pickedObject.id.id).label
+            if (window.DynamicMarkerLastActiceId && window.DynamicMarkerLastActiceId != label) {
+              vm.$emit("mouseLeave", window.DynamicMarkerLastActiceId);
+            }
+            vm.$emit("mouseEnter", label);
+            window.DynamicMarkerLastActiceId = label;
+          }
+        }
+        if (!Cesium.defined(pickedObject)) {
+          if (!vm.isMoveOut) {
+            vm.isMoveIn = false;
+            vm.isMoveOut = true;
+            vm.$emit("mouseLeave", window.DynamicMarkerLastActiceId);
+          }
+        }
+      }
+    },
+    $_append(labelLayer, heightReference, label) {
       let icon = labelLayer.appendLabelIcon(
-          //文本内容
-          this.text,
-          //经度、纬度、高度
-          this.longitude, this.latitude, this.height,
-          //文字大小、字体
-          this.fontSize + " " + this.fontFamily,
-          //文字颜色
-          Cesium.Color.fromCssColorString(this.color),
-          // "data/picture/icon.png",
-          this.iconUrl,
-          this.iconWidth, this.iconHeight,
-          //最远显示距离：相机到注记的距离大于该值 注记不显示
-          this.farDist,
-          //最近显示距离：相机到注记的距离小于该值 注记不显示
-          this.nearDist,
-          //图片位置：'center','top','bottom'
-          this.iconPos,
-          "",
-          //相对位置
-          heightReference
+        //文本内容
+        this.text,
+        //经度、纬度、高度
+        this.longitude,
+        this.latitude,
+        this.height,
+        //文字大小、字体
+        this.fontSize + " " + this.fontFamily,
+        //文字颜色
+        Cesium.Color.fromCssColorString(this.color),
+        // "data/picture/icon.png",
+        this.iconUrl,
+        this.iconWidth,
+        this.iconHeight,
+        //最远显示距离：相机到注记的距离大于该值 注记不显示
+        this.farDist,
+        //最近显示距离：相机到注记的距离小于该值 注记不显示
+        this.nearDist,
+        //图片位置：'center','top','bottom'
+        this.iconPos,
+        "",
+        //相对位置
+        heightReference
       );
+      label.fid = this.fid;
+      label.changeEvent = this.changeEvent;
+      icon.markLabel = label;
       this.$_addIcon(icon);
     },
     $_addIcon(icon) {
-      const {vueKey, vueIndex} = this;
+      const { vueKey, vueIndex } = this;
       let CesiumZondy = this.CesiumZondy || window.CesiumZondy;
-      CesiumZondy.MarkerManager.addSource(vueKey,vueIndex,icon);
+      CesiumZondy.MarkerManager.addSource(vueKey, vueIndex, icon);
+    },
+    togglePopup() {
+      const { longitude, latitude, height } = this;
+      let children = this.$children;
+      if (!children || children.length <= 0) return;
+      let popup = children[0];
+      let vnode = popup.$vnode;
+      if (!vnode) return;
+      let { tag } = vnode;
+      if (!tag || tag.indexOf("mapgis-3d-popup") < 0) return;
+      if (!popup.$props.position) {
+        popup.$props.position = { longitude, latitude, height };
+        popup.togglePopup();
+      }
+      popup.togglePopup();
     }
   }
-}
+};
 </script>
-
-<style scoped>
-</style>

package/src/components/UI/Popup/Popup.vue

@@ -15,6 +15,14 @@ export default {
     prop: "visible",
     event: "change"
   },
+  data() {
+    return {
+      longitude: 0, // 仅用于父级marker动态改变popup的data使用
+      latitude: 0, // 仅用于父级marker动态改变popup的data使用
+      height: 0, // 仅用于父级marker动态改变popup的data使用,
+      show: true
+    };
+  },
   inject: ["Cesium", "CesiumZondy", "webGlobe"],
   watch: {
     position: {
@@ -28,6 +36,12 @@ export default {
       handler() {
         this.update();
       }
+    },
+    show: {
+      deep: true,
+      handler() {
+        this.update();
+      }
     }
   },
   updated() {
@@ -42,6 +56,10 @@ export default {
     this.unmount();
   },
   methods: {
+    togglePopup() {
+      let value = !this.show;
+      this.show = value;
+    },
     getWebGlobe() {
       let { webGlobe, vueKey, CesiumZondy } = this;
       CesiumZondy = CesiumZondy || window.CesiumZondy;
@@ -59,7 +77,8 @@ export default {
 
       if (this.$slots.default) {
         if (this.$slots.default[0].elm) {
-          container = this.$slots.default[0].elm.innerHTML;
+          container =
+            this.$slots.default[0].elm || this.$slots.default[0].elm.innerHTML;
         } else if (this.$slots.default[0].context.$children[0].$el) {
           container = this.$slots.default[0].context.$children[0].$el.innerHTML;
         }
@@ -136,7 +155,7 @@ export default {
         CesiumZondy.PopupManager.deleteSource(vueKey, vueIndex);
       }
 
-      if (this.visible) {
+      if (this.visible && this.show) {
         popup = this.createCesiumObject();
         this.$emit("load", { popup: popup });
         if (vueKey && (vueIndex || vueIndex === 0)) {
@@ -155,65 +174,3 @@ export default {
   }
 };
 </script>
-<style>
-.cesium-popup {
-  position: absolute;
-  text-align: center;
-}
-
-.cesium-popup-close-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 4px 4px 0 0;
-  text-align: center;
-  width: 18px;
-  height: 14px;
-  font: 16px/14px Tahoma, Verdana, sans-serif;
-  color: #ffffff;
-  text-decoration: none;
-  font-weight: bold;
-  background: transparent;
-}
-
-.cesium-popup-content-wrapper {
-  text-align: left;
-  padding: 10px;
-  overflow-y: auto;
-  font-size: 1.2em;
-  z-index: 9999;
-  border: 2px solid #46bcf1;
-  box-shadow: 0px 0px 20px #46bcf1;
-  -moz-box-shadow: 0px 0px 20px #46bcf1;
-  -webkit-box-shadow: 0px 0px 20px #46bcf1;
-  border-radius: 3px 3px 3px 3px;
-  background: #46bcf188;
-  background-size: 50% 50%;
-  background-repeat: no-repeat;
-}
-
-.cesium-popup-content {
-}
-
-.cesium-popup-tip-container {
-  margin: 0 auto;
-  width: 40px;
-  height: 20px;
-  position: relative;
-  overflow: hidden;
-}
-
-.cesium-popup-tip {
-  background: #46bcf1;
-  box-shadow: 0 3px 14px #46bcf1;
-  width: 17px;
-  height: 17px;
-  padding: 1px;
-  margin: -10px auto 0;
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-</style>