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

package/src/components/WebGlobe/manager.js

@@ -26,8 +26,8 @@ export function initManager() {
     window.CesiumZondy.MarkerManager || new MarkerManager();
   window.CesiumZondy.OGCWMTSManager =
     window.CesiumZondy.OGCWMTSManager || new OGCWMTSManager();
-  window.CesiumZondy.FloodAnalyseManager =
-    window.CesiumZondy.FloodAnalyseManager || new FloodAnalyseManager();
+  window.CesiumZondy.FloodAnalysisManager =
+    window.CesiumZondy.FloodAnalysisManager || new FloodAnalysisManager();
   window.CesiumZondy.OGCWMSManager =
     window.CesiumZondy.OGCWMSManager || new OGCWMSManager();
   window.CesiumZondy.DragEditManager =
@@ -70,6 +70,29 @@ export function initManager() {
     new HeightLimitedAnalysisManager();
   window.CesiumZondy.shadowAnalysisManager =
     window.CesiumZondy.shadowAnalysisManager || new shadowAnalysisManager();
+  window.CesiumZondy.IgsFeatureManager =
+    window.CesiumZondy.IgsFeatureManager || new IgsFeatureManager();
+  window.CesiumZondy.AspectAnalysisManager =
+    window.CesiumZondy.AspectAnalysisManager || new AspectAnalysisManager();
+  DynamicSectionAnalysisManager;
+  window.CesiumZondy.DynamicSectionAnalysisManager =
+    window.CesiumZondy.DynamicSectionAnalysisManager ||
+    new DynamicSectionAnalysisManager();
+  window.CesiumZondy.SlopeAnalysisManager =
+    window.CesiumZondy.SlopeAnalysisManager || new SlopeAnalysisManager();
+  window.CesiumZondy.SkyLineAnalysisManager =
+    window.CesiumZondy.SkyLineAnalysisManager || new SkyLineAnalysisManager();
+  window.CesiumZondy.ContourAnalysisManager =
+    window.CesiumZondy.ContourAnalysisManager || new ContourAnalysisManager();
+  window.CesiumZondy.ViewshedAnalysisManager =
+    window.CesiumZondy.ViewshedAnalysisManager || new ViewshedAnalysisManager();
+  window.CesiumZondy.VisiblityAnalysisManager =
+    window.CesiumZondy.VisiblityAnalysisManager ||
+    new VisiblityAnalysisManager();
+  window.CesiumZondy.CutFillAnalysisManager =
+    window.CesiumZondy.CutFillAnalysisManager || new CutFillAnalysisManager();
+  window.CesiumZondy.ProfileAnalysisManager =
+    window.CesiumZondy.ProfileAnalysisManager || new ProfileAnalysisManager();
 
   //在window.CesiumZondy下添加取得WebGlobe对象的方法
   window.CesiumZondy.getWebGlobe = function(vueKey) {
@@ -145,6 +168,51 @@ export class BaseManager {
     }
   }
 
+  changeSource(vueKey, vueIndex, source) {
+    vueKey = vueKey ? vueKey : this.vueKey;
+    vueIndex = vueIndex ? vueIndex : this.vueIndex;
+    vueIndex = `${vueIndex}`;
+    let index = -1;
+    let findSource = undefined;
+    if (!this[vueKey]) return findSource;
+
+    let find = this[vueKey].find((s, i) => {
+      let result = false;
+      if (s && s.key === vueIndex) {
+        index = i;
+        result = true;
+      }
+      return result;
+    });
+
+    if (!source) {
+      find.source = source;
+    }
+    return find;
+  }
+
+  changeOptions(vueKey, vueIndex, key, value) {
+    vueKey = vueKey ? vueKey : this.vueKey;
+    vueIndex = vueIndex ? vueIndex : this.vueIndex;
+    vueIndex = `${vueIndex}`;
+    let index = -1;
+    let findSource = undefined;
+    if (!this[vueKey]) return findSource;
+
+    let find = this[vueKey].find((s, i) => {
+      let result = false;
+      if (s && s.key === vueIndex) {
+        index = i;
+        result = true;
+      }
+      return result;
+    });
+    find.options = find.options || {};
+    find.options[key] = value;
+
+    return find;
+  }
+
   findSource(vueKey, vueIndex) {
     vueKey = vueKey ? vueKey : this.vueKey;
     vueIndex = vueIndex ? vueIndex : this.vueIndex;
@@ -205,10 +273,20 @@ export class IgsDocLayerManager extends BaseManager {}
 export class IgsTilecLayerManager extends BaseManager {}
 export class IgsserverManager extends BaseManager {}
 export class ExcavateAnalysisManager extends BaseManager {}
-export class FloodAnalyseManager extends BaseManager {}
+export class FloodAnalysisManager extends BaseManager {}
 export class MarkerManager extends BaseManager {}
 export class AnalysisModelFlattenManager extends BaseManager {}
 export class DynamicCuttingManager extends BaseManager {}
 export class AnalysisManager extends BaseManager {}
 export class HeightLimitedAnalysisManager extends BaseManager {}
 export class shadowAnalysisManager extends BaseManager {}
+export class IgsFeatureManager extends BaseManager {}
+export class AspectAnalysisManager extends BaseManager {}
+export class DynamicSectionAnalysisManager extends BaseManager {}
+export class SlopeAnalysisManager extends BaseManager {}
+export class SkyLineAnalysisManager extends BaseManager {}
+export class ContourAnalysisManager extends BaseManager {}
+export class ViewshedAnalysisManager extends BaseManager {}
+export class VisiblityAnalysisManager extends BaseManager {}
+export class CutFillAnalysisManager extends BaseManager {}
+export class ProfileAnalysisManager extends BaseManager {}

package/src/components/WebGlobe/mixins/withPrivateMethods.js

@@ -67,14 +67,16 @@ export default {
 
         $scriptMain.src =
           this.libPath ||
-          "http://develop.smaryun.com:8899/static/libs/cdn/cesium/Cesium.js";
+          window.VueCesiumLibPath ||
+          "http://develop.smaryun.com/static/libs/cdn/cesium/Cesium.js";
 
         return new Promise(resolve => {
           $scriptMain.onload = () => {
             if (global.Cesium) {
               $scriptPlugin.src =
                 self.pluginPath ||
-                "http://develop.smaryun.com:8899/static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js";
+                window.VueCesiumPluginPath ||
+                "http://develop.smaryun.com/static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js";
               $scriptPlugin.onload = () => {
                 if (global.Cesium) {
                   self.globalLoad = true;

package/src/components/WebGlobe/util.js

@@ -49,3 +49,176 @@ export function dirname(path) {
   }
   return path.slice(0, end);
 }
+
+/**
+ * RGB/RGBA转Cesium内部颜色值
+ * @param color rgb/rgba字符串
+ * @returns {*}
+ */
+export function colorToCesiumColor(color, webGlobe) {
+  let cesiumColor;
+  if (color.includes("rgb")) {
+    // 如果是rgb或者rgba
+    const a = color.split("(")[1].split(")")[0];
+    const arr = a.split(",");
+    const cesiumRed = Number((Number(arr[0]) / 255).toFixed(2));
+    const cesiumGreen = Number((Number(arr[1]) / 255).toFixed(2));
+    const cesiumBlue = Number((Number(arr[2]) / 255).toFixed(2));
+    const cesiumAlpha = Number(arr[3] ? arr[3] : 1);
+    cesiumColor = webGlobe.getColor(
+      cesiumRed,
+      cesiumGreen,
+      cesiumBlue,
+      cesiumAlpha
+    );
+  }
+  return cesiumColor;
+}
+
+/**
+ * 获取当前摄像机的位置
+ * @returns {null|{lng: number, lat: number, height: *}}
+ */
+export function getCenterPosition(webGlobe) {
+  const lnglat = getCartographic(webGlobe);
+  if (lnglat) {
+    const { longitude, latitude } = lnglat;
+    const pi = Math.PI;
+    const lng = (longitude * 180) / pi;
+    const lat = (latitude * 180) / pi;
+    const height = getCameraHeight(webGlobe);
+    return {
+      lng,
+      lat,
+      height
+    };
+  }
+  return null;
+}
+
+/**
+ * 获取地理坐标
+ * @returns 地理坐标
+ */
+export function getCartographic(webGlobe) {
+  console.log("Cesium", Cesium);
+  const pickEllipsoid = getPickEllipsoid(webGlobe);
+  return pickEllipsoid
+    ? Cesium.Ellipsoid.WGS84.cartesianToCartographic(pickEllipsoid)
+    : null;
+}
+
+/**
+ * 获取椭球坐标
+ * @returns height
+ */
+export function getPickEllipsoid(webGlobe) {
+  const { w, h } = getWebGlobeCanvasSize(webGlobe);
+  return webGlobe.viewer.camera.pickEllipsoid(
+    new Cesium.Cartesian2(w / 2, h / 2)
+  );
+}
+
+/**
+ * 获取三维场景画布高宽
+ * @returns {w:number; h: number}
+ */
+export function getWebGlobeCanvasSize(webGlobe) {
+  const { canvas } = webGlobe.viewer;
+  return {
+    w: canvas.clientWidth,
+    h: canvas.clientHeight
+  };
+}
+
+/**
+ * 获取camera高度
+ * @returns height
+ */
+export function getCameraHeight(webGlobe) {
+  const { viewer } = webGlobe;
+  return viewer
+    ? viewer.scene.globe.ellipsoid.cartesianToCartographic(
+        viewer.camera.position
+      ).height
+    : 0;
+}
+
+/**
+ * 判断当前是否开启了对数深度缓存区
+ * @returns true:开启,false:关闭
+ */
+export function isLogarithmicDepthBufferEnable(webGlobe) {
+  return webGlobe.viewer.scene.logarithmicDepthBuffer;
+}
+
+/**
+ * 设置是否开启对数深度缓存区
+ * @param {*} isEnable true:开启，false:关闭
+ */
+export function setLogarithmicDepthBufferEnable(isEnable, webGlobe) {
+  webGlobe.viewer.scene.logarithmicDepthBuffer = isEnable;
+}
+
+/**
+ * 判断当前是否开启了深度检测
+ * @returns true:开启,false:关闭
+ */
+export function isDepthTestAgainstTerrainEnable(webGlobe) {
+  return webGlobe.viewer.scene.globe.depthTestAgainstTerrain;
+}
+
+/**
+ * 设置是否开启深度检测
+ * @param {*} isEnable true:开启，false:关闭
+ */
+export function setDepthTestAgainstTerrainEnable(isEnable, webGlobe) {
+  webGlobe.viewer.scene.globe.depthTestAgainstTerrain = isEnable;
+}
+
+/**
+ * 判断当前是否开启了光照
+ * @returns true:开启,false:关闭
+ */
+export function isEnableLighting(webGlobe) {
+  return webGlobe.viewer.scene.globe.enableLighting;
+}
+
+/**
+ * 设置光照
+ * @param {*} isEnable true:开启，false:关闭
+ */
+export function setEnableLighting(isEnable, webGlobe) {
+  webGlobe.viewer.scene.globe.enableLighting = isEnable;
+}
+
+/**
+ * 获取光照对象
+ * @returns brightness对象
+ */
+export function getBrightness(webGlobe) {
+  return webGlobe.viewer.scene.brightness;
+}
+
+/**
+ * 获取光照对象的开启状态和Uniforms的brightness参数
+ * @returns this.webGlobe.viewer.scene.brightness的enabled和uniforms.brightness值
+ */
+export function getBrightnessStatusAndUniformsBrightness(webGlobe) {
+  const { enabled, uniforms } = webGlobe.viewer.scene.brightness;
+  const { brightness } = uniforms;
+  return { enabled, brightness };
+}
+
+/**
+ * 设置光照对象的开启状态和Uniforms的brightness参数
+ * @param {*} { enabled, brightness } this.webGlobe.viewer.scene.brightness的enabled和uniforms.brightness值组成的数组
+ */
+export function setBrightnessStatusAndUniformsBrightness(
+  { enabled, brightness },
+  webGlobe
+) {
+  const sceneBrightness = webGlobe.viewer.scene.brightness;
+  sceneBrightness.enabled = enabled;
+  sceneBrightness.uniforms.brightness = brightness;
+}

package/src/components/service/comprehensive-query/ComprehensiveQuery.vue

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <mapgis-ui-comprehensive-query
+      :geoJSONExtent="geoJSONExtent"
+      :logo="logo"
+      :districtName="districtName"
+      :widgetInfo="widgetInfo"
+      :defaultMarkerIcon="defaultMarkerIcon"
+      :selectedMarkerIcon="selectedMarkerIcon"
+      @onClose="onClose"
+      @onSearch="onSearch"
+      @current-result="currentResult"
+      @select-markers="selectMarkers"
+      @click-item="clickItem"
+      @change-cluster="changeCluster"
+      @open-attribute-table="openAttributeTable"
+      @remove-attribute-table="removeAttributeTable"
+      @color-cluster="setColorCluster"
+    >
+    </mapgis-ui-comprehensive-query>
+    <place-name-cesium
+      :defaultMarkerIcon="defaultMarkerIcon"
+      :selectedMarkerIcon="selectedMarkerIcon"
+      :hoverMarker="hoverMarker"
+      :cluster="cluster"
+      :geojson="current"
+      :colorCluster="colorCluster"
+    />
+  </div>
+</template>
+
+<script>
+import * as Feature from "./util/feature";
+import PlaceNameCesium from "./PlaceNameCesium";
+
+export default {
+  name: "mapgis-3d-comprehensive-query",
+  components: { PlaceNameCesium },
+  inject: ["Cesium", "CesiumZondy", "webGlobe"],
+  props: {
+    logo: {
+      type: String,
+      default: ""
+    },
+    /**
+     * 默认图标
+     */
+    defaultMarkerIcon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * 选中图标
+     */
+    selectedMarkerIcon: {
+      type: String,
+      default: ""
+    },
+    districtName: {
+      type: String,
+      default: ""
+    },
+    geoJSONExtent: {
+      type: Object,
+      default: () => ({})
+    },
+    widgetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      /**
+       * 是否开启聚合标注
+       */
+      cluster: false,
+      colorCluster: "",
+      /**
+       * 查询的结果
+       */
+      current: { type: "FeatureCollection", features: [] },
+      /**
+       * 鼠标移入的marker
+       */
+      hoverMarker: [],
+      /**
+       * 行政区范围
+       */
+      district: null
+    };
+  },
+  methods: {
+    /**
+     * 点击关闭的回调函数
+     */
+    onClose() {
+      this.$emit("onClose");
+    },
+    /**
+     * 查询时的回调函数（在没有查询范围时，采用当前屏幕的范围）
+     */
+    onSearch() {
+      this.$emit("onSearch");
+    },
+    /**
+     * 设置聚合图标的颜色
+     */
+    setColorCluster(color) {
+      this.colorCluster = color;
+    },
+    /**
+     * 当前展示的结果回调函数（将查询结果展示至地图上）
+     */
+    currentResult(geojson) {
+      this.current = geojson;
+    },
+    /**
+     * 当前点击的条目的回调函数（实现点击后跳转中心点）
+     */
+    clickItem(feature) {
+      const center = Feature.getGeoJSONFeatureCenter(feature);
+      this.webGlobe.flyTo(center[0], center[1]);
+    },
+
+    /**
+     * 当前选中的坐标
+     */
+    selectMarkers(selectMarkers) {
+      this.hoverMarker = selectMarkers;
+    },
+
+    /**
+     * 聚合按钮改变时的回调
+     */
+    changeCluster(val) {
+      this.current = { type: "FeatureCollection", features: [] };
+      this.cluster = val;
+    },
+
+    /**
+     * 打开属性表回调函数
+     */
+    openAttributeTable(exhibition) {
+      this.$emit("open-attribute-table", exhibition);
+    },
+
+    /**
+     * 关闭属性表回调函数
+     */
+    removeAttributeTable(exhibitionId) {
+      this.$emit("remove-attribute-table", exhibitionId);
+    }
+  }
+};
+</script>

package/src/components/service/comprehensive-query/PlaceNameCesium.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <mapgis-3d-dynamic-marker-layer
+      v-if="!cluster"
+      :data="geojson"
+      :selects="hoverMarker"
+      :highlight="false"
+      :layerStyle="layerStyle"
+      :highlightStyle="highlightStyle"
+      idField="markerId"
+    />
+    <!-- 聚合标注专题图 -->
+    <mapgis-3d-mapv-layer
+      v-else-if="
+        geojson &&
+          geojson.features &&
+          geojson.features.length > 0 &&
+          colorCluster
+      "
+      :geojson="geojson"
+      :options="options"
+      count-field="count"
+    />
+  </div>
+</template>
+
+<script>
+import { Style } from "@mapgis/webclient-es6-service";
+const { MarkerStyle, LineStyle, PointStyle, FillStyle } = Style;
+export default {
+  name: "place-name-cesium",
+  inject: ["Cesium", "CesiumZondy", "webGlobe"],
+  props: {
+    selectedMarkerIcon: {
+      type: String,
+      default: ""
+    },
+    defaultMarkerIcon: {
+      type: String,
+      default: ""
+    },
+    cluster: {
+      type: Boolean,
+      default: false
+    },
+    colorCluster: {
+      type: String,
+      default: ""
+    },
+    geojson: {
+      type: Object,
+      default: () => ({})
+    },
+    hoverMarker: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    layerStyle() {
+      return new MarkerStyle({
+          symbol: this.defaultMarkerIcon
+        });
+    },
+    highlightStyle() {
+      return {
+        enableHoverMarker: false,
+        enableHoverFeature: false,
+        marker: new MarkerStyle({
+          symbol: this.selectedMarkerIcon
+        }),
+        point: new PointStyle(),
+        line: new LineStyle(),
+        polygon: new FillStyle()
+      };
+    },
+    options() {
+      return {
+        fillStyle: this.colorCluster,
+        size: 50 / 3 / 2, // 非聚合点的半径
+        minSize: 8, // 聚合点最小半径
+        maxSize: 31, // 聚合点最大半径
+        globalAlpha: 0.8, // 透明度
+        clusterRadius: 150, // 聚合像素半径
+        maxClusterZoom: 18, // 最大聚合的级别
+        maxZoom: 19, // 最大显示级别
+        minPoints: 5, // 最少聚合点数，点数多于此值才会被聚合
+        extent: 400, // 聚合的细腻程度，越高聚合后点越密集
+        label: {
+          // 聚合文本样式
+          show: true, // 是否显示
+          fillStyle: "white"
+        },
+        gradient: { 0: "blue", 0.5: "yellow", 1.0: "rgb(255,0,0)" }, // 聚合图标渐变色
+        cesium: { postRender: true, postRenderFrame: 0 },
+        draw: "cluster",
+        context: "2d"
+      };
+    }
+  }
+};
+</script>