hn-map 1.0.10 → 1.1.1

package/src/other/route.ts

@@ -0,0 +1,457 @@
+import { deepMerge, wgs84ToGcj02Format } from "../util";
+
+import siji_entity from "../base/siji_entity";
+export default (hnMap: any) => {
+  const defaultOption = {
+    id: "",
+    position: [],
+    speed: 10,
+    replaySpeed: 20,
+    clockLoop: false,
+    image: {
+      src: "",
+      width: 10,
+      height: 10,
+    },
+    camera: {
+      type: "",
+      pitch: -30,
+      radius: 500,
+    },
+    polyline: {
+      color: "#0000ff",
+      width: 2,
+    },
+    path: {
+      color: "#ff0000",
+      width: 2,
+    },
+    label: {
+      text: "", // 文本内容
+      font_size: 16,
+      color: "#ffffff",
+      outline: false,
+      outlineColor: "#000000",
+      outlineWidth: 1,
+      outlineOpacity: 1, // 描边透明度
+      horizontalOrigin: "left", // 水平对齐方式
+      verticalOrigin: "bottom", // 垂直对齐方式
+      pixelOffset: [0, 0],
+    },
+  };
+
+  class mars3d_class {
+    type: any = "route";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    graphic: any = null;
+
+    constructor(option: any) {
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.graphic = new mars3d.graphic.FixedRoute(this.config);
+    }
+
+    formatConfig(option: any) {
+      return {
+        id: option.id,
+        speed: option.speed,
+        positions: option.position,
+        // leadTime: option.leadTime,
+        clockLoop: option.clockLoop, // 是否循环播放
+        camera: {
+          type: option.camera.type, // 轨迹类型
+          pitch: option.camera.pitch,
+          radius: option.camera.radius,
+        },
+        billboard: {
+          image: option.image.src,
+          width: option.image.width,
+          height: option.image.height,
+        }, // Marker
+        polyline: {
+          color: option.polyline.color,
+          width: option.polyline.width,
+          // showAll: true,
+        },
+        path: {
+          color: option.path.color,
+          width: option.path.width,
+        }, // 轨迹
+        label: {
+          text: option.label.text, // 文本内容
+          font_size: option.label.textSize,
+          color: option.label.color,
+          outline: option.label.outline,
+          outlineColor: option.label.outLineColor,
+          outlineWidth: option.label.outlineWidth,
+          outlineOpacity: option.label.outlineOpacity, // 描边透明度
+          horizontalOrigin: option.label.horizontalOrigin, // 水平对齐方式
+          verticalOrigin: option.label.verticalOrigin, // 垂直对齐方式
+          pixelOffset: option.label.pixelOffset,
+        },
+        // model: {
+        //   url: option.models.url, // 模型地址
+        //   scale: option.models.scale, // 模型缩放比例
+        //   minimumPixelSize: option.models.minimumPixelSize, // 模型最小尺寸
+        //   clampToGround: option.models.clampToGround, // 模型贴地
+        // },
+
+        attr: option.data,
+      };
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.graphic.setOptions(this.config);
+    }
+
+    start() {
+      this.graphic.start();
+    }
+
+    pause() {
+      this.graphic.pause();
+    }
+
+    proceed() {
+      this.graphic.proceed();
+    }
+
+    stop() {
+      this.graphic.stop();
+    }
+
+    destroy() {
+      this.graphic.destroy();
+    }
+
+    flyTo() {
+      this.graphic.flyToPoint();
+    }
+  }
+
+  class gaode_class {
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config_graphic: any = null;
+    config_path: any = null;
+    graphic: any = null;
+    pathLayer: any = null;
+    path: any = null;
+
+    constructor(option: any) {
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config_graphic = this.formatConfigGraphic(this.option);
+      this.config_path = this.formatConfigPath(this.option);
+      this.graphic = new AMap.Marker(this.config_graphic);
+      this.addPath();
+
+      this.graphic.on("moving", (e: any) => {
+        hnMap.map.map.setCenter(e.target.getPosition(), true);
+      });
+      hnMap.map.map.setFitView();
+    }
+
+    formatConfigGraphic(option: any) {
+      const amapPosition = wgs84ToGcj02Format(option.position);
+      return {
+        position: amapPosition[0],
+        speed: option.speed,
+        icon: new AMap.Icon({
+          image: option.image.src,
+          imageSize: new AMap.Size(option.image.width, option.image.height),
+          size: new AMap.Size(option.image.width, option.image.height),
+        }),
+        extData: {
+          id: option.id,
+        },
+      };
+    }
+
+    formatConfigPath(option: any) {
+      const amapPosition = wgs84ToGcj02Format(option.position);
+      return {
+        id: option.id + "_path",
+        position: amapPosition,
+        width: option.polyline.width,
+        color: option.polyline.color,
+        data: { id: option.id + "_path" },
+      };
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config_graphic = this.formatConfigGraphic(this.option);
+      this.config_path = this.formatConfigPath(this.option);
+      this.graphic.setOptions(this.config_graphic);
+      this.stop();
+    }
+
+    addPath() {
+      this.pathLayer = hnMap.map.addLayer(
+        new hnMap.Layer({ id: this.id + "_path_layer" })
+      );
+      if (this.pathLayer) {
+        this.path = new hnMap.Line(this.config_path);
+        this.pathLayer.addEntity(this.path);
+      }
+    }
+
+    start() {
+      this.config_path.position.reduce((prev: any, next: any) => {
+        let t1 = turf.point(prev);
+        let t2 = turf.point(next);
+        let distance = turf.distance(t1, t2, { units: "meters" });
+        this.graphic.moveAlong(this.path.graphic._opts.path, {
+          duration: Number(distance / this.config_graphic.speed).toFixed(0),
+          autoRotation: true,
+          circlable: true,
+        });
+        return next;
+      });
+    }
+
+    pause() {
+      this.graphic.pauseMove();
+    }
+
+    proceed() {
+      this.graphic.resumeMove();
+    }
+
+    stop() {
+      this.graphic.stopMove();
+    }
+
+    destroy() {
+      this.stop();
+      this.graphic.remove();
+      this.pathLayer.destroy();
+    }
+
+    flyTo() {
+      if (this.graphic.getBounds) {
+        const bounds = this.graphic.getBounds();
+        hnMap.map.map.setBounds(bounds);
+      }
+    }
+  }
+
+  class siji_class extends siji_entity {
+    type: any = "route";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config_routeline: any = null;
+    config_routeplay: any = null;
+    imgMarker: any = null;
+    chunkData: any = null;
+    // timer: any = null;
+
+    constructor(option: any) {
+      super(hnMap);
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config_routeline = this.formatConfig(this.option);
+      this.config_routeplay = this.formatConfigPlay(this.option);
+    }
+
+    formatConfig(option: any) {
+      return {
+        id: "route-line_" + option.id,
+        type: "line",
+        source: {
+          type: "geojson",
+          data: {
+            geometry: {
+              type: "LineString",
+              coordinates: option.position,
+            },
+            properties: {},
+            type: "Feature",
+          },
+        },
+        layout: {
+          "line-join": "round",
+          "line-cap": "round",
+        },
+        paint: {
+          "line-color": option.polyline.color,
+          "line-width": Number(option.polyline.width),
+        },
+      };
+    }
+
+    formatConfigPlay(option: any) {
+      return {
+        id: "route-played_" + option.id,
+        type: "line",
+        source: {
+          type: "geojson",
+          data: {
+            type: "FeatureCollection",
+            features: [],
+          },
+        },
+        layout: {
+          "line-join": "round",
+          "line-cap": "round",
+        },
+        paint: {
+          "line-color": option.path.color,
+          "line-width": Number(option.path.width),
+        },
+      };
+    }
+
+    createCar() {
+      if (this.imgMarker) {
+        this.imgMarker.remove();
+      }
+      // 画marker点
+      var el = document.createElement("img");
+      el.src = this.option.image.src;
+      el.style.width = this.option.image.width + "px";
+      el.style.height = this.option.image.height + "px";
+      this.imgMarker = new SGMap.Marker(el)
+        .setLngLat(this.config_routeline.source.data.geometry.coordinates[0])
+        .addTo(hnMap.map.map);
+    }
+
+    joinLinePoint() {
+      const speed = 60;
+      // 播放速度，这里选择20倍播放速度
+      const replaySpeed = 20;
+      // 按照实际车辆跑的速度，每秒跑 60 / 3600 km
+      // 车辆位置按每秒刷新20帧算，1/20秒移动的距离为 60 / 3600 / 20 km
+      const step = 60 / 3600 / 20;
+      // 倍数播放时，每帧移动的步长为 step * replaySpeed
+      const scaleSpeed = step * replaySpeed;
+      // 线路根据步长scaleSpeed间隔进行插值，插值线总长/步长(distance/scaleSpeed)个点，得到chunkData
+      // 注意：线路长度一定，scaleSpeed越小，插值数量越多。线路长度很长的情况下，请调整replaySpeed，避免插值点数过多产生卡顿
+      this.chunkData = turf.lineChunk(
+        this.config_routeline.source.data,
+        scaleSpeed,
+        {
+          units: "kilometers",
+        }
+      );
+      return this.chunkData;
+    }
+    start() {
+      const features = this.chunkData.features;
+
+      let max = features.length;
+      let order = 0;
+
+      let timer = setInterval(() => {
+        order++;
+        if (order >= max) {
+          clearInterval(timer);
+        } else {
+          const beforePoint = features[order - 1].geometry.coordinates[1];
+          const nowPoint = features[order].geometry.coordinates[1];
+          // 设置小车的位置
+          this.imgMarker.setLngLat(nowPoint);
+          // 设置小车的方向
+          var bearing = turf.bearing(
+            turf.point(beforePoint),
+            turf.point(nowPoint)
+          );
+          bearing && this.imgMarker.setRotation(bearing - 90);
+          // 更新已走过的线路图层数据
+          this.readerReplayedRouterLayer(order, this.option);
+        }
+      }, 1000 / 20); // 间隔1000 / 20执行一次，每秒执行20次，可以和上面计算线路的时间间隔配合
+    }
+
+    readerReplayedRouterLayer(order: any, option: any) {
+      hnMap.map.map.getSource("route-played_" + option.id).setData({
+        type: "FeatureCollection",
+        features: this.chunkData.features.slice(0, order + 1),
+      });
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      if (this.imgMarker) {
+        this.imgMarker.remove();
+      }
+      this.createCar();
+
+      this.config_routeline = this.formatConfig(this.option);
+      let mySource_routeline = hnMap.map.map.getSource(
+        this.config_routeline.id
+      );
+      mySource_routeline.setData({
+        geometry: {
+          type: "LineString",
+          coordinates: option.position,
+        },
+        properties: option.data,
+        type: "Feature",
+      });
+
+      for (let key in this.config_routeline) {
+        if (this.config_routeline.hasOwnProperty(key)) {
+          if (key == "paint") {
+            for (let key2 in this.config_routeline[key]) {
+              if (this.config_routeline[key].hasOwnProperty(key2)) {
+                // 遍历 paint 属性
+                hnMap.map.map.setPaintProperty(
+                  this.config_routeline.id,
+                  key2,
+                  this.config_routeline[key][key2]
+                );
+              }
+            }
+          }
+        }
+      }
+      this.config_routeplay = this.formatConfigPlay(this.option);
+
+      let mySource_routeplay = hnMap.map.map.getSource(
+        this.config_routeplay.id
+      );
+      mySource_routeplay.setData({
+        geometry: {
+          type: "LineString",
+          coordinates: option.position,
+        },
+        properties: option.data,
+        type: "Feature",
+      });
+
+      for (let key in this.config_routeplay) {
+        if (this.config_routeplay.hasOwnProperty(key)) {
+          if (key == "paint") {
+            for (let key2 in this.config_routeplay[key]) {
+              if (this.config_routeplay[key].hasOwnProperty(key2)) {
+                // 遍历 paint 属性
+                hnMap.map.map.setPaintProperty(
+                  this.config_routeplay.id,
+                  key2,
+                  this.config_routeplay[key][key2]
+                );
+              }
+            }
+          }
+        }
+      }
+      this.joinLinePoint();
+      this.start();
+    }
+  }
+
+  const fn: any = {
+    mars3d: mars3d_class,
+    gaode: gaode_class,
+    siji: siji_class,
+  };
+
+  return fn[hnMap.mapType];
+};

package/src/types/globals.d.ts

@@ -0,0 +1,5 @@
+declare const mars3d: any;
+declare const Cesium: any;
+declare const AMap: any;
+declare const SGMap: any;
+declare const turf: any;

package/src/util.ts

@@ -0,0 +1,216 @@
+// import Vue from 'vue'
+//
+// // 渲染vue组件并获取dom结构
+// export function renderComponents(comp, params) {
+//     const vNodeDom = document.createElement("div")
+//     document.body.appendChild(vNodeDom)
+//
+//     const SubVue = Vue.extend(comp)
+//     const app = new SubVue({
+//         el: vNodeDom,
+//         propsData: params
+//     })
+//     return app.$el
+// }
+
+// 对象深度合并
+export function deepMerge(target: any, source: any): any {
+    for (let key of Object.keys(source)) {
+        if (source[key] instanceof Object && !Array.isArray(source[key])) {
+            if (!target[key]) Object.assign(target, {[key]: {}});
+            deepMerge(target[key], source[key]);
+        } else {
+            Object.assign(target, {[key]: source[key]});
+        }
+    }
+    return target;
+}
+
+// 递归格式化高德坐标系
+export function wgs84ToGcj02Format(position: any): any {
+    // 判断是否是数组
+    if (position.every((item: any) => Array.isArray(item))) {
+        return position.map((item: any) => {
+            return wgs84ToGcj02Format(item);
+        });
+    } else if (position.every((item: any) => typeof item === "object")) {
+        return position.map((item: any) => {
+            let data = wgs84ToGcj02Format([item.lng, item.lat]);
+            return {
+                ...item,
+                lng: data[0],
+                lat: data[1],
+            };
+        });
+    } else {
+        return wgs84ToGcj02(position[0], position[1]);
+    }
+}
+
+/**
+ * WGS-84 转 GCJ-02（高德坐标）
+ * @param {number} wgsLat - WGS-84纬度
+ * @param {number} wgsLng - WGS-84经度
+ * @returns {[number, number]} GCJ-02经纬度数组
+ */
+export function wgs84ToGcj02(wgsLng: any, wgsLat: any): any {
+    if (!isCorrectPosition(wgsLng, wgsLat)) {
+        return [wgsLng, wgsLat];
+    }
+
+    const a = 6378245.0; // 长半轴
+    const ee = 0.00669342162296594323; // 扁率
+
+    function transformLat(x: any, y: any): any {
+        let ret =
+            -100.0 +
+            2.0 * x +
+            3.0 * y +
+            0.2 * y * y +
+            0.1 * x * y +
+            0.2 * Math.sqrt(Math.abs(x));
+        ret +=
+            ((20.0 * Math.sin(6.0 * x * Math.PI) +
+                    20.0 * Math.sin(2.0 * x * Math.PI)) *
+                2.0) /
+            3.0;
+        ret +=
+            ((160.0 * Math.sin((y * Math.PI) / 3.0) +
+                    320 * Math.sin((y * Math.PI) / 30.0)) *
+                2.0) /
+            3.0;
+        return ret;
+    }
+
+    function transformLng(x: any, y: any): any {
+        let ret =
+            300.0 +
+            x +
+            2.0 * y +
+            0.1 * x * x +
+            0.1 * x * y +
+            0.1 * Math.sqrt(Math.abs(x));
+        ret +=
+            ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(x * Math.PI)) *
+                2.0) /
+            3.0;
+        ret +=
+            ((150.0 * Math.sin((x * Math.PI) / 3.0) +
+                    300.0 * Math.sin((x * Math.PI) / 15.0)) *
+                2.0) /
+            3.0;
+        return ret;
+    }
+
+    let dLat = transformLat(wgsLng - 105.0, wgsLat - 35.0);
+    let dLng = transformLng(wgsLng - 105.0, wgsLat - 35.0);
+    const radLat = (wgsLat / 180.0) * Math.PI;
+    let magic = Math.sin(radLat);
+    magic = 1 - ee * magic * magic;
+    const sqrtMagic = Math.sqrt(magic);
+    dLat = (dLat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * Math.PI);
+    dLng = (dLng * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * Math.PI);
+    const gcjLat = wgsLat + dLat;
+    const gcjLng = wgsLng + dLng;
+
+    return [gcjLng, gcjLat];
+}
+
+/**
+ * 判断是否为正确的坐标
+ * @param {number} lat - 纬度
+ * @param {number} lng - 经度
+ * @returns {boolean}
+ */
+export function isCorrectPosition(lng: any, lat: any): boolean {
+    return lng <= 180 && lng >= -180 && lat <= 90 && lat >= -90;
+}
+
+// 根据矩形左上角和右上角坐标计算矩形坐标对
+export function createRectangleCoordinates(leftTop: any, rightBottom: any) {
+    const [leftTopLng, leftTopLat] = leftTop;
+    const [rightBottomLng, rightBottomLat] = rightBottom;
+
+    // 计算四个角点
+    const leftTopPoint = [Number(leftTopLng), Number(leftTopLat)];
+    const rightTopPoint = [Number(rightBottomLng), Number(leftTopLat)];
+    const rightBottomPoint = [Number(rightBottomLng), Number(rightBottomLat)];
+    const leftBottomPoint = [Number(leftTopLng), Number(rightBottomLat)];
+
+    // 返回五个点的坐标对（首尾相同）
+    return [
+        leftTopPoint,
+        rightTopPoint,
+        rightBottomPoint,
+        leftBottomPoint,
+        leftTopPoint, // 闭合矩形
+    ];
+}
+
+export function getMapRangeHeightByLevel(level: number) {
+    // 输入校验：限制在 1~18
+    level = Math.max(1, Math.min(18, Math.floor(level)));
+
+    // 计算指定 level 对应的高度（level >= 2 时使用指数衰减）
+    function getHeight(lvl: number) {
+        if (lvl === 1) {
+            return Infinity; // level=1 表示“最大高度”，逻辑上为无穷大
+        } else {
+            return 32000000 / Math.pow(2, lvl - 2);
+        }
+    }
+
+    const endHeight = getHeight(level);           // 当前 level 的“粗略”高度
+    const startHeight = level < 18 ? getHeight(level + 1) : 0; // 下一级更细
+    return {startHeight, endHeight};
+}
+
+/**
+ * 根据 level 返回该层级的“中间高度”（几何平均值）
+ *
+ * @param {number} level - 缩放级别 [1, 18]
+ * @returns {number} 中间高度（米）
+ */
+export function getLevelMiddleHeight(level: number): number {
+    const {startHeight, endHeight} = getMapRangeHeightByLevel(level)
+    // 如果 startHeight 为 0（如 level=18），几何平均会为 0，不合理
+    // 所以 level=18 特殊处理：返回 (0 + end)/2 或直接返回 end * 0.7 左右
+    if (startHeight === 0) {
+        return endHeight * 0.7; // 经验值，贴近“中间感知”
+    }
+
+    // 几何平均：√(start × end)
+    return Math.sqrt(startHeight * endHeight);
+}
+
+
+/**
+ * 根据地图缩放级别（level），返回对应的视野高度范围
+ * 规则：
+ *   - level 1: 高度 > 32,000,000
+ *   - level 2 ~ 18: 每级高度减半，level=2 对应 32,000,000
+ *
+ * @param {number} level - 缩放级别 [1, 18]
+ * @returns {[number, number]} [开始高度, 结束高度]（单位：米）
+ */
+export function getLevelHeightRange(level: number): [number, number] {
+    const {startHeight, endHeight} = getMapRangeHeightByLevel(level)
+    return [startHeight, endHeight];
+}
+
+/**
+ * 根据高度反推 level（1~18）
+ * @param {number} height - 当前视野高度（米）
+ * @returns {number} level
+ */
+export function getHeightToLevel(height:number): number {
+    if (height > 32000000) return 1;
+    if (height <= 0) return 18;
+
+    // 解公式：height = 32e6 / 2^(level-2)
+    let level = 2 + Math.log(32000000 / height) / Math.log(2);
+    level = Math.floor(level);
+
+    // 限制在 1~18
+    return Math.max(1, Math.min(18, level));
+}