@hzab/map-combine 0.4.2-alpha.11 → 0.4.2-alpha.12

package/CHANGELOG.md

@@ -9,6 +9,7 @@ fix: AmapPoint drawPoint 逻辑修复
 feat: Cesium 线 首次加载优化
 feat: 高德地图 颜色支持配置十六进制 rgba
 feat: map event 添加 "drill-pick" 类型事件 返回当前点击位置的所有元素
+feat: 正射 createLayer
 
 # @hzab/map-combine@0.4.1
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.4.2-alpha.11",
+  "version": "0.4.2-alpha.12",
   "description": "地图组件",
   "main": "src",
   "scripts": {

package/src/amap/AMap.ts

@@ -11,6 +11,7 @@ import { bindEvent } from "./AMapEvent";
 import { drawPoint } from "./AMapPoint";
 import { drawPolyline } from "./AMapPolyline";
 import { drawPolygon } from "./AMapPolygon";
+import { drawLayer } from "./AMapLayer";
 
 export interface IAMapOption {
   container: HTMLDivElement;
@@ -210,6 +211,10 @@ export class AMap extends MapCombine {
     throw new Error("Method not implemented.");
   }
 
+  createLayer(option?: Partial<unknown>): unknown {
+    return drawLayer(this, option);
+  }
+
   /**
    * 将高德地图 Canvas 像素坐标转换为经纬度
    * @param {Array} p - canvas 点位数组 [x, y]

package/src/amap/AMapLayer.ts

@@ -0,0 +1,241 @@
+export function drawLayer(map, option) {
+  console.log("option.url", option.url);
+  const urlTemplate = option.url || "";
+  const self = map;
+
+  // 1. 获取地图容器
+  const container = map.viewer.getContainer();
+
+  // 2. 手动创建 canvas 并添加到容器
+  const canvas = document.createElement("canvas");
+  const mapSize = map.viewer.getSize();
+  canvas.width = mapSize.width;
+  canvas.height = mapSize.height;
+  canvas.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    pointer-events: none;
+  `;
+
+  container.appendChild(canvas);
+  console.log("Canvas 已手动添加到容器，尺寸:", canvas.width, canvas.height);
+
+  // 3. 瓦片缓存
+  const tileCache = new Map();
+
+  // 4. 经纬度转瓦片坐标
+  function lngLatToTile(lng: number, lat: number, zoom: number) {
+    const n = Math.pow(2, zoom);
+    const x = ((lng + 180) / 360) * n;
+    const y = ((1 - Math.log(Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)) / Math.PI) / 2) * n;
+    return { x: Math.floor(x), y: Math.floor(y) };
+  }
+
+  // 5. 瓦片坐标转经纬度
+  function tileToLngLat(tileX: number, tileY: number, zoom: number) {
+    const n = Math.pow(2, zoom);
+    const lng = (tileX / n) * 360 - 180;
+    const lat = (Math.atan(Math.sinh(Math.PI * (1 - (2 * tileY) / n))) * 180) / Math.PI;
+    return { lng, lat };
+  }
+
+  // 6. 获取当前视口的瓦片范围（增加预加载扩展）
+  function getTileRange() {
+    const zoom = self.viewer.getZoom();
+    const level = Math.floor(zoom);
+
+    const bounds = self.viewer.getBounds();
+    if (!bounds) {
+      return null;
+    }
+
+    const sw = bounds.getSouthWest();
+    const ne = bounds.getNorthEast();
+
+    // 扩展范围，预加载周边瓦片（移动时更流畅）
+    const expandFactor = 0.3;
+    const lngMin = sw.getLng() - (ne.getLng() - sw.getLng()) * expandFactor;
+    const lngMax = ne.getLng() + (ne.getLng() - sw.getLng()) * expandFactor;
+    const latMin = sw.getLat() - (ne.getLat() - sw.getLat()) * expandFactor;
+    const latMax = ne.getLat() + (ne.getLat() - sw.getLat()) * expandFactor;
+
+    const topLeft = lngLatToTile(lngMin, latMax, level);
+    const bottomRight = lngLatToTile(lngMax, latMin, level);
+
+    return {
+      minX: topLeft.x,
+      maxX: bottomRight.x,
+      minY: topLeft.y,
+      maxY: bottomRight.y,
+      level: level,
+    };
+  }
+
+  // 7. 绘制单张瓦片
+  function drawSingleTile(
+    ctx: CanvasRenderingContext2D,
+    img: HTMLImageElement,
+    tileX: number,
+    tileY: number,
+    zoom: number,
+  ) {
+    const nw = tileToLngLat(tileX, tileY, zoom);
+    const se = tileToLngLat(tileX + 1, tileY + 1, zoom);
+
+    const pNW = self.viewer.lngLatToContainer(new self.LbsAMap.LngLat(nw.lng, nw.lat));
+    const pSE = self.viewer.lngLatToContainer(new self.LbsAMap.LngLat(se.lng, se.lat));
+
+    const minX = Math.min(pNW.x, pSE.x);
+    const maxX = Math.max(pNW.x, pSE.x);
+    const minY = Math.min(pNW.y, pSE.y);
+    const maxY = Math.max(pNW.y, pSE.y);
+
+    const width = maxX - minX;
+    const height = maxY - minY;
+
+    const padding = 100;
+    if (maxX < -padding || minX > canvas.width + padding || maxY < -padding || minY > canvas.height + padding) {
+      return;
+    }
+
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "high";
+    ctx.drawImage(img, minX, minY, width, height);
+  }
+
+  // 8. 主加载函数
+  let isLoading = false;
+  let pendingTiles = 0;
+  let animationId: number | null = null;
+
+  function loadAndDrawTiles() {
+    if (animationId !== null) {
+      cancelAnimationFrame(animationId);
+      animationId = null;
+    }
+
+    animationId = requestAnimationFrame(() => {
+      const ctx = canvas.getContext("2d");
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const range = getTileRange();
+      if (!range) {
+        console.warn("无法获取地图范围");
+        return;
+      }
+
+      const { minX, maxX, minY, maxY, level } = range;
+
+      if (!isLoading) {
+        isLoading = true;
+        pendingTiles = 0;
+
+        // 先绘制已缓存的瓦片
+        for (let x = minX; x <= maxX; x++) {
+          for (let y = minY; y <= maxY; y++) {
+            const cacheKey = `${level}/${x}/${y}`;
+            if (tileCache.has(cacheKey)) {
+              const cachedImg = tileCache.get(cacheKey);
+              drawSingleTile(ctx, cachedImg, x, y, level);
+            }
+          }
+        }
+
+        // 加载新的瓦片
+        let newTilesCount = 0;
+        for (let x = minX; x <= maxX; x++) {
+          for (let y = minY; y <= maxY; y++) {
+            const cacheKey = `${level}/${x}/${y}`;
+
+            if (tileCache.has(cacheKey)) {
+              continue;
+            }
+
+            const url = urlTemplate
+              .replace(/\{z\}/g, String(level))
+              .replace(/\{x\}/g, String(x))
+              .replace(/\{y\}/g, String(y));
+
+            newTilesCount++;
+            pendingTiles++;
+            const img = new Image();
+            img.crossOrigin = "anonymous";
+
+            img.onload = () => {
+              tileCache.set(cacheKey, img);
+              drawSingleTile(ctx, img, x, y, level);
+              pendingTiles--;
+              if (pendingTiles === 0) {
+                isLoading = false;
+                console.log("所有瓦片加载完成");
+              }
+            };
+
+            img.onerror = () => {
+              console.warn("瓦片加载失败:", url);
+              pendingTiles--;
+              if (pendingTiles === 0) {
+                isLoading = false;
+              }
+            };
+
+            img.src = url;
+          }
+        }
+
+        if (newTilesCount === 0) {
+          isLoading = false;
+        } else {
+          console.log(`正在加载 ${newTilesCount} 个新瓦片`);
+        }
+      }
+
+      animationId = null;
+    });
+  }
+
+  // 9. 绑定事件
+  let renderTimer: any = null;
+
+  function scheduleRender() {
+    if (renderTimer) {
+      clearTimeout(renderTimer);
+    }
+    renderTimer = setTimeout(() => {
+      loadAndDrawTiles();
+      renderTimer = null;
+    }, 16);
+  }
+
+  map.viewer.on("moving", scheduleRender);
+  map.viewer.on("moveend", () => {
+    if (renderTimer) {
+      clearTimeout(renderTimer);
+      renderTimer = null;
+    }
+    loadAndDrawTiles();
+  });
+  map.viewer.on("zoomend", () => {
+    if (renderTimer) {
+      clearTimeout(renderTimer);
+      renderTimer = null;
+    }
+    loadAndDrawTiles();
+  });
+  map.viewer.on("resize", function () {
+    const newSize = self.viewer.getSize();
+    canvas.width = newSize.width;
+    canvas.height = newSize.height;
+    loadAndDrawTiles();
+  });
+
+  setTimeout(() => {
+    loadAndDrawTiles();
+  }, 500);
+
+  return canvas;
+}

package/src/basic/Layer.ts

@@ -0,0 +1,154 @@
+import Eventful from "zrender/lib/core/Eventful";
+
+import { MapElement, MapElementOption } from "./MapElement";
+import { MapCombine } from "./MapCombine";
+
+export interface LayerOption extends MapElementOption {
+  show: boolean;
+  src: string;
+  /** 中心点坐标 [lng, lat, height] */
+  coordinates?: number[];
+  /** 移动 [x, y, z] */
+  translates?: number[];
+  /** 旋转 [x, y, z] */
+  rotates?: number[];
+  /** 缩放 [x, y, z] */
+  scales?: number[];
+  quality: number;
+  opacity?: number;
+  zIndex?: number;
+  minZoom?: number;
+  maxZoom?: number;
+  /** 瓦片地图的切分规则 */
+  tilingScheme?: any;
+  /** 正射影像瓦片数据在地球上覆盖的精确地理范围 */
+  rectangle?: any;
+  /** 支持自定义瓦片加载参数 */
+  credit?: any;
+}
+
+export class Layer extends MapElement<LayerOption> {
+  type = "Layer";
+  tileset;
+  event = new Eventful<{
+    ready: () => void;
+    update: (keys: Set<string>) => void;
+    destroy: () => void;
+    focus: () => void;
+  }>();
+
+  get show() {
+    return this._option.show;
+  }
+
+  set show(val) {
+    if (this._option.show != val) {
+      this._option.show = val;
+      this._update("show");
+    }
+  }
+
+  get src() {
+    return this._option.src;
+  }
+
+  set src(val) {
+    if (this._option.src != val) {
+      this._option.src = val;
+      this._update("src");
+    }
+  }
+
+  get coordinates() {
+    return this._option.coordinates;
+  }
+
+  set coordinates(val) {
+    if (this._option.coordinates != val) {
+      this._option.coordinates = val;
+      this._update("coordinates");
+    }
+  }
+  get opacity() {
+    return this._option.opacity;
+  }
+
+  set opacity(val) {
+    if (this._option.opacity != val) {
+      this._option.opacity = val;
+      this._update("opacity");
+    }
+  }
+
+  get quality() {
+    return this._option.quality;
+  }
+
+  set quality(val) {
+    if (this._option.quality != val) {
+      this._option.quality = val;
+      this._update("quality");
+    }
+  }
+
+  constructor(map: MapCombine, option: Partial<LayerOption> = {}) {
+    super(map, Object.assign({ ...Layer.option }, option));
+  }
+
+  static option: LayerOption = {
+    name: "Layer",
+    show: true,
+    src: "",
+    quality: 0.5,
+    opacity: 1,
+  };
+
+  private _needUpdate?: Set<string>;
+  private _update(key: string) {
+    if (this._needUpdate) {
+      this._needUpdate.add(key);
+    } else {
+      this._needUpdate = new Set([key]);
+      setTimeout(() => {
+        this.event.trigger("update", this._needUpdate);
+        this._needUpdate = undefined;
+      });
+    }
+  }
+
+  /** 基于本地的 ENU 坐标系的偏移，也就是垂直于地表向上为 Z，东为 X，北为 Y
+   * @param dx x轴偏移量。单位：米
+   * @param dy y轴偏移量。单位：米
+   * @param dz z轴偏移量。单位：米
+   * @param tileset Cesium3DTileset
+   */
+  translate(dx: number, dy: number, dz: number, tileset: any = this.tileset) {
+    console.info("Layer translate");
+  }
+  /** 基于本地的 ENU 坐标系的旋转，也就是垂直于地表向上为 Z，东为 X，北为 Y
+   * @param rx 绕X轴旋转的角度。单位：度
+   * @param ry 绕Y轴旋转的角度。单位：度
+   * @param rz 绕Z轴旋转的角度。单位：度
+   * @param tileset Cesium3DTileset
+   */
+  rotate(rx: number, ry: number, rz: number, tileset = this.tileset) {
+    console.info("Layer rotate");
+  }
+  /** 基于本地的 ENU 坐标系的缩放，也就是垂直于地表向上为 Z，东为 X，北为 Y
+   * @param sx x 轴缩放倍数
+   * @param sy y 轴缩放倍数
+   * @param sz z 轴缩放倍数
+   * @param tileset Cesium3DTileset
+   */
+  scale(sx: number, sy: number, sz: number, tileset = this.tileset) {
+    console.info("Layer scale");
+  }
+
+  protected _onDestroy(): void {
+    this.event.trigger("destroy");
+  }
+
+  focus() {
+    this.event.trigger("focus");
+  }
+}

package/src/basic/MapCombine.ts

@@ -1,102 +1,105 @@
-import { ContextMenu } from "./ContextMenu";
-import { MapElement } from "./MapElement";
-import { MapEvent } from "./MapEvent";
-import { Point, PointOption } from "./Point";
-import { PointAggregation, PointAggregationOption } from "./PointAggregation";
-import { Polygon, PolygonOption } from "./Polygon";
-import { Polyline, PolylineOption } from "./Polyline";
-import { ReactPoint, ReactPointOption, drawReactPoint } from "./ReactPoint";
-import { Tile3D, Tile3DOption } from "./Tile3D";
-import { BasicModel, BasicModelOption } from "./BasicModel";
-import { type BasicBusiness, type BasicBusinessOption } from "./BasicBusiness";
-
-import { getBounds } from "../utils/points-viewer";
-
-export abstract class MapCombine {
-  /* 用于挂载html元素的根节点 */
-  readonly htmllayer = document.createElement("div");
-  readonly elements = new Map<string, MapElement>();
-  readonly event = new MapEvent();
-  readonly menu: ContextMenu;
-  abstract get cursor(): string;
-  abstract set cursor(val: string);
-
-  abstract get moveable(): boolean;
-  abstract set moveable(val: boolean);
-
-  abstract get center(): number[];
-  abstract set center(val);
-
-  abstract get zoom(): number;
-  abstract set zoom(val);
-
-  loadPromise: Promise<this> = Promise.resolve(this);
-
-  bussinesses = new Map<string, BasicBusiness<BasicBusinessOption>>();
-
-  /** 地图是否存在 */
-  isAlive = true;
-  constructor() {
-    const { htmllayer } = this;
-    htmllayer.style.zIndex = "1000";
-    htmllayer.style.position = "absolute";
-    htmllayer.style.width = "0";
-    htmllayer.style.height = "0";
-    htmllayer.style.left = "0";
-    htmllayer.style.top = "0";
-    this.menu = new ContextMenu(this);
-    (window as any).map = this;
-    setTimeout(() => {
-      this.bussinesses.forEach((e) => e.show && e.onMapLoaded?.());
-    }, 100);
-  }
-
-  createReactPoint<K>(option?: Partial<ReactPointOption<K>>): ReactPoint<K> {
-    const e = new ReactPoint(this, option);
-    drawReactPoint(this, e);
-    return e;
-  }
-
-  /**
-   * 设置地图视图
-   * @param option 视图参数
-   * @param time 设置时间会动画形式调整视图
-   */
-  abstract createPoint<K>(option?: Partial<PointOption<K>>): Point<K>;
-
-  /** 聚合点 */
-  abstract createPointAggregation(option?: PointAggregationOption): PointAggregation;
-
-  abstract createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K>;
-
-  abstract createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K>;
-
-  abstract createTile3D(option?: Partial<Tile3DOption>): Tile3D;
-
-  /** 创建模型 */
-  createModel?(option?: Partial<BasicModelOption>): BasicModel;
-
-  abstract canvasTgeography(p: number[]): number[];
-
-  abstract geographyTcanvas(p: number[]): number[];
-
-  /**
-   * 所有点位移动至视口，调整位置及层级
-   * @param points
-   */
-  abstract flyToViewer(points: number[][], opt?: Object): void;
-
-  /**
-   * 移动点位到中心点
-   * @param points
-   */
-  abstract flyTo(point: number[], opt?: Object): void;
-
-  getBounds = getBounds;
-
-  destroy() {
-    this.isAlive = false;
-    this.htmllayer.remove();
-    this.event.trigger("destroy");
-  }
-}
+import { ContextMenu } from "./ContextMenu";
+import { MapElement } from "./MapElement";
+import { MapEvent } from "./MapEvent";
+import { Point, PointOption } from "./Point";
+import { PointAggregation, PointAggregationOption } from "./PointAggregation";
+import { Polygon, PolygonOption } from "./Polygon";
+import { Polyline, PolylineOption } from "./Polyline";
+import { ReactPoint, ReactPointOption, drawReactPoint } from "./ReactPoint";
+import { Tile3D, Tile3DOption } from "./Tile3D";
+import { BasicModel, BasicModelOption } from "./BasicModel";
+import { type BasicBusiness, type BasicBusinessOption } from "./BasicBusiness";
+
+import { getBounds } from "../utils/points-viewer";
+import { Layer, LayerOption } from "./Layer";
+
+export abstract class MapCombine {
+  /* 用于挂载html元素的根节点 */
+  readonly htmllayer = document.createElement("div");
+  readonly elements = new Map<string, MapElement>();
+  readonly event = new MapEvent();
+  readonly menu: ContextMenu;
+  abstract get cursor(): string;
+  abstract set cursor(val: string);
+
+  abstract get moveable(): boolean;
+  abstract set moveable(val: boolean);
+
+  abstract get center(): number[];
+  abstract set center(val);
+
+  abstract get zoom(): number;
+  abstract set zoom(val);
+
+  loadPromise: Promise<this> = Promise.resolve(this);
+
+  bussinesses = new Map<string, BasicBusiness<BasicBusinessOption>>();
+
+  /** 地图是否存在 */
+  isAlive = true;
+  constructor() {
+    const { htmllayer } = this;
+    htmllayer.style.zIndex = "1000";
+    htmllayer.style.position = "absolute";
+    htmllayer.style.width = "0";
+    htmllayer.style.height = "0";
+    htmllayer.style.left = "0";
+    htmllayer.style.top = "0";
+    this.menu = new ContextMenu(this);
+    (window as any).map = this;
+    setTimeout(() => {
+      this.bussinesses.forEach((e) => e.show && e.onMapLoaded?.());
+    }, 100);
+  }
+
+  createReactPoint<K>(option?: Partial<ReactPointOption<K>>): ReactPoint<K> {
+    const e = new ReactPoint(this, option);
+    drawReactPoint(this, e);
+    return e;
+  }
+
+  /**
+   * 设置地图视图
+   * @param option 视图参数
+   * @param time 设置时间会动画形式调整视图
+   */
+  abstract createPoint<K>(option?: Partial<PointOption<K>>): Point<K>;
+
+  /** 聚合点 */
+  abstract createPointAggregation(option?: PointAggregationOption): PointAggregation;
+
+  abstract createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K>;
+
+  abstract createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K>;
+
+  abstract createTile3D(option?: Partial<Tile3DOption>): Tile3D;
+
+  abstract createLayer(option?: Partial<LayerOption>): Layer;
+
+  /** 创建模型 */
+  createModel?(option?: Partial<BasicModelOption>): BasicModel;
+
+  abstract canvasTgeography(p: number[]): number[];
+
+  abstract geographyTcanvas(p: number[]): number[];
+
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @param points
+   */
+  abstract flyToViewer(points: number[][], opt?: Object): void;
+
+  /**
+   * 移动点位到中心点
+   * @param points
+   */
+  abstract flyTo(point: number[], opt?: Object): void;
+
+  getBounds = getBounds;
+
+  destroy() {
+    this.isAlive = false;
+    this.htmllayer.remove();
+    this.event.trigger("destroy");
+  }
+}

package/src/basic/Tile3D.ts

@@ -105,7 +105,6 @@ export class Tile3D extends MapElement<Tile3DOption> {
     console.info("TileD translate");
   }
   /** 基于本地的 ENU 坐标系的旋转，也就是垂直于地表向上为 Z，东为 X，北为 Y
-   * https://blog.csdn.net/weixin_70945905/article/details/142419968
    * @param rx 绕X轴旋转的角度。单位：度
    * @param ry 绕Y轴旋转的角度。单位：度
    * @param rz 绕Z轴旋转的角度。单位：度