hn-map 1.1.16 → 1.1.17

package/src/base/cesium_entity.ts

@@ -0,0 +1,98 @@
+/**
+ * mars3d地图实体基类
+ * 提供mars3d地图要素的通用功能，如弹窗管理、事件处理、飞行定位等
+ */
+export default class Mars3dEntity {
+  /** 配置选项 */
+  protected option: any = null;
+  /** 事件监听器集合 */
+  private event: Record<string, Function> = {};
+  /** 图形实例 */
+  protected graphic: any = null;
+
+  /**
+   * 构造函数
+   * @param hnMap 地图实例
+   */
+  constructor(hnMap: any) {
+    this.event = {};
+  }
+
+  /**
+   * 添加属性弹窗
+   * 点击要素时显示包含要素属性信息的弹窗
+   */
+  addPopupByAttr(): void {
+    this.graphic.bindPopup((event: any) => {
+      const data = event.graphic.attr;
+      return mars3d.Util.getTemplateHtml({
+        title: "详情",
+        template: "all",
+        attr: data,
+      });
+    });
+  }
+
+  /**
+   * 添加自定义DOM弹窗
+   * 点击要素时显示自定义DOM结构的弹窗
+   * @param getCustomDom 自定义DOM生成函数，接收要素数据，返回DOM字符串
+   */
+  addCustomPopup(getCustomDom: (data: any) => Promise<string> | string): void {
+    this.graphic.bindPopup(
+      async (event: any) => {
+        if (event.graphic.attr) {
+          const data = event.graphic.attr || {};
+          return await getCustomDom(data);
+        }
+      },
+      { offsetY: -20 }
+    );
+  }
+
+  /**
+   * 飞行定位到要素
+   * @param option 飞行定位选项
+   */
+  flyTo(option: any = {}): void {
+    this.graphic.flyTo(option);
+  }
+
+  /**
+   * 销毁要素
+   * 从地图中移除并销毁要素
+   */
+  destroy(): void {
+    this.graphic.destroy();
+  }
+
+  /**
+   * 监听事件
+   * @param eventType 事件类型
+   * @param callback 事件回调函数
+   */
+  on(eventType: string, callback: (data: any) => void): void {
+    this.off(eventType);
+
+    switch (eventType) {
+      case "click":
+        this.event[eventType] = () => {
+          callback(this.option.data);
+        };
+        break;
+    }
+
+    this.graphic.on(eventType, this.event[eventType]);
+  }
+
+  /**
+   * 移除事件监听
+   * @param eventType 事件类型
+   */
+  off(eventType: string): void {
+    if (this.event[eventType]) {
+      this.graphic.off(eventType, this.event[eventType]);
+      delete this.event[eventType];
+    }
+  }
+}

package/src/graphic/line.ts

@@ -7,6 +7,7 @@ import {
 import Mars3dEntity from "../base/mars3d_entity";
 import GaodeEntity from "../base/gaode_entity";
 import SijiEntity from "../base/siji_entity";
+import CesiumEntity from "../base/cesium_entity";
 
 export default (hnMap: any) => {
   const defaultOption = {
@@ -22,8 +23,8 @@ export default (hnMap: any) => {
     dashColor: "#00ff00",
     dashLength: 16,
     image: "",
-    repeat: [1, 1],
-    speed: 5,
+    repeat: [1, 1], // 闪烁线重复次数
+    speed: 5, // 闪烁线速度
     scaleByDistance: true,
     distanceDisplayCondition: false,
     distanceDisplayCondition_far: 1,
@@ -84,7 +85,7 @@ export default (hnMap: any) => {
             outlineColor: option.outlineColor,
             outlineWidth: option.outlineWidth,
             clampToGround: !option.position[0][2],
-            scaleByDistance: option.scaleByDistance,
+            scaleByDistance: option.scaleByDistance, // 缩放
             distanceDisplayCondition: option.distanceDisplayCondition,
             distanceDisplayCondition_far: distanceDisplayCondition_far,
             distanceDisplayCondition_near: distanceDisplayCondition_near,
@@ -363,10 +364,341 @@ export default (hnMap: any) => {
     }
   }
 
+  class cesium_class extends CesiumEntity {
+    type: any = "line";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    graphic: any = null;
+    entity: any = null;
+    flickerInterval: any = null;
+
+    constructor(option: any) {
+      super(hnMap);
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.createGraphic();
+
+      // 确保graphic正确指向entity
+      this.graphic = this.entity;
+    }
+
+    formatConfig(option: any) {
+      // 转换位置坐标为 Cesium 格式
+      const positions = option.position.map((pos: any) => {
+        if (Array.isArray(pos) && pos.length >= 2) {
+          const height = pos.length >= 3 ? pos[2] : 0;
+          return Cesium.Cartesian3.fromDegrees(pos[0], pos[1], height);
+        }
+        return pos;
+      });
+
+      return {
+        id: option.id,
+        positions: positions,
+        width: option.width || 2,
+        color: option.color || "#ffffff",
+        opacity: option.opacity || 1,
+        type: option.type || "line",
+        dashColor: option.dashColor || "#00ff00",
+        dashLength: option.dashLength || 16,
+        // dashPattern: option.dashPattern,
+        speed: option.speed || 5,
+        image: option.image,
+        repeat: option.repeat || [1, 1],
+        data: option.data,
+        clampToGround: option.clampToGround !== false,
+        distanceDisplayCondition: option.distanceDisplayCondition,
+        distanceDisplayCondition_far: option.distanceDisplayCondition_far,
+        distanceDisplayCondition_near: option.distanceDisplayCondition_near,
+        scaleByDistance: option.scaleByDistance,
+      };
+    }
+
+    createGraphic() {
+      const option = this.option;
+      const config = this.config;
+
+      // 根据线条类型创建不同的材质
+      let material: any;
+      switch (option.type) {
+        case "dash":
+          material = new Cesium.PolylineDashMaterialProperty({
+            color: Cesium.Color.fromCssColorString(option.color).withAlpha(
+              option.opacity
+            ),
+            gapColor: Cesium.Color.TRANSPARENT,
+            dashPattern: parseInt("1111111100000000", 2),
+          });
+          break;
+
+        case "flicker":
+          material = new Cesium.ColorMaterialProperty(
+            Cesium.Color.fromCssColorString(option.color).withAlpha(
+              option.opacity
+            )
+          );
+          this.setupFlickerEffect();
+          break;
+
+        case "flow":
+          material = new Cesium.PolylineArrowMaterialProperty(
+            Cesium.Color.fromCssColorString(option.color).withAlpha(
+              option.opacity
+            )
+          );
+          break;
+
+        case "arrow":
+          material = new Cesium.PolylineArrowMaterialProperty(
+            Cesium.Color.fromCssColorString(option.color).withAlpha(
+              option.opacity
+            )
+          );
+          break;
+
+        case "line":
+        default:
+          material = new Cesium.ColorMaterialProperty(
+            Cesium.Color.fromCssColorString(option.color).withAlpha(
+              option.opacity
+            )
+          );
+          break;
+      }
+
+      // 创建实体配置
+      const entityConfig: any = {
+        id: config.id,
+        name: config.id,
+        polyline: {
+          positions: new Cesium.ConstantProperty(config.positions),
+          width: new Cesium.ConstantProperty(config.width),
+          material: material,
+          clampToGround: config.clampToGround,
+          arcType: Cesium.ArcType.RHUMB,
+          show: true,
+        },
+      };
+
+      // // 添加距离显示条件
+      // if (option.distanceDisplayCondition) {
+      //   const far = getLevelMiddleHeight(option.distanceDisplayCondition_far);
+      //   const near = getLevelMiddleHeight(option.distanceDisplayCondition_near);
+      //   entityConfig.polyline.distanceDisplayCondition =
+      //     new Cesium.ConstantProperty(
+      //       new Cesium.DistanceDisplayCondition(near, far)
+      //     );
+      // }
+
+      // 创建 Cesium 实体
+      this.entity = new Cesium.Entity(entityConfig);
+      this.graphic = this.entity; // 确保graphic指向entity
+    }
+
+    // 设置闪烁效果
+    setupFlickerEffect() {
+      if (
+        this.option.type === "flicker" &&
+        this.entity &&
+        this.entity.polyline
+      ) {
+        let visible = true;
+        const toggleVisibility = () => {
+          if (this.entity && this.entity.polyline) {
+            visible = !visible;
+            this.entity.polyline.show = visible;
+          }
+        };
+
+        // 设置定时器
+        this.flickerInterval = setInterval(
+          toggleVisibility,
+          1000 / this.option.speed
+        );
+      }
+    }
+
+    // 清理闪烁效果
+    cleanupFlickerEffect() {
+      if (this.flickerInterval) {
+        clearInterval(this.flickerInterval);
+        this.flickerInterval = null;
+      }
+    }
+    set(option: any) {
+      // 清理之前的特效
+      this.cleanupFlickerEffect();
+
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+
+      // 重新创建图形
+      this.createGraphic();
+
+      // 注意：这里不需要手动添加到地图
+      // 图层会通过layer.set()或重新addEntity来更新
+    }
+
+    // 飞行到线条位置
+    flyTo(options: any = {}) {
+      if (this.entity && this.entity.polyline) {
+        const positions = this.entity.polyline.positions.getValue(
+          Cesium.JulianDate.now()
+        );
+        if (positions && positions.length > 0) {
+          // 计算包围盒
+          const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
+
+          // 飞行到目标
+          hnMap.map.map.camera.flyToBoundingSphere(boundingSphere, {
+            duration: options.duration || 2.0,
+            offset: new Cesium.HeadingPitchRange(
+              Cesium.Math.toRadians(0),
+              Cesium.Math.toRadians(-45),
+              boundingSphere.radius * 2.0
+            ),
+          });
+        }
+      }
+    }
+
+    // 打开弹窗（如果需要）
+    openPopup(htmlContent: string) {
+      if (this.entity && hnMap.map.map) {
+        // 设置实体的描述属性
+        this.entity.description = htmlContent;
+
+        // 选中实体以显示弹窗
+        hnMap.map.map.selectedEntity = this.entity;
+      }
+    }
+
+    // 判断点是否在线条附近
+    isInPoly(lng: number, lat: number) {
+      if (this.entity && this.entity.polyline) {
+        const positions = this.entity.polyline.positions.getValue(
+          Cesium.JulianDate.now()
+        );
+        if (positions && positions.length > 0) {
+          const point = Cesium.Cartesian3.fromDegrees(lng, lat);
+          // 检查点到线段的距离
+          for (let i = 0; i < positions.length - 1; i++) {
+            const start = positions[i];
+            const end = positions[i + 1];
+            const distance = Cesium.Cartesian3.distance(point, start);
+            if (distance < 1000) {
+              // 1公里范围内认为在线上
+              return true;
+            }
+          }
+        }
+      }
+      return false;
+    }
+
+    // 更新位置
+    setPosition(position: any[][]) {
+      if (this.entity && this.entity.polyline) {
+        const positions = position.map((pos: any) => {
+          if (Array.isArray(pos) && pos.length >= 2) {
+            const height = pos.length >= 3 ? pos[2] : 0;
+            return Cesium.Cartesian3.fromDegrees(pos[0], pos[1], height);
+          }
+          return pos;
+        });
+        this.entity.polyline.positions = new Cesium.CallbackProperty(
+          () => positions,
+          false
+        );
+      }
+    }
+
+    // 获取位置
+    getPosition() {
+      if (this.entity && this.entity.polyline) {
+        const positions = this.entity.polyline.positions.getValue(
+          Cesium.JulianDate.now()
+        );
+        return positions.map((cartesian: any) => {
+          const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+          return [
+            Cesium.Math.toDegrees(cartographic.longitude),
+            Cesium.Math.toDegrees(cartographic.latitude),
+            cartographic.height,
+          ];
+        });
+      }
+      return [];
+    }
+
+    // 设置颜色
+    setColor(color: string) {
+      if (
+        this.entity &&
+        this.entity.polyline &&
+        this.entity.polyline.material
+      ) {
+        const cesiumColor = Cesium.Color.fromCssColorString(color).withAlpha(
+          this.option.opacity
+        );
+        if (this.entity.polyline.material.color) {
+          this.entity.polyline.material.color = cesiumColor;
+        } else if (this.entity.polyline.material.evenColor) {
+          this.entity.polyline.material.evenColor = cesiumColor;
+        }
+      }
+    }
+
+    // 设置透明度
+    setOpacity(opacity: number) {
+      if (
+        this.entity &&
+        this.entity.polyline &&
+        this.entity.polyline.material
+      ) {
+        this.option.opacity = opacity;
+        const currentColor = Cesium.Color.fromCssColorString(this.option.color);
+        const newColor = currentColor.withAlpha(opacity);
+
+        if (this.entity.polyline.material.color) {
+          this.entity.polyline.material.color = newColor;
+        } else if (this.entity.polyline.material.evenColor) {
+          this.entity.polyline.material.evenColor = newColor;
+        }
+      }
+    }
+
+    // 设置线宽
+    setWidth(width: number) {
+      if (this.entity && this.entity.polyline) {
+        this.option.width = width;
+        this.entity.polyline.width = width;
+      }
+    }
+
+    // 销毁实体
+    destroy() {
+      // 清理特效
+      this.cleanupFlickerEffect();
+
+      if (this.entity) {
+        // 从图层移除实体
+        if (hnMap.map.map && hnMap.map.map.entities) {
+          hnMap.map.entities.remove(this.entity);
+        }
+        this.entity = null;
+        this.graphic = null;
+      }
+    }
+  }
+
   const fn: any = {
     mars3d: mars3d_class,
     gaode: gaode_class,
     siji: siji_class,
+    cesium: cesium_class,
   };
 
   return fn[hnMap.mapType];

package/src/graphic/point.ts

@@ -180,11 +180,7 @@ export default (hnMap: any) => {
             ],
           },
         },
-        layout: {
-          "text-field": "{name}", // 文本
-          "text-size": Number(option.fontSize),
-          "text-offset": convertPosition(option.fontOffset),
-        },
+
         paint: {
           "circle-opacity": Number(option.opacity),
           "circle-radius": Number(option.size),
@@ -198,7 +194,6 @@ export default (hnMap: any) => {
           "circle-stroke-opacity": option.outline
             ? Number(option.outlineOpacity)
             : 1, // 边框样式
-          
         }, // 填充样式
       };
 

package/src/index.ts

@@ -40,7 +40,6 @@ interface MapOption {
   cesium_baseUrl: string; // Cesium静态资源基础路径
   cesium_terrainProvider: any; // 地形提供者配置
   cesium_imageryProvider: any; // 影像提供者配置
-  cesium_options: {};
 }
 
 /**
@@ -252,17 +251,18 @@ export default class HnMap {
   ): Promise<void> {
     // 加载Cesium CSS
     // await loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
-    await loadResource(
-      "https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Widgets/widgets.css",
-      "css"
-    );
-
-    // 加载Cesium JS
-    await loadResource(
-      "https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js",
-      "js"
-    );
+    // await loadResource(
+    //   "https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Widgets/widgets.css",
+    //   "css"
+    // );
 
+    // // 加载Cesium JS
+    // await loadResource(
+    //   "https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js",
+    //   "js"
+    // );
+    await loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
+    await loadResource(basePath + "lib/Cesium/Cesium.js", "js");
     // 设置Cesium访问令牌（如果有）
     if (option.cesium_accessToken) {
       Cesium.Ion.defaultAccessToken = option.cesium_accessToken;

package/src/layer/cluster.ts

@@ -331,7 +331,7 @@ export default (hnMap: any) => {
     layerEntity: any = null;
     // 创建全局信息窗口实例
     infoWindow: any = null;
-    event:any = {}
+    event: any = {};
 
     constructor(option: any) {
       this.id = option.id;
@@ -347,7 +347,7 @@ export default (hnMap: any) => {
               coordinates: convertPosition(v.position),
             },
             properties: {
-              name: v.data.name,
+              ...option.data,
             },
           })),
         },
@@ -468,63 +468,10 @@ export default (hnMap: any) => {
      */
     off(eventType: string): void {
       if (this.event[eventType]) {
-        hnMap.map.map.off(eventType,this.event[eventType]);
+        hnMap.map.map.off(eventType, this.event[eventType]);
         delete this.event[eventType];
       }
     }
-
-    //
-    // // 添加属性弹窗
-    // addPopupByAttr() {
-    //   // 如果已有弹窗，先关闭
-    //   this.removePopup();
-    //   this.infoWindow = new SGMap.Popup({
-    //     offset: { bottom: [0, 0] },
-    //     className: "my-attrPopup-class",
-    //   });
-    //
-    //   const handleClick = (e: any) => {
-    //     let data = e.features[0].properties;
-    //
-    //     // 创建弹窗内容
-    //     let content = "";
-    //     for (const key in data) {
-    //       content += `<div>${key}: ${data[key]}</div>`;
-    //     }
-    //
-    //     this.infoWindow.setHTML(content);
-    //     this.infoWindow.setLngLat(e.lngLat).addTo(hnMap.map.map);
-    //   };
-    //
-    //   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 = e.features[0].properties;
-    //     const dom = getCustomDom(data);
-    //     this.infoWindow.setHTML(dom);
-    //     this.infoWindow.setLngLat(e.lngLat).addTo(hnMap.map.map);
-    //   };
-    //
-    //   hnMap.map.map.on("click", this.config.id, handleClick);
-    // }
-    //
-    // // 弹窗删除
-    // removePopup() {
-    //   if (this.infoWindow) {
-    //     this.infoWindow.remove();
-    //   }
-    // }
-
   }
 
   const fn: any = {