hn-map 1.0.10 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hn-map",
-  "version": "1.0.10",
+  "version": "1.1.1",
   "description": "hn-map集成mars3d、高德、思极",
   "main": "dist/index.js",
   "author": "庞大仙",
@@ -12,24 +12,27 @@
     "admin-template",
     "management-system"
   ],
-  "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@rollup/plugin-alias": "^5.1.1",
-    "rollup-plugin-copy": "^3.5.0"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.15.0",
+    "@babel/preset-typescript": "^7.27.1",
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^13.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "jest": "^27.0.6",
     "rollup": "^2.56.2",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.8.3"
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "lib.zip"
   ],
   "engines": {
     "node": ">=8.9",

package/src/base/gaode_entity.ts

@@ -0,0 +1,61 @@
+export default class gaode_entity {
+    infoWindow: any = null
+    hnMap: any = null
+    config: any = null
+    graphic: any = null
+
+    constructor(hnMap: any) {
+        this.hnMap = hnMap
+    }
+
+    // 添加属性弹窗
+    addPopupByAttr() {
+        this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
+
+        const handleClick = (e: any) => {
+            const data = this.config.extData.data
+            let content = ''
+            for (const key in data) {
+                content += `<div>${key}: ${data[key]}</div>`
+            }
+            this.infoWindow.setContent(content);
+            this.infoWindow.open(this.hnMap.map.map, e.lnglat);
+        }
+
+        this.graphic.on('click', handleClick)
+    }
+
+    // 添加自定义dom弹窗
+    addCustomPopup(getCustomDom: any) {
+        this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
+
+        const handleClick = (e:any ) => {
+            const data = this.config.extData.data
+            const dom = getCustomDom(data)
+            this.infoWindow.setContent(dom);
+            this.infoWindow.open(this.hnMap.map.map, e.lnglat);
+        }
+
+        this.graphic.on('click', handleClick)
+    }
+
+    flyTo() {
+
+        if (this.graphic.getCenter) {
+            this.hnMap.map.map.setCenter(this.graphic.getCenter());
+        }
+
+        if (this.graphic.getPosition) {
+            this.hnMap.map.map.setCenter(this.graphic.getPosition());
+        }
+
+        if (this.graphic.getBounds) {
+            const bounds = this.graphic.getBounds();
+            this.hnMap.map.map.setBounds(bounds);
+        }
+    }
+
+    destroy() {
+        this.graphic.remove()
+    }
+}

package/src/base/mars3d_entity.ts

@@ -0,0 +1,64 @@
+import {getMapRangeHeightByLevel} from "../util";
+
+export default class mars3d_entity {
+    option: any = null;
+    event: any = {};
+    graphic: any = null;
+
+    constructor(hnMap: any) {
+        this.event = {};
+    }
+
+    // 添加属性弹窗
+    addPopupByAttr() {
+        this.graphic.bindPopup((event: any) => {
+            const data = event.graphic.attr;
+            return mars3d.Util.getTemplateHtml({
+                title: "详情",
+                template: "all",
+                attr: data,
+            });
+        });
+    }
+
+    // 添加自定义dom弹窗
+    addCustomPopup(getCustomDom: any) {
+        this.graphic.bindPopup(
+            async (event: any) => {
+                if (event.graphic.attr) {
+                    const data = event.graphic.attr || {};
+                    return await getCustomDom(data);
+                }
+            },
+            {offsetY: -20}
+        );
+    }
+
+    flyTo(option = {}) {
+        this.graphic.flyTo(option);
+    }
+
+    destroy() {
+        console.log(this.graphic, "=====this.graphic===");
+        this.graphic.destroy();
+    }
+
+    on(eventType: any, callback: any) {
+        this.off(eventType);
+        switch (eventType) {
+            case "click":
+                this.event[eventType] = () => {
+                    callback(this.option.data);
+                };
+                break;
+        }
+        this.graphic.on(eventType, this.event[eventType]);
+    } // 监听事件
+
+    off(eventType: any) {
+        if (this.event[eventType]) {
+            this.graphic.off(eventType, this.event[eventType]);
+            delete this.event[eventType];
+        }
+    }
+}

package/src/base/siji_entity.ts

@@ -0,0 +1,118 @@
+export default class siji_entity {
+  event: any = {};
+  infoWindow: any = null;
+  hnMap: any = null;
+  config: any = null;
+  graphic: any = null;
+  option: any = null;
+  type: any = null;
+  show:boolean = false;
+
+  constructor(hnMap: any) {
+    this.hnMap = hnMap;
+    this.event = {};
+    this.show = false;
+  }
+
+  // 添加属性弹窗
+  addPopupByAttr() {
+    alert("添加属性弹窗");
+    console.log(this.config);
+    console.log(this.graphic);
+    // 如果已有弹窗，先关闭
+    this.removePopup();
+
+    this.infoWindow = new SGMap.Popup({
+      offset: { bottom: [0, 0] },
+      className: "my-popupAttr-class",
+    });
+
+    const handleClick = (e: any) => {
+      alert("添加属性弹窗111");
+      // const data = e.features[0].properties;
+      const data = this.option.data;
+      // 创建弹窗内容
+      let content = "";
+      for (const key in data) {
+        content += `<div>${key}: ${data[key]}</div>`;
+      }
+
+      this.infoWindow.setHTML(content);
+      this.infoWindow.setLngLat(e.lngLat).addTo(this.hnMap.map.map);
+    };
+
+    this.hnMap.map.map.on("click", this.config.id, handleClick);
+  }
+
+  // 添加自定义dom弹窗
+  addCustomPopup(getCustomDom: any) {
+    this.removePopup();
+
+    this.infoWindow = new SGMap.Popup({
+      offset: { bottom: [0, 0] },
+      className: "my-customPopup-class",
+    });
+
+    const handleClick = (e: any) => {
+      const data = this.option.data;
+      // const data = e.features[0].properties;
+      const dom = getCustomDom(data);
+      this.infoWindow.setHTML(dom);
+      this.infoWindow.setLngLat(e.lngLat).addTo(this.hnMap.map.map);
+    };
+
+    this.hnMap.map.map.on("click", this.config.id, handleClick);
+  }
+
+  // 弹窗删除
+  removePopup() {
+    if (this.infoWindow) {
+      this.infoWindow.remove();
+    }
+  }
+
+  flyTo() {
+    let zoom = this.hnMap.map.map.getZoom();
+    this.hnMap.map.map.flyTo({
+      duration: 1000, // 持续时间
+      zoom: zoom,
+      center:
+        this.type == "line" ||
+        this.type == "dash" ||
+        this.type == "flicker" ||
+        this.type == "flow" ||
+        this.type == "arrow" ||
+        this.type == "mapLabel" ||
+        this.type == "polygon" ||
+        this.type == "rectangle"
+          ? this.option.position[0]
+          : this.type == "route"
+          ? [this.option.position[0][0], this.option.position[0][1]]
+          : this.option.position,
+    });
+  }
+
+  destroy() {
+    this.hnMap.map.map.removeLayer(this.config.id);
+    this.hnMap.map.map.removeSource(this.config.id);
+  }
+
+  on(eventType: any, eventId: any, callback: any) {
+    this.off(eventType, eventId);
+    switch (eventType) {
+      case "click":
+        this.event[eventType] = () => {
+          callback(this.option.data);
+        };
+        break;
+    }
+    this.hnMap.map.map.on(eventType, eventId, this.event[eventType]);
+  } // 监听事件
+
+  off(eventType: any, eventId: any) {
+    if (this.event[eventType]) {
+      this.hnMap.map.map.off(eventType, eventId, this.event[eventType]);
+      delete this.event[eventType];
+    }
+  }
+}

package/src/graphic/circle.ts

@@ -0,0 +1,218 @@
+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: "color",
+    radius: 20,
+    color: "#ff0000",
+    opacity: 1,
+    waveCount: 2,
+    waveSpeed: 5,
+    outlineWidth: 0,
+    outlineColor: "#ffffff",
+    outlineOpacity: 1,
+    outlineHighLight: false,
+    outlineHighLightGlowPower: 0.1,
+    outlineHighLightTaperPower: 1,
+    scaleByDistance: true,
+    distanceDisplayCondition: false,
+    distanceDisplayCondition_far: 1,
+    distanceDisplayCondition_near: 18,
+    data: null,
+  };
+
+  class mars3d_class extends mars3d_entity {
+    type: any = "circle";
+    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.CircleEntity(this.config);
+    }
+
+    formatConfig(option: any) {
+      const distanceDisplayCondition_far = getLevelMiddleHeight(option.distanceDisplayCondition_far)
+      const distanceDisplayCondition_near = getLevelMiddleHeight(option.distanceDisplayCondition_near)
+      let config: any = {
+        id: option.id,
+        position: new mars3d.LngLatPoint(
+          option.position[0],
+          option.position[1],
+          option.position[2] || 0
+        ),
+        style: {
+          radius: option.radius || 1,
+          color: option.color,
+          opacity: option.opacity,
+          outline: !!option.outlineWidth,
+          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[2],
+        },
+        attr: option.data,
+      };
+
+      switch (option.type) {
+        case "color":
+          config.style.materialType = mars3d.MaterialType.Color;
+          break;
+        case "wave":
+          config.style.materialType = mars3d.MaterialType.CircleWave;
+          config.style.materialOptions = {
+            color: option.color,
+            count: option.waveCount,
+            speed: option.waveSpeed,
+          };
+          break;
+      }
+
+      if (option.outlineHighLight) {
+        config.style.outlineStyle = {
+          materialType: "PolylineGlow",
+          materialOptions: {
+            color: option.outlineColor,
+            glowPower: option.outlineHighLightGlowPower,
+            taperPower: option.outlineHighLightTaperPower,
+          },
+        };
+      }
+      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)
+    //   }
+    //
+    //   this.graphic.flyTo(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.Circle(this.config);
+    }
+
+    formatConfig(option: any) {
+      let amapPosition = wgs84ToGcj02Format(option.position);
+      return {
+        center: new AMap.LngLat(amapPosition[0], amapPosition[1]),
+        radius: option.radius,
+        fillColor: option.color,
+        fillOpacity: option.opacity,
+        strokeColor: option.outline.color,
+        strokeOpacity: option.outline.show ? option.outline.opacity : 0,
+        strokeWeight: option.outline.show ? option.outline.width : 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.setCenter(this.config.center);
+    }
+  }
+  class siji_class extends siji_entity {
+    type: any = "circle";
+    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 SGMap.DrawCircleHandler(this.config);
+    }
+
+    formatConfig(option: any) {
+      let config: any = {
+        id: option.id,
+        map: hnMap.map.map,
+        // 允许编辑
+        enableEdit: false,
+        // 允许调整圆心
+        canMove: false,
+        // 设置非编辑状态下的图层颜色
+        drawColor: option.outlineColor,
+        // 设置编辑状态下的图层颜色
+        // editColor: "red",
+        style: {
+          // 设置非编辑状态下多边形面的样式
+          polygon: {
+            "fill-color": option.color, // 填充颜色覆盖drawColor设置的颜色，呈现绿色
+            "fill-opacity": Number(option.opacity),
+          },
+        },
+        // 编辑数据
+        featuresList: [],
+      };
+      return config;
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.graphic.remove();
+      this.graphic.clearData();
+      this.graphic = new SGMap.DrawCircleHandler(this.config);
+      let featureArr = {
+        type: "Feature",
+        properties: {
+          centerPoint: option.position,
+          radius: option.radius,
+        },
+        geometry: {
+          type: "Polygon",
+          coordinates: [],
+        },
+      };
+      this.graphic.addFeature(featureArr);
+    }
+  }
+  const fn: any = {
+    mars3d: mars3d_class,
+    gaode: gaode_class,
+    siji: siji_class,
+  };
+  return fn[hnMap.mapType];
+};

package/src/graphic/divPoint.ts

@@ -0,0 +1,133 @@
+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: [],
+    html: "",
+    horizontalOrigin: "center",
+    verticalOrigin: "center",
+    offset: [0, 0],
+    scaleByDistance: true,
+    distanceDisplayCondition: false,
+    distanceDisplayCondition_far: 1,
+    distanceDisplayCondition_near: 18,
+    data: null,
+  };
+
+  class mars3d_class extends mars3d_entity {
+    type: any = "divPoint";
+    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.DivGraphic(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: {
+          html: option.html,
+          offsetX: option.offset[0],
+          offsetY: option.offset[1],
+          scaleByDistance: option.scaleByDistance,
+          distanceDisplayCondition: option.distanceDisplayCondition,
+          distanceDisplayCondition_far: distanceDisplayCondition_far,
+          distanceDisplayCondition_near: distanceDisplayCondition_near,
+          clampToGround: !option.position[2],
+          horizontalOrigin: HorizontalOrigin[option.horizontalOrigin],
+          verticalOrigin: VerticalOrigin[option.verticalOrigin],
+        },
+        attr: option.data,
+      };
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.graphic.setOptions(this.config);
+    }
+
+    openPopup() {
+      this.graphic.openPopup();
+    }
+  }
+  class siji_class extends siji_entity {
+    type: any = "divPoint";
+    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 SGMap.Marker(this.config);
+    }
+
+    formatConfig(option: any) {
+      let el = document.createElement("div");
+      el.className = "marker";
+      el.id = option.id;
+      el.innerHTML = option.html;
+
+      //   el.style.backgroundImage =
+      //     'url("https://map.sgcc.com.cn/products/js-sdk/v3/assets/images/markers_new2_4ab0bc5_78.png")';
+      el.style.width = "0";
+      el.style.height = "0";
+      return {
+        id: option.id,
+        element: el,
+        anchor: "center",
+        offset: option.offset,
+      };
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      if (this.graphic) {
+        this.graphic.remove();
+      }
+      this.graphic = new SGMap.Marker(this.config);
+      this.graphic.setLngLat(option.position).addTo(hnMap.map.map);
+    }
+
+    openPopup() {
+      this.graphic.openPopup();
+    }
+  }
+  const fn: any = {
+    mars3d: mars3d_class,
+    gaode: mars3d_class,
+    siji: siji_class,
+  };
+
+  return fn[hnMap.mapType];
+};