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

package/src/component.js

@@ -20,10 +20,14 @@ export { default as Mapgis3dOgcWmsLayer } from "./components/Layer/OGC/OGCWMSLay
 export { default as Mapgis3dOgcReveserWmsLayer } from "./components/Layer/OGC/OGCReveserWMSLayer.vue";
 
 export { default as Mapgis3dIgsVectorLayer } from "./components/Layer/IGServer/IgsVectorLayer.vue";
+export { default as Mapgis3dIgsFeatureLayer } from "./components/Layer/IGServer/IgsFeatureLayer.vue";
 
 export { default as Mapgis3dArcgisTileLayer } from "./components/Layer/ArcGISServer/ArcGISTileLayer";
 export { default as Mapgis3dArcgisMapLayer } from "./components/Layer/ArcGISServer/ArcGISMapLayer";
 
+// 要素图层
+export { default as Mapgis3dGeojsonLayer } from "./components/Layer/GeoJSON/GeoJsonLayer";
+
 // 矢量瓦片
 export { default as Mapgis3dVectortileLayer } from "./components/Layer/VectorTile/VectorTileLayer.vue";
 
@@ -34,8 +38,13 @@ export { default as Mapgis3dTileset } from "./components/M3D/3dTileset.vue";
 
 export { default as Mapgis3dPopup } from "./components/UI/Popup/Popup.vue";
 export { default as Mapgis3dMarker } from "./components/UI/Marker/Marker";
+export { default as Mapgis3dMarkerPro } from "./components/Layer/Marker/Marker3dPro.vue";
+export { default as Mapgis3dMarkerSetPro } from "./components/Layer/Marker/Marker3dSetPro.vue";
+export { default as Mapgis3dDynamicMarkerLayer } from "./components/Layer/Marker/DynamicMarkerLayer.vue";
 export { default as Mapgis3dMapvLayer } from "./components/Overlay/Mapv3dLayer.vue";
-// export { default as Mapgis3dEchartsLayer } from "./components/Overlay/Echarts.vue";
+export { default as Mapgis3dEchartsLayer } from "./components/Overlay/Echarts.vue";
+export { default as Mapgis3dCesiumHeaterLayer } from "./components/Overlay/themeLayer/heater/CesiumHeater.vue";
+export { default as Mapgis3dMapvHeaterLayer } from "./components/Overlay/themeLayer/heater/MapvHeater.vue";
 
 export { default as Mapgis3dIgsTerrain } from "./components/Provider/TerrainProvider/IgsTerrainProvider.vue";
 export { default as Mapgis3dTerrainProvider } from "./components/Provider/TerrainProvider/TerrainProvider.vue";
@@ -53,7 +62,14 @@ export { default as Mapgis3dExcavate } from "./components/Analysis/Excavate";
 export { default as Mapgis3dHeightlimited } from "./components/Analysis/HeightLimited";
 export { default as Mapgis3dShadow } from "./components/Analysis/Shadow";
 export { default as Mapgis3dDynamicCutting } from "./components/Analysis/DynamicCutting";
-export { default as Mapgis3dCutFill } from "./components/Analysis/Fill";
+export { default as Mapgis3dDynamicSection } from "./components/Analysis/DynamicSection";
+export { default as Mapgis3dFill } from "./components/Analysis/Fill";
+export { default as Mapgis3dAspect } from "./components/Analysis/Aspect";
+export { default as Mapgis3dSlope } from "./components/Analysis/Slope";
+export { default as Mapgis3dContour } from "./components/Analysis/Contour";
+export { default as Mapgis3dCutFill } from "./components/Analysis/CutFill";
+export { default as Mapgis3dProfile } from "./components/Analysis/Profile";
+export { default as Mapgis3dParticleEffects } from "./components/Overlay/ParticleEffects";
 export { default as Mapgis3dFlood } from "./components/Analysis/Flood";
 
 //融合组件
@@ -64,3 +80,5 @@ export { default as Mapgis3dComponentLegend } from "./components/UI/mixComponent
 export { default as Mapgis3dRainEffect } from "./components/SceneEffect/RainEffect";
 export { default as Mapgis3dSnowEffect } from "./components/SceneEffect/SnowEffect";
 export { default as Mapgis3dFogEffect } from "./components/SceneEffect/FogEffect";
+
+export { default as Mapgis3DComprehensiveQuery } from "./components/service/comprehensive-query/ComprehensiveQuery";

package/src/components/Analysis/Aspect.vue

@@ -0,0 +1,318 @@
+<template>
+  <div>
+    <slot>
+      <div class="mapgis-widget-aspect-analysis">
+        <mapgis-ui-group-tab title="坡向图例设置">
+          <mapgis-ui-tooltip slot="handle" placement="bottomRight">
+            <template slot="title">
+              <span>{{ info }}</span>
+            </template>
+            <mapgis-ui-iconfont type="mapgis-info"></mapgis-ui-iconfont>
+          </mapgis-ui-tooltip>
+        </mapgis-ui-group-tab>
+        <mapgis-ui-colors-setting
+          v-model="rampColorsCopy"
+          :rangeField="'坡向范围'"
+        ></mapgis-ui-colors-setting>
+        <mapgis-ui-setting-footer>
+          <mapgis-ui-button type="primary" @click="analysis"
+            >分析</mapgis-ui-button
+          >
+          <mapgis-ui-button @click="remove">清除</mapgis-ui-button>
+        </mapgis-ui-setting-footer>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script>
+import { rgbaToHex } from "../Utils/common/color-util";
+/* import { Util } from "@mapgis/webclient-vue-ui";
+const { ColorUtil } = Util; */
+import VueOptions from "../Base/Vue/VueOptions";
+import {
+  isEnableLighting,
+  setEnableLighting,
+  getBrightness,
+  getBrightnessStatusAndUniformsBrightness,
+  setBrightnessStatusAndUniformsBrightness
+} from "../WebGlobe/util";
+
+export default {
+  name: "mapgis-3d-analysis-aspect",
+  inject: ["Cesium", "CesiumZondy", "webGlobe"],
+  props: {
+    ...VueOptions,
+    /**
+     * @type Object
+     * @description 坡向分析角度颜色数组
+     */
+    rampColors: {
+      type: Array,
+      default: () => {
+        return [
+          { min: 0, max: 60, color: "rgba(244, 67, 54, 0.5)" },
+          { min: 60, max: 120, color: "rgba(233, 30, 99, 0.5)" },
+          { min: 120, max: 180, color: "rgba(156, 39, 176, 0.5)" },
+          { min: 180, max: 240, color: "rgba(255, 235, 59, 0.5)" },
+          { min: 240, max: 300, color: "rgba(96, 125, 139, 0.5)" },
+          { min: 300, max: 360, color: "rgba(76, 175, 80, 0.5)" }
+        ];
+      }
+    }
+  },
+  watch: {
+    rampColors: {
+      handler() {
+        this.rampColorsCopy = this.rampColors;
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      rampColorsCopy: [
+        { min: 0, max: 60, color: "rgba(244, 67, 54, 0.5)" },
+        { min: 60, max: 120, color: "rgba(233, 30, 99, 0.5)" },
+        { min: 120, max: 180, color: "rgba(156, 39, 176, 0.5)" },
+        { min: 180, max: 240, color: "rgba(255, 235, 59, 0.5)" },
+        { min: 240, max: 300, color: "rgba(96, 125, 139, 0.5)" },
+        { min: 300, max: 360, color: "rgba(76, 175, 80, 0.5)" }
+      ],
+
+      isEnableLighting: undefined, // 光照是否已开启
+
+      noBrightness: undefined, // 是否有brightness对象
+
+      brightnessStatusAndUniformsBrightness: undefined, // 光照参数
+
+      info:
+        "坡向分析需要带法线地形。\r\n坡向按照东北西南的顺序表示方向,即0°表示坡向指向正东方向。"
+    };
+  },
+
+  created() {},
+  mounted() {
+    this.mount();
+  },
+  destroyed() {
+    this.unmount();
+  },
+  methods: {
+    async createCesiumObject() {
+      const { baseUrl, options } = this;
+      return new Promise(
+        resolve => {
+          resolve();
+        },
+        reject => {}
+      );
+    },
+    mount() {
+      const { webGlobe, CesiumZondy, vueKey, vueIndex } = this;
+      const { viewer } = webGlobe;
+      const vm = this;
+      let promise = this.createCesiumObject();
+      promise.then(function(dataSource) {
+        vm.$emit("load", vm);
+        CesiumZondy.AspectAnalysisManager.addSource(
+          vueKey,
+          vueIndex,
+          dataSource,
+          {
+            drawElement: null,
+            aspectAnalysis: null
+          }
+        );
+      });
+    },
+    unmount() {
+      let { CesiumZondy, vueKey, vueIndex } = this;
+      let find = CesiumZondy.AspectAnalysisManager.findSource(vueKey, vueIndex);
+      if (find) {
+        this.remove();
+      }
+      CesiumZondy.AspectAnalysisManager.deleteSource(vueKey, vueIndex);
+      this.$emit("unload", this);
+    },
+    /**
+     * @description 开启光照
+     */
+    _enableBrightness() {
+      // 开启光照，不然放大地图，分析结果显示异常
+
+      this.isEnableLighting = isEnableLighting(this.webGlobe);
+      if (!this.isEnableLighting) {
+        // 未开启光照，开启
+        setEnableLighting(true, this.webGlobe);
+      }
+      // 调高亮度
+      const { viewer } = this.webGlobe;
+      const stages = viewer.scene.postProcessStages;
+      const brightness = getBrightness(this.webGlobe);
+      if (!brightness) {
+        // 初始没有brightness对象
+        this.noBrightness = true;
+        viewer.scene.brightness = stages.add(
+          this.Cesium.PostProcessStageLibrary.createBrightnessStage()
+        );
+      }
+      // 设置前记录原有光照参数
+      this.brightnessStatusAndUniformsBrightness = getBrightnessStatusAndUniformsBrightness(
+        this.webGlobe
+      );
+      const statusAndUniformsBrightness = {
+        enabled: true,
+        brightness: 1.2
+      };
+      setBrightnessStatusAndUniformsBrightness(
+        statusAndUniformsBrightness,
+        this.webGlobe
+      );
+    },
+    /**
+     * @description 开始绘制并分析
+     */
+    analysis() {
+      let { CesiumZondy, vueKey, vueIndex } = this;
+      let find = CesiumZondy.AspectAnalysisManager.findSource(vueKey, vueIndex);
+      let { options } = find;
+      let { aspectAnalysis, drawElement } = options;
+      const { viewer } = this.webGlobe;
+      // 初始化交互式绘制控件
+      drawElement = drawElement || new this.Cesium.DrawElement(viewer);
+      CesiumZondy.AspectAnalysisManager.changeOptions(
+        vueKey,
+        vueIndex,
+        "drawElement",
+        drawElement
+      );
+
+      const { rampColorsCopy } = this;
+
+      const colors = [];
+      const ramp = [];
+      rampColorsCopy.forEach(({ max, color }) => {
+        ramp.push((max / 360).toFixed(2));
+        colors.push(color);
+      });
+      const rampColor = this._transformColor(colors);
+
+      // 激活交互式绘制工具
+      drawElement.startDrawingPolygon({
+        // 绘制完成回调函数
+        callback: positions => {
+          this.remove();
+          this._enableBrightness(); // 开启光照
+          aspectAnalysis =
+            aspectAnalysis ||
+            new this.Cesium.TerrainAnalyse(viewer, {
+              aspectRampColor: rampColor,
+              aspectRamp: ramp
+            });
+          aspectAnalysis.enableContour(false);
+          aspectAnalysis.updateMaterial("aspect");
+          aspectAnalysis.changeAnalyseArea(positions);
+          CesiumZondy.AspectAnalysisManager.changeOptions(
+            vueKey,
+            vueIndex,
+            "aspectAnalysis",
+            aspectAnalysis
+          );
+        }
+      });
+    },
+    /**
+     * @description rgba数组转hex数组
+     * @param arrayColor - {Array} rgba数组
+     * @return hex数组
+     */
+    _transformColor(arrayColor) {
+      let isNull = false;
+      const arr = arrayColor.map(color => {
+        if (color) {
+          return rgbaToHex(color);
+        }
+        isNull = true;
+        return null;
+      });
+      if (isNull) {
+        return [];
+      }
+      return arr;
+    },
+    /**
+     * @description 移除坡向分析结果，取消交互式绘制事件激活状态
+     */
+    remove() {
+      let { CesiumZondy, vueKey, vueIndex } = this;
+      let find = CesiumZondy.AspectAnalysisManager.findSource(vueKey, vueIndex);
+      let { options } = find;
+      let { aspectAnalysis, drawElement } = options;
+
+      // 判断是否已有坡向分析结果
+      if (aspectAnalysis) {
+        // 移除坡向分析显示结果
+        aspectAnalysis.updateMaterial("none");
+        CesiumZondy.AspectAnalysisManager.changeOptions(
+          vueKey,
+          vueIndex,
+          "aspectAnalysis",
+          null
+        );
+      }
+
+      if (drawElement) {
+        // 取消交互式绘制矩形事件激活状态
+        drawElement.stopDrawing();
+        CesiumZondy.AspectAnalysisManager.changeOptions(
+          vueKey,
+          vueIndex,
+          "drawElement",
+          null
+        );
+      }
+
+      // 恢复光照设置
+      this._restoreEnableLighting();
+    },
+    /***
+     * 恢复光照设置
+     */
+    _restoreEnableLighting() {
+      // 恢复光照开启状态设置
+      if (
+        this.isEnableLighting !== undefined &&
+        this.isEnableLighting !== isEnableLighting(this.webGlobe)
+      ) {
+        setEnableLighting(this.isEnableLighting, this.webGlobe);
+      }
+      const stages = this.webGlobe.viewer.scene.postProcessStages;
+      if (this.noBrightness) {
+        // 如果开始没有brightness对象，恢复
+        stages.remove(this.webGlobe.viewer.scene.brightness);
+        this.webGlobe.viewer.scene.brightness = undefined;
+      } else {
+        // 恢复brightness参数设置
+        if (this.brightnessStatusAndUniformsBrightness !== undefined) {
+          const brightnessStatusAndUniformsBrightness = getBrightnessStatusAndUniformsBrightness(
+            this.webGlobe
+          );
+          if (
+            this.brightnessStatusAndUniformsBrightness.enabled !==
+              brightnessStatusAndUniformsBrightness.enabled ||
+            this.brightnessStatusAndUniformsBrightness.brightness !==
+              brightnessStatusAndUniformsBrightness.brightness
+          ) {
+            setBrightnessStatusAndUniformsBrightness(
+              this.brightnessStatusAndUniformsBrightness,
+              this.webGlobe
+            );
+          }
+        }
+      }
+    }
+  }
+};
+</script>

package/src/components/Analysis/Contour.vue

@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <slot>
+      <div class="mapgis-widget-contour-analysis">
+        <mapgis-ui-group-tab title="参数设置" />
+        <mapgis-ui-setting-form>
+          <mapgis-ui-form-item label="等值距">
+            <mapgis-ui-input
+              v-model.number="contourSpacingCopy"
+              type="number"
+              min="0"
+              addon-after="(米)"
+            />
+          </mapgis-ui-form-item>
+          <mapgis-ui-form-item label="线宽">
+            <mapgis-ui-input
+              v-model.number="contourWidthCopy"
+              type="number"
+              min="0"
+            />
+          </mapgis-ui-form-item>
+          <mapgis-ui-form-item label="线颜色">
+            <mapgis-ui-sketch-color-picker
+              :color.sync="contourColorCopy"
+              :disableAlpha="true"
+            ></mapgis-ui-sketch-color-picker>
+          </mapgis-ui-form-item>
+        </mapgis-ui-setting-form>
+        <mapgis-ui-setting-footer>
+          <mapgis-ui-button type="primary" @click="analysis"
+            >分析</mapgis-ui-button
+          >
+          <mapgis-ui-button @click="remove">清除</mapgis-ui-button>
+        </mapgis-ui-setting-footer>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script>
+import VueOptions from "../Base/Vue/VueOptions";
+import { colorToCesiumColor } from "../WebGlobe/util";
+
+export default {
+  name: "mapgis-3d-analysis-contour",
+  inject: ["Cesium", "CesiumZondy", "webGlobe"],
+  props: {
+    ...VueOptions,
+    /**
+     * @type Number
+     * @default 150
+     * @description 等高线间距
+     */
+    contourSpacing: {
+      type: Number,
+      default: 150
+    },
+    /**
+     * @type Number
+     * @default 2
+     * @description 等高线宽度
+     */
+    contourWidth: {
+      type: Number,
+      default: 2
+    },
+    /**
+     * @type String
+     * @default "rgb(255,0,0)"
+     * @description 等高线颜色
+     */
+    contourColor: {
+      type: String,
+      default: "rgb(255,0,0)"
+    }
+  },
+  watch: {
+    contourSpacing: {
+      handler() {
+        this.contourSpacingCopy = this.contourSpacing;
+      },
+      immediate: true
+    },
+    contourWidth: {
+      handler() {
+        this.contourWidthCopy = this.contourWidth;
+      },
+      immediate: true
+    },
+    contourColor: {
+      handler() {
+        this.contourColorCopy = this.contourColor;
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      contourSpacingCopy: 150,
+      contourWidthCopy: 2,
+      contourColorCopy: "rgb(255,0,0)"
+    };
+  },
+
+  created() {},
+  mounted() {
+    this.mount();
+  },
+  destroyed() {
+    this.unmount();
+  },
+  methods: {
+    async createCesiumObject() {
+      return new Promise(
+        resolve => {
+          resolve();
+        },
+        reject => {}
+      );
+    },
+    mount() {
+      const { webGlobe, CesiumZondy, vueKey, vueIndex } = this;
+      const { viewer } = webGlobe;
+      const vm = this;
+      let promise = this.createCesiumObject();
+      promise.then(function(dataSource) {
+        vm.$emit("load", vm);
+        CesiumZondy.ContourAnalysisManager.addSource(
+          vueKey,
+          vueIndex,
+          dataSource,
+          {
+            drawElement: null,
+            contourAnalysis: null
+          }
+        );
+      });
+    },
+    unmount() {
+      let { CesiumZondy, vueKey, vueIndex } = this;
+      let find = CesiumZondy.ContourAnalysisManager.findSource(
+        vueKey,
+        vueIndex
+      );
+      if (find) {
+        this.remove();
+      }
+      CesiumZondy.ContourAnalysisManager.deleteSource(vueKey, vueIndex);
+      this.$emit("unload", this);
+    },
+    /**
+     * @description rgba值转cesium内部color对象
+     * @return {Object} cesium内部color对象
+     */
+    _edgeColor() {
+      return colorToCesiumColor(this.contourColorCopy, this.webGlobe);
+    },
+    /**
+     * @description 开始绘制并分析
+     */
+    analysis() {
+      let { CesiumZondy, vueKey, vueIndex, Cesium } = this;
+      let find = CesiumZondy.ContourAnalysisManager.findSource(
+        vueKey,
+        vueIndex
+      );
+      let { options } = find;
+      let { contourAnalysis, drawElement } = options;
+      const { viewer } = this.webGlobe;
+      // 初始化交互式绘制控件
+      drawElement = drawElement || new Cesium.DrawElement(viewer);
+      CesiumZondy.ContourAnalysisManager.changeOptions(
+        vueKey,
+        vueIndex,
+        "drawElement",
+        drawElement
+      );
+      const { contourWidthCopy, contourSpacingCopy } = this;
+      const color = this._edgeColor();
+
+      // 激活交互式绘制工具
+      drawElement.startDrawingPolygon({
+        // 绘制完成回调函数
+        callback: positions => {
+          this.remove();
+          contourAnalysis =
+            contourAnalysis || new Cesium.TerrainAnalyse(viewer, {});
+          contourAnalysis.enableContour(true);
+          contourAnalysis.updateMaterial("none");
+          contourAnalysis.changeContourWidth(contourWidthCopy);
+          contourAnalysis.changeContourSpacing(contourSpacingCopy);
+          contourAnalysis.changeContourColor(color);
+          contourAnalysis.changeAnalyseArea(positions);
+          CesiumZondy.ContourAnalysisManager.changeOptions(
+            vueKey,
+            vueIndex,
+            "contourAnalysis",
+            contourAnalysis
+          );
+        }
+      });
+    },
+    /**
+     * @description 移除等值线分析结果，取消交互式绘制事件激活状态
+     */
+    remove() {
+      let { CesiumZondy, vueKey, vueIndex } = this;
+      let find = CesiumZondy.ContourAnalysisManager.findSource(
+        vueKey,
+        vueIndex
+      );
+      let { options } = find;
+      let { contourAnalysis, drawElement } = options;
+
+      // 判断是否已有等值线分析结果
+      if (contourAnalysis) {
+        // 移除等值线分析显示结果
+        contourAnalysis.enableContour(false);
+        contourAnalysis.updateMaterial("none");
+        CesiumZondy.ContourAnalysisManager.changeOptions(
+          vueKey,
+          vueIndex,
+          "contourAnalysis",
+          null
+        );
+      }
+
+      if (drawElement) {
+        // 取消交互式绘制矩形事件激活状态
+        drawElement.stopDrawing();
+        CesiumZondy.ContourAnalysisManager.changeOptions(
+          vueKey,
+          vueIndex,
+          "drawElement",
+          null
+        );
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+::v-deep .mapgis-ui-form-item {
+  margin-bottom: 0;
+}
+::v-deep .mapgis-ui-form label {
+  font-size: 12px;
+}
+
+::v-deep .mapgis-ui-form-item-label {
+  line-height: 40px;
+}
+
+::v-deep .mapgis-ui-input {
+  padding: 4px 11px;
+}
+</style>