hn-map 1.0.10 → 1.1.1

package/src/graphic/line.ts

@@ -0,0 +1,345 @@
+import {deepMerge, getLevelMiddleHeight, wgs84ToGcj02Format} from "../util";
+import mars3d_entity from "../base/mars3d_entity";
+import gaode_entity from "../base/gaode_entity";
+import siji_entity from "../base/siji_entity";
+
+export default (hnMap: any) => {
+  const defaultOption = {
+    id: "",
+    position: [],
+    type: "line",
+    color: "#ffffff",
+    width: 2,
+    opacity: 1,
+    outline: false,
+    outlineColor: "#ffffff",
+    outlineWidth: 2,
+    dashColor: "#00ff00",
+    dashLength: 16,
+    image: "",
+    repeat: [1, 1],
+    speed: 5,
+    scaleByDistance: true,
+    distanceDisplayCondition: false,
+    distanceDisplayCondition_far: 1,
+    distanceDisplayCondition_near: 18,
+    data: null,
+    combine: false,
+    instances: [],
+  };
+
+  class mars3d_class extends mars3d_entity {
+    type: any = "line";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    graphic: any = null;
+
+    constructor(option: any) {
+      // debugger
+      super(hnMap);
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      if (option.combine) {
+        this.graphic = new mars3d.graphic.PolylineCombine(this.config);
+      } else {
+        this.graphic = new mars3d.graphic.PolylineEntity(this.config);
+      }
+    }
+
+    formatConfig(option: any) {
+      let config: any = {};
+      const distanceDisplayCondition_far = getLevelMiddleHeight(option.distanceDisplayCondition_far)
+      const distanceDisplayCondition_near = getLevelMiddleHeight(option.distanceDisplayCondition_near)
+      if (option.combine) {
+        config = {
+          id: option.id,
+          combine: true,
+          instances: option.instances.map((item: any) => {
+            let itemOption = JSON.parse(JSON.stringify(defaultOption));
+            deepMerge(itemOption, item);
+            return this.formatConfig(itemOption);
+          }),
+        };
+      } else {
+        config = {
+          id: option.id,
+          positions: option.position,
+          style: {
+            materialType: "Color",
+            color: option.color,
+            width: option.width,
+            opacity: option.opacity,
+            outline: option.outline,
+            outlineColor: option.outlineColor,
+            outlineWidth: option.outlineWidth,
+            clampToGround: !option.position[0][2],
+            scaleByDistance: option.scaleByDistance,
+            distanceDisplayCondition: option.distanceDisplayCondition,
+            distanceDisplayCondition_far: distanceDisplayCondition_far,
+            distanceDisplayCondition_near: distanceDisplayCondition_near,
+          },
+          attr: option.data,
+        };
+
+        switch (option.type) {
+          case "line":
+            config.style.materialType = "Color";
+            break;
+          case "dash":
+            config.style.materialType = "PolylineDash";
+            config.style.materialOptions = {
+              color: option.color,
+              gapColor: option.dashColor,
+              dashPattern: option.dashPattern,
+            };
+            break;
+          case "flicker":
+            config.style.materialType = "LineFlicker";
+            config.style.materialOptions = {
+              color: option.color,
+              speed: option.speed,
+            };
+            break;
+          case "flow":
+            config.style.materialType = "LineFlow";
+            config.style.materialOptions = {
+              color: option.color,
+              image: option.image,
+              repeat: new Cesium.Cartesian2(option.repeat[0], option.repeat[1]),
+              speed: option.speed,
+            };
+            break;
+          case "arrow":
+            config.style.materialType = "PolylineArrow";
+            config.style.materialOptions = {
+              color: option.color,
+            };
+            break;
+        }
+      }
+
+      return config;
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.graphic.setOptions(this.config);
+    }
+
+    // flyTo(option = {}) {
+    //   let config = {}
+    //   if(option.height){
+    //     config.scale = this.calculateScaleFromHeight(this.graphic, option.height)
+    //   }
+    //   console.log(config)
+    //   this.graphic.flyTo(config);
+    // }
+
+    openPopup() {
+      this.graphic.openPopup();
+    }
+
+    /**
+     * 判断给定的经纬度坐标是否在某个多边形内
+     *
+     * @param {number} lng - 经度
+     * @param {number} lat - 纬度
+     * @returns {boolean} 返回一个布尔值，如果给定的坐标在多边形内则为true，否则为false
+     */
+    isInPoly(lng: any, lat: any) {
+      return this.graphic.isInPoly(new mars3d.LngLatPoint(lng, lat));
+    }
+  }
+
+  class gaode_class extends gaode_entity {
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    graphic: any = null;
+
+    constructor(option: any) {
+      super(hnMap);
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.graphic = new AMap.Polyline(this.config);
+    }
+
+    formatConfig(option: any) {
+      let amapPosition = wgs84ToGcj02Format(option.position);
+      return {
+        path: amapPosition,
+        strokeColor: option.color,
+        strokeOpacity: option.opacity,
+        strokeWeight: option.width,
+        outlineColor: option.outlineColor,
+        borderWeight: option.outlineWidth,
+        extData: {
+          id: option.id,
+          data: option.data,
+        },
+      };
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.graphic.setOptions(this.config);
+      this.graphic.setPath(this.config.path);
+    }
+  }
+  class siji_class extends siji_entity {
+    type: any = "line";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    graphic: any = null;
+    intervalId: any = null;
+    constructor(option: any) {
+      //   debugger;
+      super(hnMap);
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      // this.graphic = hnMap.map.map.addLayer(this.config);
+    }
+    flickers(speed: number, isShow: boolean) {
+      if (this.intervalId !== null) {
+        clearInterval(this.intervalId);
+      }
+      let opacity = isShow ? 1 : 0;
+      const that = this;
+      this.intervalId = setInterval(() => {
+        isShow = !isShow;
+        opacity = isShow ? 1 : 0;
+        that.config["line-opacity"] = opacity;
+      }, speed);
+    }
+
+    formatConfig(option: any) {
+      let config: any = {};
+      config = {
+        id: option.id,
+        type: "line",
+        source: {
+          type: "geojson",
+          data: {
+            type: "FeatureCollection",
+            features: [
+              {
+                type: "Feature",
+                geometry: {
+                  type: "LineString",
+                  coordinates: option.position,
+                },
+                properties: {
+                  id: option.id,
+                  ...option.data,
+                },
+              },
+            ],
+          },
+        },
+        layout: {
+          "line-cap": "round",
+          "line-join": "round",
+        },
+        paint: {
+          "line-color": option.type == "dash" ? option.dashColor : option.color,
+          "line-width": Number(option.width),
+          "line-opacity": Number(option.opacity),
+        },
+      };
+      let isShow: boolean = true;
+      switch (option.type) {
+        case "line":
+          break;
+        case "dash":
+          config.paint["line-dasharray"] = [
+            option.dashLength * 1,
+            option.dashLength * 1,
+          ];
+
+          break;
+        case "flicker":
+          this.flickers(option.speed * 1, isShow); // 调用 flickers 方法
+          break;
+        case "flow":
+          break;
+        case "arrow":
+          break;
+      }
+
+      return config;
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      for (let key in this.config) {
+        if (this.config.hasOwnProperty(key)) {
+          if (key == "paint") {
+            for (let key2 in this.config[key]) {
+              if (this.config[key].hasOwnProperty(key2)) {
+                // 遍历 paint 属性
+                hnMap.map.map.setPaintProperty(
+                  this.config.id,
+                  key2,
+                  key2 == "line-opacity" || key2 == "line-width"
+                    ? Number(this.config[key][key2])
+                    : this.config[key][key2]
+                );
+                if (option.type == "dash") {
+                  hnMap.map.map.setPaintProperty(
+                    this.config.id,
+                    "line-dasharray",
+                    [option.dashLength, option.dashLength]
+                  );
+                }
+                // else {
+                //   hnMap.map.map.setPaintProperty(
+                //     this.config.id,
+                //     "line-dasharray",
+                //     [0, 0]
+                //   );
+                // }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    openPopup() {
+      this.graphic.openPopup();
+    }
+
+    /**
+     * 判断给定的经纬度坐标是否在某个多边形内
+     *
+     * @param {number} lng - 经度
+     * @param {number} lat - 纬度
+     * @returns {boolean} 返回一个布尔值，如果给定的坐标在多边形内则为true，否则为false
+     */
+    isInPoly(lng: any, lat: any) {
+      return this.graphic.isInPoly(new mars3d.LngLatPoint(lng, lat));
+    }
+    dispose() {
+      if (this.intervalId) {
+        clearInterval(this.intervalId); // 清除定时器
+        this.intervalId = null; // 重置定时器ID
+      }
+    }
+  }
+
+  const fn: any = {
+    mars3d: mars3d_class,
+    gaode: gaode_class,
+    siji: siji_class,
+  };
+
+  return fn[hnMap.mapType];
+};

package/src/graphic/numPoint.ts

@@ -0,0 +1,290 @@
+import {deepMerge, getLevelMiddleHeight, wgs84ToGcj02Format} from "../util";
+import mars3d_entity from "../base/mars3d_entity";
+import gaode_entity from "../base/gaode_entity";
+import siji_entity from "../base/siji_entity";
+export default (hnMap: any) => {
+  const defaultOption = {
+    id: "",
+    position: [],
+    num: 0,
+    color: "#ffffff",
+    opacity: 1,
+    size: 6,
+    fontColor: "#000000",
+    scale: 1,
+    scaleByDistance: true,
+    distanceDisplayCondition: false,
+    distanceDisplayCondition_far: 1,
+    distanceDisplayCondition_near: 18,
+    data: null,
+  };
+
+  class mars3d_class extends mars3d_entity {
+    type: any = "numPoint";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    graphic: any = null;
+
+    constructor(option: any) {
+      super(hnMap);
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.graphic = new mars3d.graphic.BillboardEntity(this.config);
+    }
+
+    formatConfig(option: any) {
+      const distanceDisplayCondition_far = getLevelMiddleHeight(option.distanceDisplayCondition_far)
+      const distanceDisplayCondition_near = getLevelMiddleHeight(option.distanceDisplayCondition_near)
+      return {
+        id: option.id,
+        position: option.position,
+        style: {
+          image: mars3d.Util.getCircleImage(option.num, {
+            color: option.color,
+            radius: option.size / 2,
+            borderWidth: 0,
+            fontColor: option.fontColor,
+          }),
+          scale: option.scale,
+          clampToGround: !option.position[2],
+          scaleByDistance: option.scaleByDistance,
+          distanceDisplayCondition: option.distanceDisplayCondition,
+          distanceDisplayCondition_far: distanceDisplayCondition_far,
+          distanceDisplayCondition_near: distanceDisplayCondition_near,
+        },
+        attr: option.data,
+      };
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.graphic.setOptions(this.config);
+    }
+  }
+
+  class gaode_class extends gaode_entity {
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    graphic: any = null;
+
+    constructor(option: any) {
+      super(hnMap);
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.graphic = new AMap.Marker(this.config);
+    }
+
+    formatConfig(option: any) {
+      const amapPosition = wgs84ToGcj02Format(option.position);
+      var markerContent = `<div style="
+            background-color: ${option.color || "#ffff00"};
+            font-size: ${option.size / 2}px;
+            border-radius: 50%;
+            width: ${option.size}px;
+            height: ${option.size}px;
+            text-align: center;
+            line-height: ${option.size}px;
+            color: ${option.fontColor};"
+        >${option.num}</div>`;
+      return {
+        id: option.id,
+        position: new AMap.LngLat(amapPosition[0], amapPosition[1]),
+        content: markerContent,
+        anchor: "top-center",
+        offset: [0, -20],
+        extData: {
+          id: option.id,
+          data: option.data,
+        },
+      };
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.graphic.setOptions(this.config);
+    }
+  }
+
+  class siji_class extends siji_entity {
+    type: any = "numPoint";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    configLabel: any = null;
+
+    constructor(option: any) {
+      super(hnMap);
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.configLabel = this.formatConfigNum(this.option);
+    }
+
+    formatConfig(option: any) {
+      let config: any = {};
+      config = {
+        id: option.id,
+        type: "circle",
+        source: {
+          type: "geojson",
+          data: {
+            type: "FeatureCollection",
+            features: [
+              {
+                type: "Feature",
+                geometry: {
+                  type: "Point",
+                  coordinates: option.position,
+                },
+                properties: {
+                  name: option.text,
+                },
+              },
+            ],
+          },
+        },
+        paint: {
+          "circle-opacity": Number(option.opacity),
+          "circle-radius": Number(option.size),
+          "circle-color": option.color,
+        }, // 填充样式
+      };
+
+      return config;
+    }
+
+    formatConfigNum(option: any) {
+      let configLabel: any = {};
+      configLabel = {
+        id: "num_" + option.id,
+        type: "symbol",
+        source: {
+          type: "geojson",
+          data: {
+            type: "FeatureCollection",
+            features: [
+              {
+                type: "Feature",
+                geometry: {
+                  type: "Point",
+                  coordinates: option.position,
+                },
+                properties: {
+                  name: option.num,
+                },
+              },
+            ],
+          },
+        },
+        layout: {
+          "icon-anchor": "center",
+          "text-field": "{name}",
+          "text-size": Number(option.size),
+          "text-anchor": "center", // 顶部对齐
+        }, // 文本样式
+        paint: {
+          "text-color": option.fontColor,
+        }, // 填充样式
+      };
+
+      return configLabel;
+    }
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.configLabel = this.formatConfigNum(this.option);
+
+      let mySource = hnMap.map.map.getSource(this.config.id);
+      mySource.setData({
+        type: "FeatureCollection",
+        features: [
+          {
+            type: "Feature",
+            properties: { name: this.option.text },
+            geometry: {
+              type: "Point",
+              coordinates: this.option.position,
+            },
+          },
+        ],
+      });
+      for (let key in this.config) {
+        if (this.config.hasOwnProperty(key)) {
+          if (key == "paint") {
+            for (let key2 in this.config[key]) {
+              if (this.config[key].hasOwnProperty(key2)) {
+                // 遍历 paint 属性
+                hnMap.map.map.setPaintProperty(
+                  this.config.id,
+                  key2,
+                  key2 == "circle-opacity"
+                    ? Number(this.config[key][key2])
+                    : this.config[key][key2]
+                );
+              }
+            }
+          }
+        }
+      }
+      //  数字更改
+      let mySource_num = hnMap.map.map.getSource(this.configLabel.id);
+      mySource_num.setData({
+        type: "FeatureCollection",
+        features: [
+          {
+            type: "Feature",
+            properties: { name: this.option.num },
+            geometry: {
+              type: "Point",
+              coordinates: this.option.position,
+            },
+          },
+        ],
+      });
+      for (let key in this.configLabel) {
+        if (this.configLabel.hasOwnProperty(key)) {
+          if (key == "paint") {
+            for (let key2 in this.configLabel[key]) {
+              if (this.configLabel[key].hasOwnProperty(key2)) {
+                // 遍历 paint 属性
+                hnMap.map.map.setPaintProperty(
+                  this.configLabel.id,
+                  key2,
+                  this.configLabel[key][key2]
+                );
+              }
+            }
+          }
+          if (key == "layout") {
+            for (let key2 in this.configLabel[key]) {
+              if (this.configLabel[key].hasOwnProperty(key2)) {
+                // 遍历 layout 属性
+                hnMap.map.map.setLayoutProperty(
+                  this.configLabel.id,
+                  key2,
+                  key2 == "text-size"
+                    ? Number(this.configLabel[key][key2])
+                    : this.configLabel[key][key2]
+                );
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  const fn: any = {
+    mars3d: mars3d_class,
+    gaode: gaode_class,
+    siji: siji_class,
+  };
+
+  return fn[hnMap.mapType];
+};