@hzab/map-combine 0.3.0-beta → 0.3.1-alpha.0

package/CHANGELOG.md

@@ -1,7 +1,9 @@
-# @hzab/map-combine0.3.0
+# @hzab/map-combine1.0.0
 
 fix: reactpoint 添加高德地图引擎并添加相应点线面绘制
 feat: 高德地图支持 ReactPoint
+feat: 增加 loadPromise 参数，用于地图异步加载判断是否加载完成
+fix: 解决 ReactPoint 点击事件无法触发的问题
 
 # @hzab/map-combine0.2.8
 

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.3.0-beta",
+  "version": "0.3.1-alpha.0",
   "description": "地图组件",
   "main": "src",
   "scripts": {
     "dev": "npm run prepare && webpack serve -c ./config/webpack.config.js --env local",
     "build": "webpack -c ./config/webpack.config.js --env production",
-    "publish-beta": "npm publish --beta",
+    "version:alpha": "npm version prerelease --preid=alpha",
+    "publish:alpha": "npm publish --tag alpha",
+    "version:beta": "npm version prerelease --preid=beta",
+    "publish:beta": "npm publish --tag beta",
+    "version:patch": "npm version patch",
+    "version:minior": "npm version minor",
+    "version:major": "npm version major",
+    "publish:stable": "npm publish --access public",
     "publish-patch": "npm version patch && npm publish --access public",
     "publish-minor": "npm version minor && npm publish --access public",
     "publish-major": "npm version major && npm publish --access public",
@@ -22,11 +29,11 @@
   "author": "CaiYansong",
   "license": "ISC",
   "devDependencies": {
-    "ol": "^7.4.0",
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@hzab/permissions": "0.1.1",
     "@hzab/webpack-config": "^0.2.1",
     "@turf/turf": "6.5",
+    "@types/amap-js-api": "^1.4.16",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "antd": "^4.14.0",
@@ -36,6 +43,7 @@
     "lil-gui": "^0.19.2",
     "mobx": "^6.7.0",
     "mobx-react": "^7.6.0",
+    "ol": "^7.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.14.1",
@@ -56,5 +64,6 @@
     "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
       "prettier --write"
     ]
-  }
+  },
+  "dependencies": {}
 }

package/src/amap/AMap.ts

@@ -12,7 +12,7 @@ import { drawPolyline } from "./AMapPolyline";
 import { drawPolygon } from "./AMapPolygon";
 
 export interface IAMapOption {
-  container;
+  container: HTMLDivElement;
   url?: string | string[];
   center?: number[];
   zoom?: number;
@@ -26,6 +26,10 @@ export interface IAMapOption {
   securityJsCode: string;
   /** 加载的插件列表 */
   plugins?: [string];
+  /** loader 配置参数 */
+  loaderOpt?: Object;
+  /** 地图初始化 配置参数 */
+  mapOpt?: Object;
 }
 
 export interface IFlyToViewerOpt {
@@ -37,17 +41,20 @@ export interface IFlyToViewerOpt {
    * (Array<number> = [0,0,0,0]) 距离边框的内边距，顺序：上、下、左、右
    */
   avoid?: [number, number, number, number];
+  /**
+   * 最大缩放级别
+   */
+  maxZoom?: number;
 }
 
 export class AMap extends MapCombine {
-  loadPromise;
   viewer: any;
-  container: HTMLDivElement;
-  option;
+  container: HTMLDivElement = null;
+  option: any = {};
   offset: number[];
   fov = 0.9272952180016121;
   isFromLonLat = true;
-  LbsAMap;
+  LbsAMap: any;
   get cursor(): string {
     return this.container.style.cursor;
   }
@@ -109,6 +116,7 @@ export class AMap extends MapCombine {
 
     this.loadPromise = new Promise((resolve, reject) => {
       AMapLoader({
+        ...opt.loaderOpt,
         key,
         securityJsCode,
         plugins,
@@ -117,6 +125,7 @@ export class AMap extends MapCombine {
           this.LbsAMap = LbsAMap;
           let _urls = Array.isArray(url) ? url : [url];
           this.viewer = new LbsAMap.Map(container, {
+            ...opt.mapOpt,
             zoom: zoom || 14,
             center: center || [120.160217, 30.243861],
             doubleClickZoom: false,
@@ -139,11 +148,11 @@ export class AMap extends MapCombine {
               : undefined,
           });
           this.viewer.on("complete", () => {
-            resolve(this.viewer);
+            resolve(this);
           });
 
           this._initParamsEvent(this.viewer);
-          return this.viewer;
+          return this;
         })
         .catch(reject);
     });
@@ -243,7 +252,50 @@ export class AMap extends MapCombine {
         opt?.immediately,
         opt?.avoid,
       );
+
+      var currentZoom = this.viewer.getZoom();
+
+      if (opt.maxZoom && currentZoom > opt.maxZoom) {
+        // 如果当前缩放级别超过限制，则手动设置回最大允许级别
+        this.viewer.setZoom(opt.maxZoom);
+      }
     });
   }
+
+  /**
+   * 将点集视野调整至容器内，支持相对边距（百分比）
+   * @param {number[][]} points - 经纬度数组 [[lng, lat], ...]
+   * @param {Object} opt
+   * @param {number[]} opt.avoid - 相对边距 [上, 下, 左, 右]，取值范围 0~1，默认 [0,0,0,0]
+   * @param {boolean} opt.immediately - 是否立即跳转，默认 false（带动画）
+   */
+  flyToViewerPercent(points: number[][], opt = { avoid: [0, 0, 0, 0], immediately: false }) {
+    if (!points?.length) return;
+
+    // 计算原始经纬度范围
+    let west = Infinity,
+      east = -Infinity,
+      south = Infinity,
+      north = -Infinity;
+    points.forEach(([lng, lat]) => {
+      west = Math.min(west, lng);
+      east = Math.max(east, lng);
+      south = Math.min(south, lat);
+      north = Math.max(north, lat);
+    });
+
+    // 应用相对边距
+    const [top, bottom, left, right] = opt.avoid;
+    const lngSpan = east - west;
+    const latSpan = north - south;
+
+    const bounds = this.LbsAMap.Bounds(
+      [west - lngSpan * left, south - latSpan * bottom],
+      [east + lngSpan * right, north + latSpan * top],
+    );
+
+    this.viewer.setBounds(bounds, opt.immediately);
+  }
+
   flyTo() {}
 }

package/src/amap/AMapEvent.ts

@@ -24,8 +24,15 @@ export function bindEvent(map: AMap) {
     event.trigger("pointer-up");
   });
 
-  viewer.on("mousemove", () => {
+  // 解决 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", () => {

package/src/amap/AMapPolygon.ts

@@ -1,196 +1,195 @@
-import { AMap } from "./AMap";
-import { Polygon } from "../basic/Polygon";
-
-export function drawPolygon(map: AMap, polygon: Polygon<unknown>) {
-  const { event, viewer, LbsAMap } = map;
-
-  let status = 0;
-  let skip = 0;
-  let target = null;
-  let aMapPolygonEditor = null;
-
-  const _event = {
-    cursor: polygon.cursor,
-    silent: polygon.silent,
-    onPointerIn() {
-      console.log("onPointerIn", status);
-      status == 2 && polygon.event.trigger("pointer-in");
-    },
-    onPointerOut() {
-      status == 2 && polygon.event.trigger("pointer-out");
-    },
-    onLClick() {
-      status == 2 && polygon.event.trigger("left-click");
-    },
-    onRClick(e) {
-      event.canvas = [e.pixel.x, e.pixel.y];
-      if (polygon.menu) {
-        map.menu.show(polygon.menu);
-      }
-      status == 2 && polygon.event.trigger("right-click");
-    },
-    onDbClick() {
-      polygon.editable &&
-        status == 2 &&
-        setTimeout(() => {
-          aMapPolygonEditor.setTarget(target);
-          aMapPolygonEditor.open();
-          polygon.event.trigger("start-edit");
-        });
-    },
-  };
-
-  const bindEvent = (graphical) => {
-    graphical.on("click", _event.onLClick);
-    graphical.on("rightclick", _event.onRClick);
-    graphical.on("dblclick", _event.onDbClick);
-    graphical.on("mouseover", _event.onPointerIn);
-    graphical.on("mouseout", _event.onPointerOut);
-  };
-
-  aMapPolygonEditor = new LbsAMap.PolygonEditor(viewer, undefined, {
-    createOptions: {
-      strokeColor: polygon.stroke,
-      strokeWeight: polygon.lineWidth,
-      fillOpacity: 0.4,
-      fillColor: polygon.fill,
-      strokeStyle: polygon.dash ? "dashed" : "solid",
-      strokeDasharray: [10, 10],
-    },
-    editOptions: {
-      strokeColor: polygon.stroke,
-      strokeWeight: polygon.lineWidth,
-      fillOpacity: 0.4,
-      fillColor: polygon.fill,
-      strokeStyle: polygon.dash ? "dashed" : "solid",
-      strokeDasharray: [10, 10],
-    },
-  });
-
-  aMapPolygonEditor.on("add", (e) => {
-    status = 3;
-    target = e.target;
-    bindEvent(target);
-    // polygon.event.trigger("data-loaded");
-  });
-  if (polygon.coordinates) {
-    status = 2;
-    target = new LbsAMap.Polygon({
-      path: polygon.coordinates,
-      strokeColor: polygon.stroke,
-      strokeWeight: polygon.lineWidth,
-      fillOpacity: 0.4,
-      fillColor: polygon.fill,
-      strokeStyle: polygon.dash ? "dashed" : "solid",
-      strokeDasharray: [10, 10],
-    });
-    viewer.add(target);
-    bindEvent(target);
-  } else {
-    aMapPolygonEditor.close();
-    aMapPolygonEditor.setTarget();
-    aMapPolygonEditor.open();
-  }
-  const onUpdate = (e: Set<string>) => {
-    if (skip) {
-      skip--;
-      return;
-    }
-
-    e.forEach((key) => {
-      switch (key) {
-        case "show":
-          if (polygon.show) {
-            target.show();
-          } else {
-            target.hide();
-          }
-          break;
-        case "editable":
-          break;
-        case "coordinates":
-          if (polygon.coordinates) {
-            target.setPath(polygon.coordinates);
-            target.setzIndex(polygon.coordinates[2]);
-            target.show();
-            status = 2;
-          } else {
-            target.hide();
-            status = 0;
-          }
-          break;
-
-        case "lineWidth":
-          target.setOptions({
-            strokeWeight: polygon.lineWidth,
-          });
-          break;
-        case "fill":
-          target.setOptions({
-            fillColor: polygon.fill,
-          });
-          break;
-        case "stroke":
-          target.setOptions({
-            strokeColor: polygon.stroke,
-          });
-          break;
-        case "dash":
-          target.setOptions({
-            strokeStyle: polygon.dash ? "dashed" : "solid",
-          });
-          break;
-        default:
-          throw new Error(`${key} 还不支持修改`);
-      }
-    });
-  };
-  const onDbClick = () => {
-    switch (status) {
-      case 1:
-        status = 2;
-        skip++;
-        polygon.coordinates = target.getPath().map((item) => [item.lng, item.lat]);
-        polygon.event.trigger("data-loaded");
-        polygon.event.trigger("pointer-in");
-        break;
-      case 3:
-        polygon.event.trigger("stop-edit");
-        aMapPolygonEditor.setTarget();
-        aMapPolygonEditor.close();
-        break;
-    }
-  };
-  const onStartEdit = () => {
-    switch (status) {
-      case 2:
-        status = 3;
-        break;
-    }
-  };
-
-  const onStopEdit = () => {
-    if (status == 3) {
-      status = 2;
-      skip++;
-      polygon.coordinates = target.getPath().map((item) => [item.lng, item.lat]);
-    }
-  };
-
-  const onDestroy = () => {
-    viewer.remove(target);
-    aMapPolygonEditor.close();
-    aMapPolygonEditor.setTarget();
-    event.off("double-click", onDbClick);
-    polygon.event.off("update", onUpdate);
-    polygon.event.off("start-edit", onStartEdit);
-    polygon.event.off("stop-edit", onStopEdit);
-    polygon.event.off("destroy", onDestroy);
-  };
-
-  event.on("double-click", onDbClick);
-  polygon.event.on("update", onUpdate);
-  polygon.event.on("start-edit", onStartEdit);
-  polygon.event.on("stop-edit", onStopEdit);
-  polygon.event.on("destroy", onDestroy);
-}
+import { AMap } from "./AMap";
+import { Polygon } from "../basic/Polygon";
+
+export function drawPolygon(map: AMap, polygon: Polygon<unknown>) {
+  const { event, viewer, LbsAMap } = map;
+
+  let status = 0;
+  let skip = 0;
+  let target = null;
+  let aMapPolygonEditor = null;
+
+  const _event = {
+    cursor: polygon.cursor,
+    silent: polygon.silent,
+    onPointerIn() {
+      status == 2 && polygon.event.trigger("pointer-in");
+    },
+    onPointerOut() {
+      status == 2 && polygon.event.trigger("pointer-out");
+    },
+    onLClick() {
+      status == 2 && polygon.event.trigger("left-click");
+    },
+    onRClick(e) {
+      event.canvas = [e.pixel.x, e.pixel.y];
+      if (polygon.menu) {
+        map.menu.show(polygon.menu);
+      }
+      status == 2 && polygon.event.trigger("right-click");
+    },
+    onDbClick() {
+      polygon.editable &&
+        status == 2 &&
+        setTimeout(() => {
+          aMapPolygonEditor.setTarget(target);
+          aMapPolygonEditor.open();
+          polygon.event.trigger("start-edit");
+        });
+    },
+  };
+
+  const bindEvent = (graphical) => {
+    graphical.on("click", _event.onLClick);
+    graphical.on("rightclick", _event.onRClick);
+    graphical.on("dblclick", _event.onDbClick);
+    graphical.on("mouseover", _event.onPointerIn);
+    graphical.on("mouseout", _event.onPointerOut);
+  };
+
+  aMapPolygonEditor = new LbsAMap.PolygonEditor(viewer, undefined, {
+    createOptions: {
+      strokeColor: polygon.stroke,
+      strokeWeight: polygon.lineWidth,
+      fillOpacity: 0.4,
+      fillColor: polygon.fill,
+      strokeStyle: polygon.dash ? "dashed" : "solid",
+      strokeDasharray: [10, 10],
+    },
+    editOptions: {
+      strokeColor: polygon.stroke,
+      strokeWeight: polygon.lineWidth,
+      fillOpacity: 0.4,
+      fillColor: polygon.fill,
+      strokeStyle: polygon.dash ? "dashed" : "solid",
+      strokeDasharray: [10, 10],
+    },
+  });
+
+  aMapPolygonEditor.on("add", (e) => {
+    status = 3;
+    target = e.target;
+    bindEvent(target);
+    // polygon.event.trigger("data-loaded");
+  });
+  if (polygon.coordinates) {
+    status = 2;
+    target = new LbsAMap.Polygon({
+      path: polygon.coordinates,
+      strokeColor: polygon.stroke,
+      strokeWeight: polygon.lineWidth,
+      fillOpacity: 0.4,
+      fillColor: polygon.fill,
+      strokeStyle: polygon.dash ? "dashed" : "solid",
+      strokeDasharray: [10, 10],
+    });
+    viewer.add(target);
+    bindEvent(target);
+  } else {
+    aMapPolygonEditor.close();
+    aMapPolygonEditor.setTarget();
+    aMapPolygonEditor.open();
+  }
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--;
+      return;
+    }
+
+    e.forEach((key) => {
+      switch (key) {
+        case "show":
+          if (polygon.show) {
+            target.show();
+          } else {
+            target.hide();
+          }
+          break;
+        case "editable":
+          break;
+        case "coordinates":
+          if (polygon.coordinates) {
+            target.setPath(polygon.coordinates);
+            target.setzIndex(polygon.coordinates[2]);
+            target.show();
+            status = 2;
+          } else {
+            target.hide();
+            status = 0;
+          }
+          break;
+
+        case "lineWidth":
+          target.setOptions({
+            strokeWeight: polygon.lineWidth,
+          });
+          break;
+        case "fill":
+          target.setOptions({
+            fillColor: polygon.fill,
+          });
+          break;
+        case "stroke":
+          target.setOptions({
+            strokeColor: polygon.stroke,
+          });
+          break;
+        case "dash":
+          target.setOptions({
+            strokeStyle: polygon.dash ? "dashed" : "solid",
+          });
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`);
+      }
+    });
+  };
+  const onDbClick = () => {
+    switch (status) {
+      case 1:
+        status = 2;
+        skip++;
+        polygon.coordinates = target.getPath().map((item) => [item.lng, item.lat]);
+        polygon.event.trigger("data-loaded");
+        polygon.event.trigger("pointer-in");
+        break;
+      case 3:
+        polygon.event.trigger("stop-edit");
+        aMapPolygonEditor.setTarget();
+        aMapPolygonEditor.close();
+        break;
+    }
+  };
+  const onStartEdit = () => {
+    switch (status) {
+      case 2:
+        status = 3;
+        break;
+    }
+  };
+
+  const onStopEdit = () => {
+    if (status == 3) {
+      status = 2;
+      skip++;
+      polygon.coordinates = target.getPath().map((item) => [item.lng, item.lat]);
+    }
+  };
+
+  const onDestroy = () => {
+    viewer.remove(target);
+    aMapPolygonEditor.close();
+    aMapPolygonEditor.setTarget();
+    event.off("double-click", onDbClick);
+    polygon.event.off("update", onUpdate);
+    polygon.event.off("start-edit", onStartEdit);
+    polygon.event.off("stop-edit", onStopEdit);
+    polygon.event.off("destroy", onDestroy);
+  };
+
+  event.on("double-click", onDbClick);
+  polygon.event.on("update", onUpdate);
+  polygon.event.on("start-edit", onStartEdit);
+  polygon.event.on("stop-edit", onStopEdit);
+  polygon.event.on("destroy", onDestroy);
+}