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

package/src/components/Overlay/themeLayer/heater/CesiumHeater.vue

@@ -0,0 +1,152 @@
+<script>
+import { isDef } from "../../../Utils/util";
+
+export default {
+  name: "mapgis-3d-cesium-heater-layer",
+  inject: ["webGlobe", "CesiumZondy"],
+  props: {
+    geojson: {
+      // 数据源
+      type: Object
+    },
+    bound: {
+      // 图层范围
+      type: Object
+    },
+    options: {
+      // 热力图配置
+      type: Object,
+      default: () => ({})
+    },
+    field: {
+      // 统计的属性
+      type: String,
+      default: "count"
+    }
+  },
+  methods: {
+    /**
+     * 获取原生热力图数据坐标和值的集合
+     * @param {object} geojson geojson数据
+     * @param { string} field 属性
+     */
+    $_getCesiumDataArr(geojson, field) {
+      return geojson.features.map(
+        ({ geometry: { coordinates }, properties }) => {
+          const countValue = properties[field];
+          const value = isDef(countValue) ? countValue : 1;
+          const [x, y] = Array.isArray(coordinates[0])
+            ? coordinates[0][0]
+            : coordinates;
+          return {
+            x,
+            y,
+            value
+          };
+        }
+      );
+    },
+    /**
+     * 获取原生热力图数据的值的范围
+     * @param {object} data {x,y,value}
+     * @returns {array} [min, max]
+     */
+    $_getCesiumDataRange(data) {
+      const values = data.map(({ value }) => value);
+      return [Math.min(...values) || 0, Math.max(...values) || 0];
+    },
+    /**
+     * 移除原生热力图层, 支持上层单独调用
+     */
+    $_removeCesiumHeater() {
+      if (this.heaterInstance) {
+        this.heaterInstance.removeLayer();
+        this.heaterInstance = null;
+        this.analysisManager = null;
+      }
+    },
+    /**
+     * 创建原生热力图层, 支持上层单独调用
+     */
+    $_createCesiumHeater() {
+      if (!this.analysisManager) {
+        this.analysisManager = new this.CesiumZondy.Manager.AnalysisManager({
+          viewer: this.webGlobe.viewer
+        });
+      }
+      const dataSource = this.$_getCesiumDataArr(this.geojson, this.field);
+      const [min, max] = this.$_getCesiumDataRange(dataSource);
+      this.heaterInstance = this.analysisManager.createHeatMap(
+        this.bound,
+        min,
+        max,
+        dataSource,
+        this.selfOptions
+      );
+    },
+    /**
+     * 更新热力图
+     */
+    $_updateCesiumHeater(value) {
+      if (!value) {
+        this.$_removeCesiumHeater();
+      } else {
+        this.$_createCesiumHeater();
+      }
+    }
+  },
+  computed: {
+    // 配置
+    selfOptions({ options }) {
+      return {
+        minOpacity: 0,
+        maxOpacity: 1,
+        gradient: {
+          "0.25": "rgb(0,0,255)",
+          "0.55": "rgb(0,255,0)",
+          "0.85": "rgb(241,241,15)",
+          "1.0": "rgb(255,0,0)"
+        },
+        spacing: 1, // 边界周围的额外空间
+        alpha: 1, // 透明度
+        blur: 0.85, // 模糊值
+        radius: 20, // 每个热力点半径大小
+        useClustering: true, // 是否聚合
+        ...options
+      };
+    }
+  },
+  watch: {
+    // todo 样式配置更新是否需要重新createHeatMap？有无提供只更新样式配置或者数据的方法？
+    options: {
+      deep: true,
+      handler(o) {
+        if (o) {
+          this.$_createCesiumHeater();
+        }
+      }
+    },
+    bound: {
+      deep: true,
+      handler(v) {
+        this.$_updateCesiumHeater();
+      }
+    },
+    geojson: {
+      deep: true,
+      handler(v) {
+        this.$_updateCesiumHeater();
+      }
+    }
+  },
+  beforeDestroy() {
+    this.$_removeCesiumHeater();
+  },
+  created() {
+    this.$_createCesiumHeater();
+  },
+  render() {
+    return null;
+  }
+};
+</script>

package/src/components/Overlay/themeLayer/heater/MapvHeater.vue

@@ -0,0 +1,161 @@
+<script>
+import { MRFS } from "@mapgis/webclient-es6-service";
+import { DataSet } from "mapv";
+import { MapvLayer } from "../../mapv/MapvLayer";
+
+const { VFeature } = MRFS;
+
+export default {
+  name: "mapgis-3d-mapv-heater-layer",
+  inject: ["Cesium", "webGlobe"],
+  props: {
+    geojson: {
+      // 数据源
+      type: Object
+    },
+    field: {
+      // 统计的属性
+      type: String,
+      default: "count"
+    },
+    options: {
+      // 热力图配置
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    /**
+     * 转换数据
+     * @param {object} geojson 数据源
+     */
+    $_convertGeojson(geojson) {
+      return VFeature.resultToGeojson(geojson);
+    },
+    /**
+     * 处理geojson
+     * @param {object} geojson 数据源
+     * @param {string} field 统计属性字段
+     */
+    $_handleGeojson(geojson, field) {
+      if (!geojson || !field) return;
+      const _geojson = !("features" in geojson)
+        ? this.$_convertGeojson(geojson)
+        : geojson;
+      let _dataSet = [];
+
+      if (_geojson.features.length) {
+        _dataSet = _geojson.features.map(({ geometry, properties }) => {
+          const { type, coordinates } = geometry;
+          const { time, ...others } = properties;
+          const timeValue = time ? Number(time) : 100 * Math.random();
+          const fieldValue = properties[field] || 1;
+          const count =
+            typeof fieldValue === "number" && !isNaN(fieldValue)
+              ? fieldValue
+              : Number(fieldValue);
+          return {
+            geometry: {
+              type,
+              coordinates
+            },
+            time: timeValue,
+            count,
+            ...others
+          };
+        });
+      }
+      const dataSet = new DataSet(_dataSet);
+      return dataSet;
+    },
+    /**
+     * 更新mapv热力图层
+     */
+    $_updateMapvLayer() {
+      if (!this.mapvLayer) {
+        this.$_createMapvLayer();
+      } else {
+        this.mapvLayer.updateData(this.dataSource, this.selfOptions);
+      }
+    },
+    /**
+     * 创建mapv热力图层
+     */
+    $_createMapvLayer() {
+      if (!this.geojson) return;
+      this.dataSource = this.$_handleGeojson(this.geojson, this.field);
+      this.mapvLayer = new MapvLayer(
+        this.webGlobe.viewer,
+        this.dataSource,
+        this.selfOptions
+      );
+    },
+    /**
+     * 移除mapv热力图图层
+     */
+    $_removeMapvLayer() {
+      if (this.mapvLayer) {
+        this.mapvLayer.remove();
+        this.mapvLayer.destroy();
+        this.mapvLayer = null;
+      }
+    }
+  },
+  data: vm => ({
+    dataSource: null
+  }),
+  computed: {
+    // 配置
+    selfOptions({ options }) {
+      return {
+        cesium: {
+          postRender: true,
+          postRenderFrame: 10
+        },
+        context: "2d",
+        draw: "heatmap",
+        minOpacity: 0,
+        maxOpacity: 1,
+        gradient: {
+          "0.25": "rgb(0,0,255)",
+          "0.55": "rgb(0,255,0)",
+          "0.85": "rgb(241,241,15)",
+          "1.0": "rgb(255,0,0)"
+        },
+        max: 100, // 最大权重值
+        size: 20, // 每个热力点半径大小
+        ...options
+      };
+    }
+  },
+  watch: {
+    options: {
+      deep: true,
+      handler(o) {
+        if (o) {
+          this.$_updateMapvLayer();
+        }
+      }
+    },
+    geojson: {
+      deep: true,
+      handler(d) {
+        if (!d) {
+          this.$_removeMapvLayer();
+        } else {
+          this.$_updateMapvLayer();
+        }
+      }
+    }
+  },
+  beforeDestroy() {
+    this.$_removeMapvLayer();
+  },
+  created() {
+    this.$_createMapvLayer();
+  },
+  render() {
+    return null;
+  }
+};
+</script>