hn-map 1.0.9 → 1.1.0

package/src/graphic/point.ts

@@ -0,0 +1,234 @@
+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: [],
+    color: "#ffffff",
+    opacity: 1,
+    size: 6,
+    text: "",
+    fontSize: 12,
+    fontColor: "#ffffff",
+    fontOpacity: 1,
+    fontOffset: [0, 0],
+    outline: false,
+    outlineColor: "#ffffff",
+    outlineWidth: 20,
+    outlineOpacity: 0.5,
+    textOutline: false,
+    textOutlineColor: "#000000",
+    textOutlineOpacity: 0.6,
+    textOutlineWidth: 2,
+    textBackgroundColor: "",
+    textBackgroundOpacity: 0.5,
+    scaleByDistance: true,
+    distanceDisplayCondition: false,
+    distanceDisplayCondition_far: 1,
+    distanceDisplayCondition_near: 18,
+    data: null,
+  };
+
+  class mars3d_class extends mars3d_entity {
+    type: any = "point";
+    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.PointEntity(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: {
+          color: option.color,
+          opacity: option.opacity,
+          pixelSize: option.size,
+          outline: option.outline,
+          outlineColor: option.outlineColor,
+          outlineWidth: option.outlineWidth,
+          outlineOpacity: option.outlineOpacity,
+          clampToGround: !option.position[2],
+          scaleByDistance: option.scaleByDistance,
+          distanceDisplayCondition: option.distanceDisplayCondition,
+          distanceDisplayCondition_far: distanceDisplayCondition_far,
+          distanceDisplayCondition_near: distanceDisplayCondition_near,
+          label: {
+            text: option.text,
+            font_size: option.fontSize,
+            color: option.fontColor,
+            opacity: option.fontOpacity,
+            outline: option.textOutline,
+            outlineColor: option.textOutlineColor,
+            outlineOpacity: option.textOutlineOpacity,
+            outlineWidth: option.textOutlineWidth,
+            background: !!option.textBackgroundColor,
+            backgroundColor: option.textBackgroundColor,
+            backgroundOpacity: option.textBackgroundOpacity,
+            pixelOffset: option.fontOffset,
+            scaleByDistance: option.fontScaleByDistance,
+            distanceDisplayCondition: option.fontDistanceDisplayCondition,
+            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.CircleMarker(this.config);
+    }
+
+    formatConfig(option: any) {
+      let amapPosition = wgs84ToGcj02Format(option.position);
+      return {
+        center: amapPosition,
+        radius: option.size / 2,
+        strokeColor: option.outlineColor,
+        strokeOpacity: option.outlineOpacity,
+        strokeWeight: option.outlineWidth,
+        fillColor: option.color,
+        fillOpacity: option.opacity,
+        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.setCenter(this.config.center);
+    }
+  }
+
+  class siji_class extends siji_entity {
+    type: any = "point";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+
+    constructor(option: any) {
+      super(hnMap);
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(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: {
+                  id: option.id,
+                  ...option.data,
+                },
+              },
+            ],
+          },
+        },
+        paint: {
+          "circle-opacity": Number(option.opacity),
+          "circle-radius": Number(option.size),
+          "circle-color": option.color,
+          "circle-stroke-color": option.outlineColor,
+          "circle-stroke-width": option.outlineWidth,
+          "circle-stroke-opacity": Number(option.outlineOpacity), // 边框样式
+        }, // 填充样式
+      };
+
+      return config;
+    }
+
+    set(option: any) {
+      console.log("=====set point====", option);
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(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" || key2 == "circle-stroke-opacity"
+                    ? Number(this.config[key][key2])
+                    : this.config[key][key2]
+                );
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  const fn: any = {
+    mars3d: mars3d_class,
+    gaode: gaode_class,
+    siji: siji_class,
+  };
+
+  return fn[hnMap.mapType];
+};

package/src/graphic/polygon.ts

@@ -0,0 +1,188 @@
+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: [],
+    color: "#ff0000",
+    opacity: 1,
+    outline: false,
+    outlineWidth: 2,
+    outlineColor: "#ffffff",
+    outlineOpacity: 1,
+    scaleByDistance: true,
+    distanceDisplayCondition: false,
+    distanceDisplayCondition_far: 1,
+    distanceDisplayCondition_near: 18,
+    data: null,
+  };
+
+  class mars3d_class extends mars3d_entity {
+    type: any = "polygon";
+    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.PolygonEntity(this.config);
+    }
+
+    formatConfig(option: any) {
+      const distanceDisplayCondition_far = getLevelMiddleHeight(option.distanceDisplayCondition_far)
+      const distanceDisplayCondition_near = getLevelMiddleHeight(option.distanceDisplayCondition_near)
+      return {
+        id: option.id,
+        positions: option.position,
+        style: {
+          color: option.color,
+          opacity: option.opacity,
+          outline: option.outline,
+          outlineColor: option.outlineColor,
+          outlineWidth: option.outlineWidth,
+          outlineOpacity: option.outlineOpacity,
+          scaleByDistance: option.scaleByDistance,
+          distanceDisplayCondition: option.distanceDisplayCondition,
+          distanceDisplayCondition_far: distanceDisplayCondition_far,
+          distanceDisplayCondition_near: distanceDisplayCondition_near,
+          clampToGround: option.position[0] && !option.position[0][2],
+        },
+        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.Polygon(this.config);
+    }
+
+    formatConfig(option: any) {
+      const amapPosition = wgs84ToGcj02Format(option.position);
+      return {
+        path: amapPosition,
+        fillColor: option.color,
+        fillOpacity: option.opacity,
+        strokeColor: option.outlineColor,
+        strokeOpacity: option.outline ? option.outlineOpacity : 0,
+        strokeWeight: option.outline ? option.outlineWidth : 0,
+        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 = "polygon";
+    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);
+    }
+
+    formatConfig(option: any) {
+      let config = {
+        id: option.id,
+        type: "fill",
+        source: {
+          type: "geojson",
+          data: {
+            type: "FeatureCollection",
+            features: [
+              {
+                type: "Feature",
+                geometry: {
+                  type: "Polygon",
+                  coordinates: option.position,
+                },
+              },
+            ],
+          },
+        },
+
+        paint: {
+          "fill-color": option.color, // 填充颜色覆盖drawColor设置的颜色，呈现绿色
+          "fill-opacity": Number(option.opacity),
+        },
+      };
+      return config;
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      let mySource = hnMap.map.map.getSource(this.config.id);
+      mySource.setData({
+        type: "FeatureCollection",
+        features: [
+          {
+            type: "Feature",
+            geometry: {
+              type: "Polygon",
+              coordinates: [option.position], //三层数组[[[0,0],[0,0]]]
+            },
+          },
+        ],
+      });
+      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,
+                  this.config[key][key2]
+                );
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  const fn: any = {
+    mars3d: mars3d_class,
+    gaode: gaode_class,
+    siji: siji_class,
+  };
+
+  return fn[hnMap.mapType];
+};

package/src/graphic/rectangle.ts

@@ -0,0 +1,202 @@
+import {
+  deepMerge,
+  wgs84ToGcj02Format,
+  createRectangleCoordinates, getLevelMiddleHeight,
+} 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: [],
+    color: "#ff0000",
+    opacity: 1,
+    outline: false,
+    outlineWidth: 2,
+    outlineColor: "#ffffff",
+    outlineOpacity: 1,
+    scaleByDistance: true,
+    distanceDisplayCondition: false,
+    distanceDisplayCondition_far: 1,
+    distanceDisplayCondition_near: 18,
+    data: null,
+  };
+
+  class mars3d_class extends mars3d_entity {
+    type: any = "retangle";
+    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.RectangleEntity(this.config);
+    }
+
+    formatConfig(option: any) {
+      const distanceDisplayCondition_far = getLevelMiddleHeight(option.distanceDisplayCondition_far)
+      const distanceDisplayCondition_near = getLevelMiddleHeight(option.distanceDisplayCondition_near)
+      return {
+        id: option.id,
+        positions: option.position,
+        style: {
+          color: option.color,
+          opacity: option.opacity,
+          outline: option.outline,
+          outlineColor: option.outlineColor,
+          outlineWidth: option.outlineWidth,
+          outlineOpacity: option.outlineOpacity,
+          scaleByDistance: option.scaleByDistance,
+          distanceDisplayCondition: option.distanceDisplayCondition,
+          distanceDisplayCondition_far: distanceDisplayCondition_far,
+          distanceDisplayCondition_near: distanceDisplayCondition_near,
+          clampToGround: !option.position[0][2],
+        },
+        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.Rectangle(this.config); //创建矩形
+    }
+
+    formatConfig(option: any) {
+      const amapPosition = wgs84ToGcj02Format(option.position); //坐标转换
+      const southWest = new AMap.LngLat(amapPosition[0][0], amapPosition[0][1]); //
+      const northEast = new AMap.LngLat(amapPosition[1][0], amapPosition[1][1]); //
+      const bounds = new AMap.Bounds(southWest, northEast); // 创建矩形
+      return {
+        bounds: bounds,
+        fillColor: option.color,
+        fillOpacity: option.opacity,
+        strokeColor: option.outlineColor,
+        strokeOpacity: option.outline ? option.outlineOpacity : 0,
+        strokeWeight: option.outline ? option.outlineWidth : 0,
+        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.setBounds(this.config.bounds);
+    }
+  }
+  class siji_class extends siji_entity {
+    type: any = "rectangle";
+    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);
+    }
+
+    formatConfig(option: any) {
+      let RectanglePosition = createRectangleCoordinates(
+        option.position[0],
+        option.position[1]
+      );
+      console.log([RectanglePosition], "========RectanglePosition=======");
+      let config = {
+        id: option.id,
+        type: "fill",
+        source: {
+          type: "geojson",
+          data: {
+            type: "FeatureCollection",
+            features: [
+              {
+                type: "Feature",
+                geometry: {
+                  type: "Polygon",
+                  coordinates: [RectanglePosition],
+                },
+              },
+            ],
+          },
+        },
+
+        paint: {
+          "fill-color": option.color, // 填充颜色覆盖drawColor设置的颜色，呈现绿色
+          "fill-opacity": Number(option.opacity),
+        },
+      };
+      return config;
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      let RectanglePosition = createRectangleCoordinates(
+        option.position[0],
+        option.position[1]
+      );
+      let mySource = hnMap.map.map.getSource(this.config.id);
+      mySource.setData({
+        type: "FeatureCollection",
+        features: [
+          {
+            type: "Feature",
+            geometry: {
+              type: "Polygon",
+              coordinates: [RectanglePosition], //三层数组[[0,0],[0,0]]
+            },
+          },
+        ],
+      });
+      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,
+                  this.config[key][key2]
+                );
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  const fn: any = {
+    mars3d: mars3d_class,
+    gaode: gaode_class,
+    siji: siji_class,
+  };
+  return fn[hnMap.mapType];
+};