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

package/src/openlayer/OpenlayerPolygon.ts

@@ -10,26 +10,10 @@ import iconPoint from "../assets/point.png";
 import iconAdd from "../assets/add.png";
 import Point from "ol/geom/Point.js";
 import { ChainNode, PolygonEditor } from "../utils/PolygonEditor";
-const styleNode = new Style({
-  image: new Icon({
-    width: 16,
-    height: 16,
-    src: iconPoint,
-    crossOrigin: "anonymous",
-  }),
-});
-
-const styleVirtual = new Style({
-  image: new Icon({
-    width: 16,
-    height: 16,
-    src: iconAdd,
-    crossOrigin: "anonymous",
-  }),
-});
 
 export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
-  const { event, viewer, vectors, getFromLonLat, isFromLonLat } = map;
+  const { event, viewer, vectors, isFromLonLat } = map;
+  // getFromLonLat 使用 map.getFromLonLat 调用，保证 this 指向正确
 
   const source = new VectorSource();
 
@@ -42,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],
@@ -62,6 +51,27 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
     stroke,
     fill,
   });
+  const styleNode = new Style({
+    image: new Icon({
+      width: 16,
+      height: 16,
+      src: iconPoint,
+      crossOrigin: "anonymous",
+    }),
+    // 保证编辑的点位高于线
+    zIndex: style.getZIndex() + 5,
+  });
+
+  const styleVirtual = new Style({
+    image: new Icon({
+      width: 16,
+      height: 16,
+      src: iconAdd,
+      crossOrigin: "anonymous",
+    }),
+    // 保证编辑的点位高于线
+    zIndex: style.getZIndex() + 5,
+  });
 
   const _event = {
     cursor: polygon.cursor,
@@ -95,7 +105,7 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
   feature.set("event", _event, true);
   if (polygon.coordinates) {
     status = 2;
-    geometry.setCoordinates([polygon.coordinates.map((e) => getFromLonLat(e, isFromLonLat))]);
+    geometry.setCoordinates([polygon.coordinates.map((e) => map.getFromLonLat(e, isFromLonLat))]);
     layer.setZIndex(polygon.coordinates[0][2] ?? 1);
     source.addFeature(feature);
   }
@@ -115,7 +125,7 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
           break;
         case "coordinates":
           if (polygon.coordinates) {
-            geometry.setCoordinates([polygon.coordinates.map((e) => getFromLonLat(e, isFromLonLat))]);
+            geometry.setCoordinates([polygon.coordinates.map((e) => map.getFromLonLat(e, isFromLonLat))]);
             layer.setZIndex(polygon.coordinates[0][2] ?? 1);
             switch (status) {
               case 0:
@@ -157,11 +167,11 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
     switch (status) {
       case 1:
         cache.pop();
-        cache.push(getFromLonLat(event.geography));
+        cache.push(map.getFromLonLat(event.geography));
         geometry.setCoordinates([cache]);
         break;
       case 4:
-        activeNode.update(getFromLonLat(event.geography));
+        activeNode.update(map.getFromLonLat(event.geography));
         geometry.setCoordinates([editor.getCoordinates()]);
         break;
     }
@@ -171,7 +181,7 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
     switch (status) {
       case 0:
         status = 1;
-        cache = [getFromLonLat(event.geography)];
+        cache = [map.getFromLonLat(event.geography)];
         cache.push(cache[0]);
         geometry.setCoordinates([cache]);
         source.addFeature(feature);

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],
@@ -48,7 +53,7 @@ export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
       src: iconPoint,
       crossOrigin: "anonymous",
     }),
-    // 保证线编辑的点位高于线
+    // 保证编辑的点位高于线
     zIndex: style.getZIndex() + 5,
   });
 
@@ -59,11 +64,13 @@ export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
       src: iconAdd,
       crossOrigin: "anonymous",
     }),
-    // 保证线编辑的点位高于线
+    // 保证编辑的点位高于线
     zIndex: style.getZIndex() + 5,
   });
 
   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",
+}