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

package/src/amap/AMapEvent.ts

@@ -1,54 +1,110 @@
-import { AMap } from "./AMap";
-
-/**
- * 高德地图事件
- * 高德地图 元素事件由各自元素处理
- * @param map
- */
-export function bindEvent(map: AMap) {
-  const { event, viewer, container } = map;
-
-  const frame = () => {
-    if (map.isAlive) {
-      requestAnimationFrame(frame);
-      event.trigger("view-preRender");
-    }
-  };
-  frame();
-
-  viewer.on("moveend", (e) => {
-    event.trigger("view-moveEnd");
-    event.trigger("view-change");
-  });
-
-  container.addEventListener("mousedown", (e) => {
-    event.trigger("pointer-down");
-  });
-
-  container.addEventListener("mouseup", (e) => {
-    event.trigger("pointer-up");
-  });
-
-  // 解决 ReactPoint 点击事件无法触发的问题
-  container.addEventListener("click", (e) => {
-    event.trigger("left-click");
-  });
-
-  viewer.on("mousemove", (e) => {
-    event.trigger("pointer-move");
-    event.canvas = [e.pixel.x, e.pixel.y];
-    event.geography = [e.lnglat.lng, e.lnglat.lat];
-  });
-
-  viewer.on("mapmove", () => {
-    event.trigger("view-change");
-  });
-
-  viewer.on("click", (e) => {
-    event.trigger("left-click");
-  });
-
-  viewer.on("dblclick", (e) => {
-    map.event.trigger("double-click");
-  });
-}
+import { pointToLineDistance } from "@turf/turf";
+
+import { AMap } from "./AMap";
+
+/**
+ * 高德地图事件
+ * 高德地图 元素事件由各自元素处理
+ * @param map
+ */
+export function bindEvent(map: AMap) {
+  const { event, viewer, container } = map;
+
+  const frame = () => {
+    if (map.isAlive) {
+      requestAnimationFrame(frame);
+      event.trigger("view-preRender");
+      map.bussinesses.forEach((e) => e.show && e.onFrame?.());
+    }
+  };
+  frame();
+
+  viewer.on("moveend", (e) => {
+    event.trigger("view-moveEnd");
+    event.trigger("view-change");
+  });
+
+  container.addEventListener("mousedown", (e) => {
+    event.trigger("pointer-down");
+  });
+
+  container.addEventListener("mouseup", (e) => {
+    event.trigger("pointer-up");
+  });
+
+  // 解决 ReactPoint 点击事件无法触发的问题
+  container.addEventListener("click", (e) => {
+    event.trigger("left-click");
+  });
+
+  viewer.on("mousemove", (e) => {
+    event.trigger("pointer-move");
+    event.canvas = [e.pixel.x, e.pixel.y];
+    event.geography = [e.lnglat.lng, e.lnglat.lat];
+  });
+
+  viewer.on("mapmove", () => {
+    event.trigger("view-change");
+  });
+
+  viewer.on("click", (e) => {
+    event.trigger("left-click");
+
+    // "drill-pick" 获取点击位置的元素
+    const clickPosition = e.lnglat;
+    const position = [clickPosition.lng, clickPosition.lat];
+    const allOverlays = viewer.getAllOverlays(); // 获取所有覆盖物
+    const pickedObjects = [];
+
+    // 遍历所有覆盖物，检查点击位置是否在覆盖物内
+    allOverlays.forEach((overlay) => {
+      // 判断是否为多边形
+      if (overlay instanceof map.LbsAMap.Polygon) {
+        // 使用 contains 方法判断点是否在多边形内
+        if (overlay.contains(clickPosition)) {
+          pickedObjects.push(overlay);
+        }
+      }
+      // 判断是否为折线
+      else if (overlay instanceof map.LbsAMap.Polyline) {
+        // 使用点线距离计算
+        const path = overlay.getPath();
+        const coords = path.map((p) => [p.getLng(), p.getLat()]);
+        const distance = pointToLineDistance(position, coords, { units: "meters" });
+
+        // 获取当前地图的分辨率（米/像素） 每像素代表多少米
+        const resolution = viewer.getResolution();
+        // 计算线宽对应的地理距离（单边）
+        const halfWidthInMeters = (overlay.getOptions().strokeWeight / 2) * resolution;
+
+        // 根据距离判断是否点击
+        if (distance < halfWidthInMeters + 2) {
+          pickedObjects.push(overlay);
+        }
+      }
+      // 判断是否为 Marker
+      else if (overlay instanceof map.LbsAMap.Marker) {
+        const position = overlay.getPosition();
+        const distance = map.LbsAMap.GeometryUtil.distance(position, clickPosition);
+        if (distance < 20) {
+          // 点击位置距离 Marker 小于 20 像素
+          pickedObjects.push(overlay);
+        }
+      }
+    });
+
+    // 按 zIndex 从高到低排序
+    pickedObjects.sort((a, b) => (b.getzIndex?.() || 0) - (a.getzIndex?.() || 0));
+
+    event.trigger("drill-pick", {
+      event: e,
+      pickedTargets: pickedObjects.map((it) => it.getOptions()?.extData?.target),
+      sourceObjects: pickedObjects,
+      position: position,
+    });
+  });
+
+  viewer.on("dblclick", (e) => {
+    map.event.trigger("double-click");
+  });
+}

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;
+}