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

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",
+}