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

package/src/components/UI/Controls/Legend/Legend.vue

@@ -1,25 +1,25 @@
 <template>
-    <div class="mapgis-legend">
-        <a-select
-            default-value="全部"
-            style="width: 100%"
-            @change="handleChange"
-        >
-            <a-select-option value="全部"> 全部 </a-select-option>
-            <a-select-option
-                :value="index"
-                v-for="(layer, index) in layers"
-                :key="index"
-                >{{ layer.layerName }}
-            </a-select-option>
-        </a-select>
-        <div class="legend-area">
-            <li v-for="(legend, index) in legends" :key="index">
-                <img :src="'data:image/png;base64,' + legend.imageData" />
-                <span>{{ legend.label }}</span>
-            </li>
-        </div>
+  <div class="mapgis-legend">
+    <mapgis-ui-select
+      default-value="全部"
+      style="width: 100%"
+      @change="handleChange"
+    >
+      <mapgis-ui-select-option value="全部"> 全部 </mapgis-ui-select-option>
+      <mapgis-ui-select-option
+        :value="index"
+        v-for="(layer, index) in layers"
+        :key="index"
+        >{{ layer.layerName }}
+      </mapgis-ui-select-option>
+    </mapgis-ui-select>
+    <div class="legend-area">
+      <li v-for="(legend, index) in legends" :key="index">
+        <img :src="'data:image/png;base64,' + legend.imageData" />
+        <span>{{ legend.label }}</span>
+      </li>
     </div>
+  </div>
 </template>
 
 <script>
@@ -38,25 +38,29 @@ export default {
   },
   methods: {
     getLegendInfo(url) {
-      const regExp = new RegExp("(?<=MapServer).*", 'i')
+      const regExp = new RegExp("(?<=MapServer).*", "i");
       let legendUrl = url.replace(regExp, "/legend?f=pjson");
       fetch(legendUrl)
-          .then((res) => {
-            return res.json();
-          })
-          .then((res) => {
+        .then((res) => {
+          return res.json();
+        })
+        .then((res) => {
+          if (res && res.error) {
+            this.$message.info(res.error.message);
+          } else {
             this.layers = this.layers.concat(res.layers);
             res.layers.forEach((layer) => {
               this.allLegends = this.allLegends.concat(layer.legend);
             });
             this.legends = this.allLegends;
-          })
-          .catch((err) => {
-            console.log(err);
-          });
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     },
     getLegendUrl() {
-      const {CesiumZondy} = this;
+      const { CesiumZondy } = this;
       let layers = [];
       Object.keys(CesiumZondy.ArcgisManager).forEach((key) => {
         if (key !== "vueKey") {
@@ -65,7 +69,7 @@ export default {
       });
       layers.forEach((layer) => {
         let url = layer.source._imageryProvider.url;
-        const regExp = new RegExp("\\/arcgis\\/rest\\/services", 'i');
+        const regExp = new RegExp("\\/arcgis\\/rest\\/services", "i");
 
         // if (/\/arcgis\/rest\/services/i.test(url)) {
         //       this.getLegendInfo(url);
@@ -88,37 +92,37 @@ export default {
 
 <style scoped>
 .mapgis-legend {
-    z-index: 100;
-    position: absolute;
-    right: 20px;
-    bottom: 20px;
-    width: fit-content;
-    height: fit-content;
-    padding: 12px;
-    border: 1px solid #333;
-    border-radius: 3px;
-    background: #fff;
-    overflow: auto;
+  z-index: 100;
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  width: fit-content;
+  height: fit-content;
+  padding: 12px;
+  border: 1px solid #333;
+  border-radius: 3px;
+  background: #fff;
+  overflow: auto;
 }
 
 .mapgis-legend .legend-area {
-    width: 180px;
-    height: 220px;
-    margin-top: 10px;
-    overflow: auto;
+  width: 180px;
+  height: 220px;
+  margin-top: 10px;
+  overflow: auto;
 }
 
 .mapgis-legend .legend-area li {
-    display: flex;
+  display: flex;
 }
 
 .mapgis-legend .legend-area li img {
-    height: 20px;
-    width: 20px;
+  height: 20px;
+  width: 20px;
 }
 
 .mapgis-legend .legend-area li span {
-    text-align: left;
-    word-break: break-all;
+  text-align: left;
+  word-break: break-all;
 }
 </style>

package/src/components/UI/Controls/Link/Link.vue

@@ -34,6 +34,10 @@ export default {
         return Number((Math.random() * 100000000).toFixed(0));
       }
     },
+    timestamp: {
+      type: Number,
+      default: 0 // 毫秒
+    },
     interval: {
       type: Number,
       default: 60
@@ -46,6 +50,7 @@ export default {
   data() {
     return {
       time: 0,
+      stamp: -1,
       active: false
     };
   },
@@ -99,31 +104,43 @@ export default {
       }
     },
     updateView(camera) {
-      let { interval } = this;
-      // 一秒60帧，每秒更新一次，减少无效更新
-      if (++this.time % interval === 0) {
-        let view3d = {
-          destination: deepCopy(camera.position),
-          orientation: {
-            direction: deepCopy(camera._direction),
-            up: deepCopy(camera.up),
-            heading: deepCopy(camera.heading),
-            pitch: deepCopy(camera.pitch),
-            roll: deepCopy(camera.roll)
-          }
-        };
-        let rect = camera.computeViewRectangle();
-        let rect2d = { west: 0, east: 0, north: 0, south: 0 };
-        rect2d.west = Cesium.Math.toDegrees(rect.west);
-        rect2d.east = Cesium.Math.toDegrees(rect.east);
-        rect2d.north = Cesium.Math.toDegrees(rect.north);
-        rect2d.south = Cesium.Math.toDegrees(rect.south);
-        this.$emit("change", {
-          "3d": view3d,
-          "2d": rect2d
-        });
+      let { interval, timestamp } = this;
+      // 针对按帧刷新或者按照时间戳刷新走不同的分支
+      if (timestamp > 0) {
+        let curstamp = new Date().getTime();
+        if (curstamp - this.stamp > timestamp) {
+          this.updateRect(camera);
+          this.stamp = curstamp;
+        }
+      } else {
+        // 一秒60帧，每秒更新一次，减少无效更新
+        if (++this.time % interval === 0) {
+          this.updateRect(camera);
+        }
+        if (this.time > 1000000) this.time = 0;
       }
-      if (this.time > 1000000) this.time = 0;
+    },
+    updateRect(camera) {
+      let view3d = {
+        destination: deepCopy(camera.position),
+        orientation: {
+          direction: deepCopy(camera._direction),
+          up: deepCopy(camera.up),
+          heading: deepCopy(camera.heading),
+          pitch: deepCopy(camera.pitch),
+          roll: deepCopy(camera.roll)
+        }
+      };
+      let rect = camera.computeViewRectangle();
+      let rect2d = { west: 0, east: 0, north: 0, south: 0 };
+      rect2d.west = Cesium.Math.toDegrees(rect.west);
+      rect2d.east = Cesium.Math.toDegrees(rect.east);
+      rect2d.north = Cesium.Math.toDegrees(rect.north);
+      rect2d.south = Cesium.Math.toDegrees(rect.south);
+      this.$emit("change", {
+        "3d": view3d,
+        "2d": rect2d
+      });
     },
     setView(viewer, camera) {
       let view3d = {
@@ -144,6 +161,8 @@ export default {
       let sources = CesiumZondy.GlobesManager.flatAllSource();
       let vm = this;
 
+      this.stamp = new Date().getTime();
+
       for (let i = 0; i < sources.length; i++) {
         let s = sources[i];
         if (includes && includes.length > 0 && includes.indexOf(s.parent) < 0) {
@@ -162,6 +181,10 @@ export default {
           s.source.viewer.scene.canvas
         );
 
+        s.source.viewer.camera.changed.addEventListener(() => {
+          vm.updateView(s.source.viewer.camera);
+        });
+
         screenSpaceEventType.forEach(item => {
           s.options.ScreenSpaceEventHandler.setInputAction(function(movement) {
             if (item.type == "LEFT_DOWN" || item.type == "RIGHT_DOWN") {
@@ -184,7 +207,7 @@ export default {
       }
     },
     deleteHandler() {
-      let { CesiumZondy } = this;
+      let { CesiumZondy, screenSpaceEventType } = this;
       CesiumZondy = CesiumZondy || window.CesiumZondy;
       /* 这段代码要结合WebGlobe里面的如下代码才能明白
       window.CesiumZondy.GlobesManager.addSource(vueKey, vueIndex, webGlobe, {
@@ -194,8 +217,9 @@ export default {
       if (instance) {
         const handler = instance.ScreenSpaceEventHandler;
         if (handler) {
-          handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-          handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL);
+          screenSpaceEventType.forEach(item => {
+            handler.removeInputAction(Cesium.ScreenSpaceEventType[item.type]);
+          });
           handler.destroy();
         }
       }
@@ -203,16 +227,14 @@ export default {
       let sources = CesiumZondy.GlobesManager.flatAllSource();
       sources.forEach((s, i) => {
         if (s.options.ScreenSpaceEventHandler) {
-          s.options.ScreenSpaceEventHandler.removeInputAction(
-            Cesium.ScreenSpaceEventType.MOUSE_MOVE
-          );
-          s.options.ScreenSpaceEventHandler.removeInputAction(
-            Cesium.ScreenSpaceEventType.WHEEL
-          );
-          s.options.ScreenSpaceEventHandler.setInputAction(function(
-            movement
-          ) {},
-          Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+          screenSpaceEventType.forEach(item => {
+            s.options.ScreenSpaceEventHandler.removeInputAction(
+              Cesium.ScreenSpaceEventType[item.type]
+            );
+          });
+          s.source.viewer.camera.changed.removeEventListener(() => {
+            vm.updateView(s.source.viewer.camera);
+          });
           // s.options.ScreenSpaceEventHandler.destroy();
         }
       });

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

@@ -1,6 +1,9 @@
 <template>
-  <div>
+  <div class="mapgis-3d-measure">
     <slot v-if="initial"></slot>
+    <slot name="measureTool">
+      <measure-3d-tool/>
+    </slot>
   </div>
 </template>
 
@@ -8,21 +11,31 @@
 
 <script>
 import ServiceLayer from "../ServiceLayer";
+import Measure3dTool from "./components/MeasureTool.vue";
 
 export default {
   name: "mapgis-3d-measure",
   mixins: [ServiceLayer],
+  components: {
+    "measure-3d-tool": Measure3dTool
+  },
   props: {
-    styles:{
+    styles: {
       type: Object,
-      default(){
+      default() {
         return {
           lineColor: "black"
-        }
+        };
+      }
+    },
+    measureOptions: {
+      type: Object,
+      default() {
+        return {};
       }
     }
   },
-  data () {
+  data() {
     return {
       measure: undefined,
       initial: false,
@@ -30,71 +43,100 @@ export default {
       waitManagerName: "GlobesManager"
     };
   },
-  watch:{
+  watch: {
     styles: {
-      handler: function() {
+      handler: function () {
         this.initStyles();
       },
       deep: true
+    },
+    measureOptions: {
+      handler: function () {
+        this.measureOptions = this.$_formatOptions(this.measureOptions);
+      },
+      deep: true
     }
   },
-  mounted () {
+  mounted() {
     let vm = this;
+    this.measureOptions = this.$_formatOptions(this.measureOptions);
     this.$_init(function () {
       vm.initStyles();
       vm.initial = true;
-      vm.$emit("load",vm);
-    })
+      vm.$emit("load", vm);
+    });
   },
   destroyed() {
     this.deleteMeasure();
-    vm.$emit("unload");
+    this.$emit("unload");
   },
   methods: {
-    initStyles(){
-      this.measureStyles.lineColor = Cesium.Color.fromCssColorString(this.styles.lineColor,this.measureStyles.lineColor);
+    initStyles() {
+      this.measureStyles.lineColor = Cesium.Color.fromCssColorString(
+        this.styles.lineColor,
+        this.measureStyles.lineColor
+      );
     },
-    measureCallBack(result){
-      if(result instanceof Array){
+    measureCallBack(result) {
+      if (result instanceof Array) {
         for (let i = 0; i < result.length; i++) {
           result[i] = result[i] / 1000;
         }
       }
-      this.$emit("measured",result);
+      this.$emit("measured", result);
     },
-    enableMeasureLength(){
+    enableMeasureLength() {
       this.$_enableMeasure("MeasureLengthTool");
-
     },
-    enableMeasureArea(){
+    enableMeasureArea() {
       this.$_enableMeasure("MeasureAreaTool");
     },
-    enableMeasureTriangle(){
+    enableMeasureTriangle() {
       this.$_enableMeasure("TriangulationTool");
     },
-    enableMeasureSlope(){
+    enableMeasureSlope() {
       this.$_enableMeasure("MeasureSlopeTool");
     },
-    $_enableMeasure(MeasureName){
-      const { vueKey,vueIndex } = this;
-      let webGlobe = this.$_getObject(this.waitManagerName,this.deleteMeasure);
-      let measure = new Cesium[MeasureName](webGlobe.viewer,{
+    $_formatOptions(options) {
+      const colorArr = ["fillColor", "outlineColor", "backgroundColor", "lineColor", "areaColor"];
+      for (let i=0;i<colorArr.length;i++){
+        if(options.hasOwnProperty(colorArr[i]) && typeof options[colorArr[i]] === "string"){
+          options[colorArr[i]] = Cesium.Color.fromCssColorString(options[colorArr[i]]);
+        }
+      }
+      return options;
+    },
+    $_enableMeasure(MeasureName) {
+      const {vueKey, vueIndex} = this;
+      let webGlobe = this.$_getObject(this.waitManagerName, this.deleteMeasure);
+      let measureOptions = {
         lineColor: this.measureStyles.lineColor,
-        callBack: this.measureCallBack
-      });
+        callBack: result => {
+          if (typeof callback === "function") {
+            callback(result);
+          } else {
+            this.measureCallBack(result);
+          }
+        }
+      }
+      measureOptions = Object.assign(measureOptions, this.measureOptions);
+      let measure = new Cesium[MeasureName](webGlobe.viewer, measureOptions);
       window.CesiumZondy.MeasureToolManager.addSource(
-          vueKey,
-          vueIndex,
-          measure
+        vueKey,
+        vueIndex,
+        measure
       );
       measure.startTool();
     },
-    deleteMeasure(){
-      this.$_deleteManger("MeasureToolManager",function (manager) {
-        if(manager.source){
+    deleteMeasure() {
+      this.$_deleteManger("MeasureToolManager", function (manager) {
+        if (manager.source) {
           manager.source.stopTool();
         }
       });
+    },
+    remove() {
+      this.deleteMeasure();
     }
   }
 };

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

@@ -0,0 +1,71 @@
+<template>
+  <div v-if="selfResult" class="measure-result">
+    <div v-for="{ label, value, unit } in selfResultOptions" :key="value">
+      {{ label }}：{{ selfResult[value] }} {{ unit }}
+    </div>
+  </div>
+</template>
+<script>
+export const measureModeMap = {
+  MeasureLengthTool: "MeasureLengthTool",
+  MeasureAreaTool: "MeasureAreaTool",
+  TriangulationTool: "TriangulationTool"
+};
+
+export default {
+  name: "measure-3d-result",
+  props: {
+    mode: {
+      type: String
+    },
+    result: {
+      type: Object
+    }
+  },
+  data: vm => ({
+    selfResult: null,
+    selfResultMap: {
+      [measureModeMap.MeasureLengthTool]: [
+        {
+          label: "直线距离",
+          value: "cesiumLength",
+          unit: "千米"
+        }
+      ],
+      [measureModeMap.MeasureAreaTool]: [
+        {
+          label: "空间面积",
+          value: "cesiumArea",
+          unit: "平方公里"
+        }
+      ],
+      [measureModeMap.TriangulationTool]: [
+        {
+          label: "高差",
+          value: "verticalDiatance",
+          unit: "米"
+        },
+        {
+          label: "水平距离",
+          value: "horizontalDiatance",
+          unit: "米"
+        }
+      ]
+    }
+  }),
+  computed: {
+    selfResultOptions({ selfResultMap, mode }) {
+      return selfResultMap[mode];
+    }
+  },
+  watch: {
+    result: {
+      deep: true,
+      handler(nResult) {
+        this.selfResult = nResult;
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="measure-3d-setting">
+    <mapgis-ui-group-tab title="设置">
+      <mapgis-ui-toolbar-command
+        slot="handle"
+        title="重置"
+        icon="mapgis-redo"
+        @click="onReset"
+      />
+    </mapgis-ui-group-tab>
+    <mapgis-ui-setting-form layout="vertical">
+      <mapgis-ui-form-item label="线颜色">
+        <mapgis-ui-sketch-color-picker
+          @input="onColorChange($event, 'lineColor')"
+          :color="measureStyle.lineColor"
+          :disable-alpha="false"
+        />
+      </mapgis-ui-form-item>
+    </mapgis-ui-setting-form>
+  </div>
+</template>
+<script>
+const initStyle = {
+  lineColor: "#1890ff"
+};
+
+export default {
+  name: "measure-3d-setting",
+  props: {},
+  data: vm => ({
+    measureStyle: { ...initStyle }
+  }),
+  watch: {
+    measureStyle: {
+      handler(nStyle) {
+        this.emitStyle(nStyle);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    /**
+     * 抛出事件
+     */
+    emitStyle(nStyle) {
+      this.$emit("measure-style-change", nStyle);
+    },
+    /**
+     * 重置样式
+     */
+    onReset() {
+      this.measureStyle = { ...initStyle };
+    },
+    /**
+     * 颜色选择变化
+     */
+    onColorChange({ hex }, type) {
+      this.$set(this.measureStyle, type, hex);
+    }
+  }
+};
+</script>
+<style lang="less" scoped></style>