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

package/src/mine/MinePoint.ts

@@ -28,10 +28,16 @@ export function drawPoint(map: MineMap, point: Point<unknown>) {
   };
 
   const marker = new minemap.Marker({
+    id: point.name,
     draggable: point.editable,
     rotation: 0,
     offset: [-size[0] * center[0], -size[1] * center[1]],
     element: img,
+    extData: {
+      name: point.name,
+      target: point,
+      userdata: point.userdata,
+    },
   });
 
   if (point.coordinates) {
@@ -69,7 +75,7 @@ export function drawPoint(map: MineMap, point: Point<unknown>) {
           break;
         case "coordinates":
           if (point.coordinates) {
-            marker.setLngLat(point.coordinates).setAltitude(point.coordinates[2] ?? 0);
+            marker.setLngLat(point.coordinates).setAltitude(point.coordinates[2] ?? point.height);
             switch (status) {
               case 0:
                 point.show && marker.addTo(map.viewer);

package/src/mine/MinePolygon.ts

@@ -50,6 +50,7 @@ function getPolygonOption(polygon: Polygon<unknown>) {
       "fill-color": color,
       "fill-opacity": opacity,
     },
+    zIndex: polygon.coordinates[0]?.[2] ?? polygon.height,
   };
 }
 
@@ -148,11 +149,15 @@ function main(map: MineMap, polygon: Polygon<unknown>) {
         type: "Feature",
         geometry: {
           type: "Polygon",
-          coordinates: [[...coordinates, coordinates[0]]],
+          coordinates: [[...coordinates, coordinates[0]].map((it) => [it[0], it[1], it[2] ?? polygon.height])],
         },
         properties: {
           id: polygon.name,
         },
+        extData: {
+          name: polygon.name,
+          userdata: polygon.userdata,
+        },
       };
     } else {
       data.features = [];

package/src/mine/MinePolyline.ts

@@ -56,6 +56,7 @@ function getLayerOption(polyline: Polyline<unknown>) {
           "line-color": polyline.stroke,
           "line-width": polyline.lineWidth,
         },
+    zIndex: polyline.coordinates[0]?.[2] ?? polyline.height,
   };
 }
 
@@ -130,10 +131,14 @@ function main(map: MineMap, polyline: Polyline<unknown>) {
         type: "Feature",
         geometry: {
           type: "LineString",
-          coordinates: coordinates,
+          coordinates: coordinates?.map((it) => [it[0], it[1], it[2] ?? polyline.height]),
         },
         properties: {
           id: polyline.name,
+          extData: {
+            name: polyline.name,
+            userdata: polyline.userdata,
+          },
         },
       };
     } else {

package/src/openlayer/OpenlayerEvent.ts

@@ -1,87 +1,109 @@
-import { OpenlayerMap } from "./OpenlayerMap";
-
-export function bindEvent(map: OpenlayerMap) {
-  const { event, viewer, container } = map;
-  let target: any;
-  let moving = false;
-
-  const frame = () => {
-    if (map.isAlive) {
-      requestAnimationFrame(frame);
-      event.trigger("view-preRender");
-    }
-  };
-  frame();
-
-  viewer.on("moveend", (e) => {
-    event.trigger("view-moveEnd");
-  });
-
-  viewer.on("pointermove", (e) => {
-    event.canvas = e.pixel;
-    event.geography = map.canvasTgeography(event.canvas);
-    let _target: any;
-    if (moving) {
-      event.trigger("pointer-move");
-      return;
-    }
-    const res = viewer.getFeaturesAtPixel(event.canvas)[0];
-    _target = res ? res.get("event") : undefined;
-    if (_target?.silent) {
-      _target = undefined;
-    }
-    if (_target !== target) {
-      target?.onPointerOut?.();
-      _target?.onPointerIn?.();
-      target = _target;
-    }
-    event.trigger("pointer-move");
-  });
-
-  container.addEventListener("mousedown", () => {
-    if (target) {
-      moving = true;
-      target.onPointerDown?.();
-    }
-    event.trigger("pointer-down");
-  });
-
-  container.addEventListener("mouseup", () => {
-    if (target) {
-      moving = false;
-      target.onPointerUp?.();
-    }
-    event.trigger("pointer-up");
-  });
-
-  container.addEventListener("contextmenu", (e) => {
-    e.preventDefault();
-    if (target) {
-      target.onRClick?.();
-    }
-  });
-
-  viewer.on("click", () => {
-    if (target) {
-      target.onLClick?.();
-    }
-    event.trigger("left-click");
-  });
-
-  viewer.on("dblclick", () => {
-    if (target) {
-      target.onDbClick?.();
-    }
-    map.event.trigger("double-click");
-  });
-
-  let key = 0;
-
-  viewer.on("precompose", () => {
-    const _key = map.center.reduce((a, b) => a + b, map.zoom);
-    if (key != _key) {
-      key = _key;
-      event.trigger("view-change");
-    }
-  });
-}
+import { OpenlayerMap } from "./OpenlayerMap";
+
+export function bindEvent(map: OpenlayerMap) {
+  const { event, viewer, container } = map;
+  let target: any;
+  let moving = false;
+
+  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");
+  });
+
+  viewer.on("pointermove", (e) => {
+    event.canvas = e.pixel;
+    event.geography = map.canvasTgeography(event.canvas);
+    let _target: any;
+    if (moving) {
+      event.trigger("pointer-move");
+      return;
+    }
+    const res = viewer.getFeaturesAtPixel(event.canvas)[0];
+    _target = res ? res.get("event") : undefined;
+    if (_target?.silent) {
+      _target = undefined;
+    }
+    if (_target !== target) {
+      target?.onPointerOut?.();
+      _target?.onPointerIn?.();
+      target = _target;
+    }
+    event.trigger("pointer-move");
+  });
+
+  container.addEventListener("mousedown", () => {
+    if (target) {
+      moving = true;
+      target.onPointerDown?.();
+    }
+    event.trigger("pointer-down");
+  });
+
+  container.addEventListener("mouseup", () => {
+    if (target) {
+      moving = false;
+      target.onPointerUp?.();
+    }
+    event.trigger("pointer-up");
+  });
+
+  container.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    if (target) {
+      target.onRClick?.();
+    }
+  });
+
+  viewer.on("click", () => {
+    if (target) {
+      target.onLClick?.();
+    }
+    event.trigger("left-click");
+  });
+
+  // 监听地图的单击事件
+  viewer.on("singleclick", function (e) {
+    // 使用 forEachFeatureAtPixel 查询该像素位置下的所有要素
+    const pickedObjects = [];
+    viewer.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
+      // 这个回调函数会为每一个被点击到的要素执行
+      pickedObjects.push(feature);
+      // 返回 true 可以提前终止遍历
+      // return true;
+    });
+
+    if (pickedObjects.length > 0) {
+      event.trigger("drill-pick", {
+        event: e,
+        pickedTargets: pickedObjects.map((it) => it?.values_?.userData?.target),
+        sourceObjects: pickedObjects,
+        position: map.canvasTgeography(e.pixel),
+      });
+    }
+  });
+
+  viewer.on("dblclick", () => {
+    if (target) {
+      target.onDbClick?.();
+    }
+    map.event.trigger("double-click");
+  });
+
+  let key = 0;
+
+  viewer.on("precompose", () => {
+    const _key = map.center.reduce((a, b) => a + b, map.zoom);
+    if (key != _key) {
+      key = _key;
+      event.trigger("view-change");
+    }
+  });
+}

package/src/openlayer/OpenlayerPoint.ts

@@ -26,7 +26,12 @@ export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
     visible: point.show,
   });
   viewer.addLayer(layer);
-  const feature = new Feature();
+  const feature = new Feature({
+    userData: {
+      name: point.name,
+      target: point,
+    },
+  });
   const geometry = new OlPoint([0, 0]);
   const style = new Style({
     image: new Icon({

package/src/openlayer/OpenlayerPolygon.ts

@@ -26,7 +26,12 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
   let status = 0;
   let skip = 0;
 
-  const feature = new Feature();
+  const feature = new Feature({
+    userData: {
+      name: polygon.name,
+      target: polygon,
+    },
+  });
   const geometry = new OlPolygon([
     [
       [0, 0],

package/src/openlayer/OpenlayerPolyline.ts

@@ -25,7 +25,12 @@ export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
   let status = 0;
   let skip = 0;
 
-  const feature = new Feature();
+  const feature = new Feature({
+    userData: {
+      name: polyline.name,
+      target: polyline,
+    },
+  });
   const geometry = new LineString([
     [0, 0],
     [0, 0],
@@ -64,6 +69,8 @@ export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
   });
 
   const _event = {
+    name: polyline.name,
+    target: polyline,
     cursor: polyline.cursor,
     silent: polyline.silent,
     onPointerIn() {

package/src/utils/color.ts

@@ -0,0 +1,49 @@
+/**
+ * 解析十六进制颜色字符串，拆分为颜色值和透明度
+ * @param {string} hexColor - 十六进制颜色字符串，支持格式：#RGB, #RRGGBB, #RRGGBBAA, #RGBA
+ * @param {number} defaultOpacity - 默认透明度（0-1），当颜色没有透明度时使用
+ * @returns {Object} { color: string, opacity: number }
+ * @throws {Error} 如果颜色格式无效
+ */
+export function parseHexColor(hexColor, defaultOpacity = 1) {
+  // 移除开头的 # 号（如果有）
+  let hex = hexColor.replace(/^#/, "");
+
+  // 验证是否为有效的十六进制字符串
+  if (!/^[0-9a-fA-F]+$/.test(hex)) {
+    throw new Error(`无效的颜色格式: "${hexColor}"`);
+  }
+
+  let color = "";
+  let opacity = defaultOpacity;
+
+  switch (hex.length) {
+    case 3: // #RGB
+      color = `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+      opacity = defaultOpacity;
+      break;
+
+    case 4: // #RGBA
+      color = `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+      opacity = parseInt(hex[3] + hex[3], 16) / 255;
+      break;
+
+    case 6: // #RRGGBB
+      color = `#${hex}`;
+      opacity = defaultOpacity;
+      break;
+
+    case 8: // #RRGGBBAA
+      color = `#${hex.slice(0, 6)}`;
+      opacity = parseInt(hex.slice(6, 8), 16) / 255;
+      break;
+
+    default:
+      throw new Error(`不支持的十六进制颜色长度: "${hexColor}"，长度必须为 3、4、6 或 8`);
+  }
+
+  // 确保透明度在 0-1 范围内
+  opacity = Math.max(0, Math.min(1, opacity));
+
+  return { color, opacity };
+}

package/src/utils/index.ts

@@ -12,6 +12,9 @@ export function setValue<T>(obj: any, key: string, val: T, onChange: () => void)
   }
 }
 
+/**
+ * 建立两个一维区间之间的线性映射关系，提供正向变换和逆向变换
+ */
 export class OneDimensional {
   k: number;
   b: number;

package/src/utils/points-viewer.ts

@@ -43,5 +43,31 @@ export const getBounds = function (points, opt) {
   minLat -= avoid[1] * latPixelRatio;
   maxLat += avoid[0] * latPixelRatio;
 
-  return [minLon, minLat, maxLon, maxLat];
+  // 根据 maxZoom 计算最小矩形范围
+  const minRange = getMinRangeFromZoom(opt.maxZoom);
+  const centerLon = (minLon + maxLon) / 2;
+  const centerLat = (minLat + maxLat) / 2;
+
+  // 确保矩形范围不小于最小值 解决点位距离过近导致异常缩放问题
+  let finalWest = Math.min(minLon, centerLon - minRange / 2);
+  let finalEast = Math.max(maxLon, centerLon + minRange / 2);
+  let finalSouth = Math.min(minLat, centerLat - minRange / 2);
+  let finalNorth = Math.max(maxLat, centerLat + minRange / 2);
+
+  return [finalWest, finalSouth, finalEast, finalNorth];
 };
+
+/**
+ * 根据 maxZoom 计算出一个“最小”的经纬度跨度
+ * @param zoom
+ * @returns
+ */
+export function getMinRangeFromZoom(zoom) {
+  // 每个瓦片覆盖的经度范围
+  const lonPerTile = 360 / Math.pow(2, zoom);
+  // 每个瓦片覆盖的纬度范围（近似）
+  const latPerTile = 180 / Math.pow(2, zoom);
+
+  // 返回一个足够小的范围，比如一个瓦片范围的一半
+  return Math.max(lonPerTile, latPerTile) / 2;
+}

package/src/utils/turfjs-utils.ts

@@ -0,0 +1,52 @@
+/**
+ * 通用函数：提取所有坐标并扁平化为普通数组
+ * @param geojsonFeature
+ * @param geomType
+ * @returns
+ */
+export function extractCoordinatesToArr(coords, geomType) {
+  if (geomType === "Polygon") {
+    // 多边形：三维数组 [环1[点1,点2...], 环2[...]] -> 转为二维数组
+    return coords.map(
+      (ring) => ring.map((coord) => [coord[0], coord[1]]), // 提取经度、纬度
+    );
+  } else if (geomType === "MultiPolygon") {
+    // 多部件多边形：四维数组 -> 转为三维数组
+    return coords.map((polygon) => polygon.map((ring) => ring.map((coord) => [coord[0], coord[1]])));
+  } else if (geomType === "Point") {
+    // 点：返回一维数组
+    return [coords[0], coords[1]];
+  } else if (geomType === "LineString") {
+    // 线：返回二维数组
+    return coords.map((coord) => [coord[0], coord[1]]);
+  }
+
+  return coords;
+}
+
+/**
+ * 通用函数：提取所有坐标并扁平化为普通数组
+ * @param geojsonFeature
+ * @returns
+ */
+export function extractGeojsonCoordinatesToArr(geojsonFeature) {
+  const coords = geojsonFeature.geometry.coordinates;
+  const geomType = geojsonFeature.geometry.type;
+  if (geomType === "Polygon") {
+    // 多边形：三维数组 [环1[点1,点2...], 环2[...]] -> 转为二维数组
+    return coords.map(
+      (ring) => ring.map((coord) => [coord[0], coord[1]]), // 提取经度、纬度
+    );
+  } else if (geomType === "MultiPolygon") {
+    // 多部件多边形：四维数组 -> 转为三维数组
+    return coords.map((polygon) => polygon.map((ring) => ring.map((coord) => [coord[0], coord[1]])));
+  } else if (geomType === "Point") {
+    // 点：返回一维数组
+    return [coords[0], coords[1]];
+  } else if (geomType === "LineString") {
+    // 线：返回二维数组
+    return coords.map((coord) => [coord[0], coord[1]]);
+  }
+
+  return coords;
+}

package/src/utils/types.d.ts

@@ -0,0 +1,12 @@
+export enum HtmlPosition {
+  "auto",
+  "bottomright",
+  "bottom",
+  "bottomleft",
+  "right",
+  "top",
+  "left",
+  "topright",
+  "topleft" = 9,
+  "center",
+}