hn-map 1.1.7 → 1.1.9

package/src/layer/heatMap.ts

@@ -1,163 +1,313 @@
-import {deepMerge, wgs84ToGcj02Format} from '../util'
+import { deepMerge, wgs84ToGcj02Format } from "../util";
 
 export default (hnMap: any) => {
+  const defaultOption = {
+    id: "",
+    position: [],
+    allowDrillPick: true,
+    max: null,
+    min: null,
+    radius: 25,
+    minOpacity: 0.1,
+    maxOpacity: 0.8,
+    opacity: 1,
+    blur: 0.85,
+    gradient: {},
+    scaleByDistance: false,
+    clampToGround: true,
+    data: null,
+  };
 
-    const defaultOption = {
-        id: "",
-        position: [],
-        allowDrillPick: true,
-        max: null,
-        min: null,
-        radius: 25,
-        minOpacity: 0.1,
-        maxOpacity: 0.8,
-        opacity: 1,
-        blur: 0.85,
-        gradient: {},
-        scaleByDistance: false,
-        clampToGround: true,
-        data: null
-    }
-
-    class mars3d_class {
-        type: any = 'heatMap'
-        id: any = null
-        option: any = JSON.parse(JSON.stringify(defaultOption))
-        config: any = null
-        layerEntity: any = null
-
-        constructor(option: any) {
-            this.id = option.id
-            deepMerge(this.option, option)
-            this.config = this.formatConfig(this.option)
-            this.layerEntity = new mars3d.layer.HeatLayer(JSON.parse(JSON.stringify(this.config)))
-        }
-
-        formatConfig(option: any) {
-            return {
-                id: option.id,
-                positions: option.position,
-                allowDrillPick: option.allowDrillPick,
-                max: option.max,
-                min: option.min,
-                heatStyle: {
-                    radius: option.radius,
-                    minOpacity: option.minOpacity,
-                    maxOpacity: option.maxOpacity,
-                    blur: option.blur,
-                    gradient: option.gradient,
-                },
-                style: {
-                    opacity: option.opacity,
-                    scaleByDistance: option.scaleByDistance,
-                    clampToGround: option.clampToGround,
-                },
-                redrawZoom: true,
-                attr: option.data
-            }
-        }
-
-        set(option: any) {
-            deepMerge(this.option, option)
-            this.config = this.formatConfig(this.option)
-            this.layerEntity.setOptions(this.config)
-        }
-
-        destroy() {
-            this.layerEntity.remove(true)
-            hnMap.map.layerList = hnMap.map.layerList.filter((v: any) => v.id !== this.id)
-        }
-
-        flyTo() {
-            this.layerEntity.flyTo()
-        }
-
-        clear() {
-            this.layerEntity.clear()
-        }
-
-        setPosition(position: any) {
-            deepMerge(this.option, {position})
-            this.layerEntity.setPositions(position)
-        }
-
-        show() {
-            this.layerEntity.show = true
-        }
-
-        hide() {
-            this.layerEntity.show = false
-        }
-
-    }
-
-    class gaode_class {
-
-        id: any = null
-        option: any = JSON.parse(JSON.stringify(defaultOption))
-        config: any = null
-        layerEntity: any = null
-
-        constructor(option: any) {
-            this.id = option.id
-            deepMerge(this.option, option)
-            this.config = this.formatConfig(this.option)
-            this.layerEntity = new AMap.HeatMap(hnMap.map.map, this.config)
-            this.layerEntity.setDataSet({data: this.config.data, max: this.config.max, min: this.config.min});
-
-        }
-
-        formatConfig(option: any) {
-            const data = option.position.map((v: any) => {
-                return {lng: v.lng, lat: v.lat, count: v.value}
-            })
-            const amapData = wgs84ToGcj02Format(data)
-
-            return {
-                id: option.id,
-                radius: option.radius,
-                max: option.max,
-                min: option.min,
-                opacity: [option.minOpacity, option.maxOpacity],
-                gradient: option.gradient,
-                data: amapData,
-                extData: {
-                    id: option.id,
-                    data: option.data,
-                },
-            }
-        }
-
-        set(option: any) {
-            deepMerge(this.option, option)
-            this.config = this.formatConfig(this.option)
-            this.layerEntity.setOptions(this.config)
-        }
-
-        destroy() {
-            this.layerEntity.setMap(null)
-            hnMap.map.layerList = hnMap.map.layerList.filter((v: any) => v.id !== this.id)
-        }
-
-
-        flyTo() {
-            let totalLng = 0;
-            let totalLat = 0;
-            this.config.data.map((item: any) => {
-                totalLng += item.lng;
-                totalLat += item.lat;
-            })
-            const centerLng = totalLng / this.config.data.length;
-            const centerLat = totalLat / this.config.data.length;
-            hnMap.map.map.setCenter([centerLng, centerLat])
-        }
-
-    }
-
-    const fn: any = {
-        mars3d: mars3d_class,
-        gaode: gaode_class
-    }
-
-    return fn[hnMap.mapType]
-}
+  class mars3d_class {
+    type: any = "heatMap";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    layerEntity: any = null;
+
+    constructor(option: any) {
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.layerEntity = new mars3d.layer.HeatLayer(
+        JSON.parse(JSON.stringify(this.config))
+      );
+    }
+
+    formatConfig(option: any) {
+      return {
+        id: option.id,
+        positions: option.position,
+        allowDrillPick: option.allowDrillPick,
+        max: option.max,
+        min: option.min,
+        heatStyle: {
+          radius: option.radius,
+          minOpacity: option.minOpacity,
+          maxOpacity: option.maxOpacity,
+          blur: option.blur,
+          gradient: option.gradient,
+        },
+        style: {
+          opacity: option.opacity,
+          scaleByDistance: option.scaleByDistance,
+          clampToGround: option.clampToGround,
+        },
+        redrawZoom: true,
+        flyTo: true,
+        attr: option.data,
+      };
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.layerEntity.setOptions(this.config);
+    }
+
+    destroy() {
+      this.layerEntity.remove(true);
+      hnMap.map.layerList = hnMap.map.layerList.filter(
+        (v: any) => v.id !== this.id
+      );
+    }
+
+    flyTo() {
+      this.layerEntity.flyTo();
+    }
+
+    clear() {
+      this.layerEntity.clear();
+    }
+
+    setPosition(position: any) {
+      deepMerge(this.option, { position });
+      this.layerEntity.setPositions(position);
+    }
+
+    show() {
+      this.layerEntity.show = true;
+    }
+
+    hide() {
+      this.layerEntity.show = false;
+    }
+  }
+
+  class gaode_class {
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    layerEntity: any = null;
+
+    constructor(option: any) {
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.layerEntity = new AMap.HeatMap(hnMap.map.map, this.config);
+      this.layerEntity.setDataSet({
+        data: this.config.data,
+        max: this.config.max,
+        min: this.config.min,
+      });
+    }
+
+    formatConfig(option: any) {
+      const data = option.position.map((v: any) => {
+        return { lng: v.lng, lat: v.lat, count: v.value };
+      });
+      const amapData = wgs84ToGcj02Format(data);
+
+      return {
+        id: option.id,
+        radius: option.radius,
+        max: option.max,
+        min: option.min,
+        opacity: [option.minOpacity, option.maxOpacity],
+        gradient: option.gradient,
+        data: amapData,
+        extData: {
+          id: option.id,
+          data: option.data,
+        },
+      };
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.layerEntity.setOptions(this.config);
+    }
+
+    destroy() {
+      this.layerEntity.setMap(null);
+      hnMap.map.layerList = hnMap.map.layerList.filter(
+        (v: any) => v.id !== this.id
+      );
+    }
+
+    flyTo() {
+      let totalLng = 0;
+      let totalLat = 0;
+      this.config.data.map((item: any) => {
+        totalLng += item.lng;
+        totalLat += item.lat;
+      });
+      const centerLng = totalLng / this.config.data.length;
+      const centerLat = totalLat / this.config.data.length;
+      hnMap.map.map.setCenter([centerLng, centerLat]);
+    }
+  }
+
+  class siji_class {
+    type: any = "heatMap";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config_heatmap: any = null;
+    config_point: any = null;
+    layerEntity: any = null;
+
+    constructor(option: any) {
+      this.id = option.id;
+      deepMerge(this.option, option);
+      hnMap.map.map.addSource("themeData", {
+        type: "geojson",
+        data: {
+          type: "FeatureCollection",
+          features: this.option.position.map((v: any) => ({
+            type: "Feature",
+            geometry: {
+              type: "Point",
+              coordinates: [v.lng, v.lat],
+            },
+            properties: {
+              value: v.value,
+            },
+          })),
+        },
+      });
+      this.config_heatmap = this.formatConfig_heatmap(this.option);
+      this.config_point = this.formatConfig_point(this.option);
+    }
+
+    formatConfig_heatmap(option: any) {
+      let config: any = {};
+      config = {
+        id: option.id,
+        type: "heatmap",
+        source: "themeData",
+        maxzoom: 17,
+        paint: {
+          /**
+           * 数据点的影响力，weight=10的点相当于十个weight=1的点
+           * 下述为插值表达式，输入是点geojson的properties的mag，输出随mag线性增大
+           */
+          "heatmap-weight": [
+            "interpolate",
+            ["linear"],
+            ["get", "value"],
+            0,
+            0,
+            150,
+            1.5,
+          ],
+          /**
+           * 热力图强度，类似heatmap-weight
+           * 下述为插值表达式，输出随zoom线性变化，zoom为0时值为1，zoom为12时值为3
+           */
+          "heatmap-intensity": [
+            "interpolate",
+            ["linear"],
+            ["zoom"],
+            0,
+            1,
+            17,
+            1,
+          ],
+          /**
+           * 像素的颜色，必须以heatmap-density（热力图像素的密度）为输入
+           * 下述为插值表达式，输出随heatmap-density变化而变化
+           */
+          "heatmap-color": [
+            "interpolate",
+            ["linear"],
+            ["heatmap-density"],
+            0,
+            "rgba(255, 0, 0, 0)",
+            0.4,
+            option.gradient["0.4"],
+            0.6,
+            option.gradient["0.6"],
+            0.8,
+            option.gradient["0.8"],
+            0.9,
+            option.gradient["0.9"],
+            // 0,
+            // "rgba(255, 0, 0, 0)",
+            // 0.1,
+            // option.gradient["0.4"], // "rgba(0, 30, 255, .6)",
+            // 0.2,
+            // "rgba(7, 208, 255, .6)",
+            // 0.3,
+            // option.gradient["0.6"], //"#2cc946",
+            // 0.4,
+            // "#d5fb0c",
+            // 0.5,
+            // option.gradient["0.8"], //"#e04e4e",
+            // 0.6,
+            // option.gradient["0.9"], //"#f33900",
+            // 0.9,
+            // "rgba(243, 57, 0, .6)",
+            // 1,
+            // "rgba(243, 57, 0, .8)",
+          ],
+          /**
+           * 该值越大，热力图越平滑，信息越不详细。
+           * 下述为插值表达式，输出随zoom线性变化，zoom为0时值为8，zoom为9时值为20
+           */
+          "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 5, 17, 50],
+          /**
+           * 透明度，输出为1则不透明
+           * 下述为插值表达式，输出随zoom线性变化，zoom为5时值为0.8，zoom为12时值为0.4
+           */
+          "heatmap-opacity": [
+            "interpolate",
+            ["linear"],
+            ["zoom"],
+            5,
+            option.maxOpacity, //0.8,
+            17,
+            option.minOpacity, // 0.8
+          ],
+        },
+      };
+      return config;
+    }
+
+    formatConfig_point(option: any) {
+      let config_point: any = {};
+      config_point = {
+        id: "earthquakes-point",
+        type: "circle",
+        source: "themeData",
+        minzoom: 17,
+        paint: {
+          "circle-radius": ["interpolate", ["linear"], ["zoom"], 5, 1, 20, 12],
+          "circle-color": "rgb(255, 148, 0)",
+          "circle-stroke-color": "white",
+          "circle-stroke-width": 1,
+          "circle-opacity": ["interpolate", ["linear"], ["zoom"], 9, 0, 20, 1],
+        },
+      };
+      return config_point;
+    }
+  }
+
+  const fn: any = {
+    mars3d: mars3d_class,
+    gaode: gaode_class,
+    siji: siji_class,
+  };
+
+  return fn[hnMap.mapType];
+};

package/src/layer/layer.ts

@@ -32,9 +32,14 @@ export default (hnMap: any) => {
         console.error("已存在同名图形" + entity.id);
       } else {
         this.children.push(entity);
-        this.layerEntity.addGraphic(entity.graphic); // 添加图形
+
         if (entity.type == "route") {
+          this.layerEntity.addGraphic(entity.graphic); // 添加图形
           entity.start();
+        } else if (entity.type == "pointCloud" || entity.type == "heatMap") {
+          hnMap.map.map.addLayer(entity.layerEntity);
+        } else {
+          this.layerEntity.addGraphic(entity.graphic); // 添加图形
         }
       }
     }
@@ -47,6 +52,11 @@ export default (hnMap: any) => {
           return v.id !== entity.id;
         });
         console.log("layerEntity", this.layerEntity);
+        if (entity.type === "pointCloud" || entity.type === "heatMap") {
+          alert(entity.id);
+          hnMap.map.map.removeLayer(entity.id);
+          // entity.id.destroy();
+        }
         this.layerEntity.removeGraphic(entity.graphic);
       }
     }
@@ -113,7 +123,6 @@ export default (hnMap: any) => {
     // 添加属性弹窗
     addPopupByAttr() {
       this.layerEntity.bindPopup((event: any) => {
-        console.log(event.graphic, "====event.graphic==");
         if (event.graphic.attr) {
           const data = event.graphic.attr;
           return mars3d.Util.getTemplateHtml({
@@ -381,6 +390,19 @@ export default (hnMap: any) => {
         entity.createCar();
         entity.chunkData = entity.joinLinePoint();
         entity.start();
+      } else if (entity.type == "pointCloud") {
+        hnMap.map.map.addLayer(entity.config);
+      } else if (entity.type == "heatMap") {
+        hnMap.map.map.addLayer(entity.config_heatmap);
+        hnMap.map.map.addLayer(entity.config_point);
+        hnMap.map.map.flyTo({
+          center: [
+            entity.option.position[0].lng,
+            entity.option.position[0].lat,
+          ],
+          duration: 2000,
+          essential: true,
+        });
       } else {
         hnMap.map.map.addLayer(entity.config);
       }