hn-map 1.0.10 → 1.1.1

package/src/graphic/imagePoint.ts

@@ -0,0 +1,237 @@
+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";
+
+const HorizontalOrigin: any = {
+  center: 0,
+  left: 1,
+  right: -1,
+};
+
+const VerticalOrigin: any = {
+  center: 0,
+  top: -1,
+  bottom: 1,
+};
+
+export default (hnMap: any) => {
+  const defaultOption = {
+    id: "",
+    position: [],
+    image: "",
+    height: 30,
+    width: 30,
+    rotation: 0,
+    horizontalOrigin: "center",
+    verticalOrigin: "center",
+    text: "",
+    fontSize: 12,
+    color: "#000000",
+    offset: [0, 0],
+    scaleByDistance: true,
+    distanceDisplayCondition: false,
+    distanceDisplayCondition_far: 1,
+    distanceDisplayCondition_near: 18,
+    data: null,
+  };
+
+  class mars3d_class extends mars3d_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 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: {
+          width: option.width,
+          height: option.height,
+          image: option.image,
+          label: {
+            text: option.text,
+            font_size: option.fontSize,
+            color: option.color,
+            pixelOffset: option.offset,
+            scaleByDistance: option.scaleByDistance,
+            distanceDisplayCondition: option.distanceDisplayCondition,
+            distanceDisplayCondition_far: distanceDisplayCondition_far,
+            distanceDisplayCondition_near: distanceDisplayCondition_near,
+            visibleDepth: false,
+          },
+          scaleByDistance: option.scaleByDistance,
+          distanceDisplayCondition: option.distanceDisplayCondition,
+          distanceDisplayCondition_far: option.distanceDisplayCondition_far,
+          distanceDisplayCondition_near: option.distanceDisplayCondition_near,
+          clampToGround: !option.position[2],
+          rotationDegree: option.rotation,
+          horizontalOrigin: HorizontalOrigin[option.horizontalOrigin],
+          verticalOrigin: VerticalOrigin[option.verticalOrigin],
+          visibleDepth: true,
+        },
+        attr: option.data,
+      };
+    }
+
+    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.radius = option.height
+    //   }
+    //
+    //   this.graphic.flyTo(config);
+    // }
+
+    openPopup() {
+      this.graphic.openPopup();
+    }
+  }
+
+  class gaode_class extends gaode_entity {
+    type: any = "imagePoint";
+    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) {
+      let amapPosition = wgs84ToGcj02Format(option.position);
+      const content = `<div style="color:${option.color};font-size:${option.fontSize} ">${option.text}</div>`;
+      return {
+        extData: {
+          id: option.id,
+          data: option.data,
+        },
+        position: new AMap.LngLat(amapPosition[0], amapPosition[1]),
+        icon: new AMap.Icon({
+          image: option.image,
+          imageSize: new AMap.Size(option.height, option.width),
+          size: new AMap.Size(option.height, option.width),
+        }),
+        angle: 360 - option.rotation,
+        anchor: "center",
+        label: {
+          direction: "center",
+          offset: new AMap.Pixel(option.offset[0], option.offset[1]), //设置文本标注偏移量
+          content: content,
+        },
+      };
+    }
+  }
+
+  class siji_class extends siji_entity {
+    type: any = "imagePoint";
+    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: any = {};
+
+      config = {
+        id: option.id,
+        type: "symbol",
+        source: {
+          type: "geojson",
+          data: {
+            type: "FeatureCollection",
+            features: [
+              {
+                type: "Feature",
+                geometry: {
+                  type: "Point",
+                  coordinates: option.position.map((num:any)=>Number(num)),
+                },
+                properties: {
+                  name: "",
+                },
+              },
+            ],
+          },
+        },
+        layout: {
+          "icon-image": option.id + "_image",
+          "icon-size": Number(option.width) / Number(option.height),
+        },
+      };
+      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: "Point",
+              coordinates: this.option.position.map((num:any)=>Number(num)),
+            },
+          },
+        ],
+      });
+
+      for (let key in this.config) {
+        if (this.config.hasOwnProperty(key)) {
+          if (key == "layout") {
+            for (let key2 in this.config[key]) {
+              if (this.config[key].hasOwnProperty(key2)) {
+                // 遍历 layout 属性
+                hnMap.map.map.setLayoutProperty(
+                  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/label.ts

@@ -0,0 +1,330 @@
+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: "",
+    type: "label",
+    position: [],
+    text: "",
+    fontSize: 16,
+    fontWeight: "normal",
+    fontFamily: "楷体",
+    color: "#000000",
+    background: "",
+    opacity: 1,
+    outline: false,
+    outlineColor: "#ffffff",
+    outlineWidth: 2,
+    outlineOpacity: 1,
+    offset: [0, 0],
+    angle: 0,
+    scaleByDistance: true,
+    distanceDisplayCondition: false,
+    distanceDisplayCondition_far: 1,
+    distanceDisplayCondition_near: 18,
+    data: null,
+  };
+
+  class mars3d_class extends mars3d_entity {
+    type: any = "label";
+    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);
+      if (this.option.type === "label") {
+        this.graphic = new mars3d.graphic.LabelEntity(this.config);
+      } else if (this.option.type === "mapLabel") {
+        this.graphic = new mars3d.graphic.RectangleEntity(this.config);
+      }
+    }
+
+    formatConfig(option: any) {
+      if (option.type === "label") {
+        const position = new mars3d.LngLatPoint(
+          option.position[0],
+          option.position[1],
+          option.position[2] || 0
+        );
+        const distanceDisplayCondition_far = getLevelMiddleHeight(option.distanceDisplayCondition_far)
+        const distanceDisplayCondition_near = getLevelMiddleHeight(option.distanceDisplayCondition_near)
+        return {
+          id: option.id,
+          position: position,
+          style: {
+            text: option.text,
+            color: option.color,
+            opacity: option.opacity,
+            font_size: option.fontSize,
+            font_family: option.fontFamily,
+            outline: option.outline,
+            outlineColor: option.outlineColor,
+            outlineWidth: option.outlineWidth,
+            outlineOpacity: option.outlineOpacity,
+            pixelOffset: option.offset,
+            scaleByDistance: option.scaleByDistance,
+            clampToGround: !option.position[2],
+            distanceDisplayCondition: option.distanceDisplayCondition,
+            distanceDisplayCondition_far: distanceDisplayCondition_far,
+            distanceDisplayCondition_near: distanceDisplayCondition_near,
+            background: !!option.background,
+            backgroundColor: option.background,
+          },
+          attr: option.data,
+        };
+      } else if (option.type === "mapLabel") {
+        const p1 = new mars3d.LngLatPoint(
+          option.position[0][0],
+          option.position[0][1]
+        );
+        const p2 = new mars3d.LngLatPoint(
+          option.position[1][0],
+          option.position[1][1]
+        );
+        return {
+          id: option.id,
+          positions: [p1, p2],
+          style: {
+            clampToGround: !option.position[0][2],
+            materialOptions: {
+              text: option.text,
+              font_family: "楷体",
+              color: option.color,
+              font_weight: option.fontWeight,
+              font_size: option.fontSize,
+              background: !!option.background,
+              stroke: option.outline,
+              strokeColor: option.outlineColor,
+              strokeWidth: option.outlineWidth,
+              opacity: option.opacity,
+            },
+            materialType: mars3d.MaterialType.Text,
+            rotationDegree: option.angle,
+            distanceDisplayCondition: option.distanceDisplayCondition,
+            distanceDisplayCondition_far: option.distanceDisplayCondition_far,
+            distanceDisplayCondition_near: option.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.Text(this.config);
+    }
+
+    formatConfig(option: any) {
+      let amapPosition = wgs84ToGcj02Format(option.position);
+      return {
+        extData: {
+          id: option.id,
+          data: option.data,
+        },
+        text: option.text,
+        anchor: "center", // 设置文本标记锚点
+        draggable: true,
+        cursor: "pointer",
+        style: {
+          border: 0,
+          "text-align": "center",
+          "font-size": option.fontSize,
+          color: option.color,
+          "background-color": option.background,
+        },
+        position: [amapPosition[0], amapPosition[1]],
+        offset: option.offset,
+      };
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.graphic.setText(this.config.text);
+      this.graphic.setStyle(this.config.style);
+      this.graphic.setPosition(this.config.position);
+    }
+  }
+
+  class siji_class extends siji_entity {
+    type: any = "label";
+    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: "symbol",
+        source: {
+          type: "geojson",
+          data: {
+            type: "FeatureCollection",
+            features: [],
+          },
+        },
+        layout: {
+          "text-field": "{name}",
+          "text-size": Number(option.fontSize),
+          "text-anchor": "top", // 顶部对齐
+          "text-offset": this.pixelOffsetToTextOffset(option.offset,option.fontSize),
+          "text-max-width": 8,
+          "text-font": ["Microsoft YaHei Regular"],
+        }, // 文本样式
+        paint: {
+          "text-color": option.color,
+          "text-halo-color": option.outlineColor, // 文字外边线颜色
+          "text-halo-width": option.outlineWidth, // 文字外边线宽度
+        }, // 填充样式
+      };
+      if (option.type === "label") {
+        config.source.data.features[0] = {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: option.position.map((num:any)=>Number(num)),
+          },
+          properties: {
+            name: option.text,
+          },
+        };
+      } else if (option.type === "mapLabel") {
+        option.position.forEach((item: any) => {
+          config.source.data.features.push({
+            type: "Feature",
+            properties: { name: option.text },
+            geometry: {
+              type: "Point",
+              coordinates: item,
+            },
+          });
+        });
+      }
+
+      return config;
+    }
+
+    /**
+     * 将 pixelOffset 转换为 text-offset (ems)
+     * @param {Array<number>} pixelOffset - [x, y] 像素偏移
+     * @param {number} textSizePx - 字体大小（px）
+     * @returns {Array<number>} text-offset in ems
+     */
+    pixelOffsetToTextOffset(pixelOffset:any, textSizePx:any): Array<number> {
+      return [
+        pixelOffset[0] / textSizePx,
+        pixelOffset[1] / textSizePx
+      ];
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      let mySource = hnMap.map.map.getSource(this.config.id);
+      if (this.option.type == "label") {
+        mySource.setData({
+          type: "FeatureCollection",
+          features: [
+            {
+              type: "Feature",
+              properties: { name: this.option.text },
+              geometry: {
+                type: "Point",
+                coordinates: this.option.position.map((num:any)=>Number(num)),
+              },
+            },
+          ],
+        });
+      } else if (this.option.type == "mapLabel") {
+        // 构建新的数据源对象
+        const sourceObj = {
+          type: "FeatureCollection",
+          features: this.option.position.map((item: any) => ({
+            type: "Feature",
+            properties: { name: this.option.text },
+            geometry: {
+              type: "Point",
+              coordinates: item,
+            },
+          })),
+        };
+
+        // 更新数据源
+        mySource.setData(sourceObj);
+      }
+
+      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 == "text-halo-width"
+                    ? Number(this.config[key][key2])
+                    : this.config[key][key2]
+                );
+              }
+            }
+          }
+          if (key == "layout") {
+            for (let key2 in this.config[key]) {
+              if (this.config[key].hasOwnProperty(key2)) {
+                // 遍历 layout 属性
+                hnMap.map.map.setLayoutProperty(
+                  this.config.id,
+                  key2,
+                  key2 === "text-size"
+                    ? 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];
+};