@hzab/map-combine 0.2.8 → 0.3.0-beta1

package/CHANGELOG.md

@@ -1,48 +1,55 @@
-# @hzab/map-combine0.2.8
-
-fix: reactpoint 添加状态回调
-
-# @hzab/map-combine0.2.7
-
-fix: flyToViewer 支持配置 minRadius 最小判断半径
-
-# @hzab/map-combine0.2.6
-
-fix: flyToViewer 修复点位过近导致高度异常问题
-
-# @hzab/map-combine0.2.5
-
-feat: flyTo 函数
-
-# @hzab/map-combine0.2.4
-
-fix: Cesium flyToViewer use flyTo
-
-# @hzab/map-combine0.2.3
-
-fix: 流动线可配置图形+颜色
-
-# @hzab/map-combine0.2.2
-
-fix: openlayer point 问题修复
-
-# @hzab/map-combine0.2.1
-
-feat: openLayer 对除 EPSG:3857 和 EPSG:4326 的瓦片坐标系取消偏移
-
-# @hzab/map-combine0.2.0
-
-feat: flyToViewer 所有点位移动至视口，调整位置及层级
-
-# @hzab/map-combine0.1.3
-
-feat: 添加地图 preRender 事件
-
-# @hzab/map-combine@0.1.0
-
-feat: BIM 模型加载；旋转、平移、缩放
-feat: 地图瓦片转 84 坐标系
-
-# @hzab/map-combine@0.0.1
-
-组件初始化
+# @hzab/map-combine0.3.0
+
+fix: reactpoint 添加高德地图引擎并添加相应点线面绘制
+feat: 高德地图支持 ReactPoint
+feat: 增加 loadPromise 参数，用于地图异步加载判断是否加载完成
+fix: 解决 ReactPoint 点击事件无法触发的问题
+
+# @hzab/map-combine0.2.8
+
+fix: reactpoint 添加状态回调
+
+# @hzab/map-combine0.2.7
+
+fix: flyToViewer 支持配置 minRadius 最小判断半径
+
+# @hzab/map-combine0.2.6
+
+fix: flyToViewer 修复点位过近导致高度异常问题
+
+# @hzab/map-combine0.2.5
+
+feat: flyTo 函数
+
+# @hzab/map-combine0.2.4
+
+fix: Cesium flyToViewer use flyTo
+
+# @hzab/map-combine0.2.3
+
+fix: 流动线可配置图形+颜色
+
+# @hzab/map-combine0.2.2
+
+fix: openlayer point 问题修复
+
+# @hzab/map-combine0.2.1
+
+feat: openLayer 对除 EPSG:3857 和 EPSG:4326 的瓦片坐标系取消偏移
+
+# @hzab/map-combine0.2.0
+
+feat: flyToViewer 所有点位移动至视口，调整位置及层级
+
+# @hzab/map-combine0.1.3
+
+feat: 添加地图 preRender 事件
+
+# @hzab/map-combine@0.1.0
+
+feat: BIM 模型加载；旋转、平移、缩放
+feat: 地图瓦片转 84 坐标系
+
+# @hzab/map-combine@0.0.1
+
+组件初始化

package/README.md

@@ -1,67 +1,83 @@
-# @hzab/map-combine
-
-组件模板
-
-- node@16.16.0
-
-# 组件
-
-## 示例
-
-```jsx
-import Demo from "@hzab/map-combine";
-
-<Demo />;
-```
-
-## API
-
-### InfoPanel Attributes
-
-| 参数   | 类型   | 必填 | 默认值 | 说明              |
-| ------ | ------ | ---- | ------ | ----------------- |
-| schema | Object | 是   | -      | 数据信息的 schema |
-
-# 组件开发流程
-
-- 在 config/webpack.config.js 中按需修改 library 配置的文件名
-- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
-- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
-- npm run dev
-
-## 文件目录
-
-- example 本地开发测试代码
-- src 组件源码
-- lib 组件打包编译后的代码
-
-## 命令
-
-- Mac 执行该命令，设置 pre-commit 为可执行文件
-
-  - npm run mac-chmod
-  - chmod +x .husky && chmod +x .husky/pre-commit
-
-- 生成文档：npm run docs
-- 本地运行：npm run dev
-- 打包编译：npm run build
-
-## 发布
-
-- 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！
-
-- 编译组件：npm run build
-- 命令：npm publish --access public
-- 发布目录：
-  - lib
-  - src
-
-## 配置
-
-### 配置文件
-
-- 本地配置文件：config/config.js
-
-### webpack 配置文件
-
-- config/webpack.config.js
+# @hzab/map-combine
+
+组件模板
+
+- node@16.16.0
+
+# 组件
+
+## 示例
+
+```jsx
+import Demo from "@hzab/map-combine";
+
+<Demo />;
+```
+
+## API
+
+### InfoPanel Attributes
+
+| 参数   | 类型   | 必填 | 默认值 | 说明              |
+| ------ | ------ | ---- | ------ | ----------------- |
+| schema | Object | 是   | -      | 数据信息的 schema |
+
+# 组件开发流程
+
+- 在 config/webpack.config.js 中按需修改 library 配置的文件名
+- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
+- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
+- npm run dev
+
+## 文件目录
+
+- example 本地开发测试代码
+- src 组件源码
+- lib 组件打包编译后的代码
+
+## 命令
+
+- Mac 执行该命令，设置 pre-commit 为可执行文件
+
+  - npm run mac-chmod
+  - chmod +x .husky && chmod +x .husky/pre-commit
+
+- 生成文档：npm run docs
+- 本地运行：npm run dev
+
+## 发布
+
+- npm 源和云效源都需要发布
+
+- 命令：npm publish --access public
+- 发布目录：
+  - src
+
+### 迭代发布命令-版本自增
+
+- beta: 需要手动修改 package.json 中的 version，添加 -betaX 版本号。使用 npm publish --beta 发布
+- 0.0.x: npm run publish-patch
+- 0.x.0: npm run publish-minor
+- x.0.0: npm run publish-major
+
+### nrm
+
+- 安装
+  npm install -g nrm
+- 增加源
+  nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
+- 切换源
+  nrm use aliyun
+  nrm use npm
+- 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看）
+  npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
+
+## 配置
+
+### 配置文件
+
+- 本地配置文件：config/config.js
+
+### webpack 配置文件
+
+- config/webpack.config.js

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.2.8",
+  "version": "0.3.0-beta1",
   "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",
     "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",
@@ -21,9 +22,11 @@
   "author": "CaiYansong",
   "license": "ISC",
   "devDependencies": {
+    "@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",
@@ -33,6 +36,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",
@@ -46,7 +50,6 @@
     "@turf/turf": "6.5",
     "coordtransform": "^2.1.2",
     "lodash": ">=4.17.21",
-    "ol": "^7.4.0",
     "react-dom": "^17.0.2",
     "zrender": "^5.4.4"
   },
@@ -54,5 +57,6 @@
     "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
       "prettier --write"
     ]
-  }
+  },
+  "dependencies": {}
 }

package/src/amap/AMap.ts

@@ -0,0 +1,248 @@
+import { MapCombine } from "../basic/MapCombine";
+import { PointOption, Point } from "../basic/Point";
+import { ReactPointOption, ReactPoint, drawReactPoint } from "../basic/ReactPoint";
+import { PolylineOption, Polyline } from "../basic/Polyline";
+import { PolygonOption, Polygon } from "../basic/Polygon";
+import { Tile3DOption, Tile3D } from "../basic/Tile3D";
+
+import AMapLoader from "./loader";
+import { bindEvent } from "./AMapEvent";
+import { drawPoint } from "./AMapPoint";
+import { drawPolyline } from "./AMapPolyline";
+import { drawPolygon } from "./AMapPolygon";
+
+export interface IAMapOption {
+  container;
+  url?: string | string[];
+  center?: number[];
+  zoom?: number;
+  maxZoom?: number;
+  minZoom?: number;
+  /** 地图瓦片转换规则 GCJ02 转 WGS84 */
+  proj?: "GCJ02->WGS84";
+  /** 高德地图 key */
+  key: string;
+  /** 高德地图 securityJsCode */
+  securityJsCode: string;
+  /** 加载的插件列表 */
+  plugins?: [string];
+}
+
+export interface IFlyToViewerOpt {
+  /**
+   * 立即缩放到指定位置
+   */
+  immediately?: boolean;
+  /**
+   * (Array<number> = [0,0,0,0]) 距离边框的内边距，顺序：上、下、左、右
+   */
+  avoid?: [number, number, number, number];
+}
+
+export class AMap extends MapCombine {
+  viewer: any;
+  container: HTMLDivElement;
+  option;
+  offset: number[];
+  fov = 0.9272952180016121;
+  isFromLonLat = true;
+  LbsAMap;
+  get cursor(): string {
+    return this.container.style.cursor;
+  }
+  set cursor(val: string) {
+    this.container.style.cursor = val;
+  }
+
+  get moveable(): boolean {
+    return this.viewer?.getStatus()?.dragEnable;
+  }
+  set moveable(val: boolean) {
+    this.viewer?.setStatus({ dragEnable: val });
+  }
+
+  get center(): number[] {
+    return this.viewer?.getCenter();
+  }
+  set center(val: number[]) {
+    this.viewer?.setCenter(val);
+  }
+  get zoom(): number {
+    return this.viewer?.getZoom();
+  }
+  set zoom(val: number) {
+    this.viewer?.setZoom(val);
+  }
+
+  constructor(viewer = undefined) {
+    super();
+    viewer && this._initParamsEvent(viewer);
+  }
+
+  private _initParamsEvent(viewer) {
+    if (!viewer) {
+      return;
+    }
+    this.viewer = viewer;
+
+    this.container = this.viewer.getContainer();
+    // this.markers = this.viewer.scene.primitives.add(new Cesium.BillboardCollection());
+
+    bindEvent(this);
+  }
+
+  init(opt: IAMapOption) {
+    this.option = opt;
+    const {
+      container,
+      center = [120.2288892, 30.2349677, 0],
+      zoom = 13,
+      url,
+      maxZoom,
+      minZoom,
+      proj,
+      key,
+      securityJsCode,
+      plugins,
+    } = opt || {};
+
+    this.loadPromise = new Promise((resolve, reject) => {
+      AMapLoader({
+        key,
+        securityJsCode,
+        plugins,
+      })
+        .then((LbsAMap: any) => {
+          this.LbsAMap = LbsAMap;
+          let _urls = Array.isArray(url) ? url : [url];
+          this.viewer = new LbsAMap.Map(container, {
+            zoom: zoom || 14,
+            center: center || [120.160217, 30.243861],
+            doubleClickZoom: false,
+            zooms: minZoom && maxZoom && [minZoom, maxZoom],
+            layers: url
+              ? _urls.map((it: any) => {
+                  let opt = { tileUrl: "", getTileUrl: undefined };
+                  if (typeof it === "string") {
+                    opt.tileUrl = it;
+                  } else {
+                    opt = it;
+                  }
+                  // 使用 getTileUrl 解决接口地址强制改为 https 的问题
+                  opt.getTileUrl = function (x, y, z) {
+                    return opt.tileUrl.replace("{x}", x).replace("{y}", y).replace("{z}", z);
+                  };
+
+                  return new LbsAMap.TileLayer(opt);
+                })
+              : undefined,
+          });
+          this.viewer.on("complete", () => {
+            resolve(this);
+          });
+
+          this._initParamsEvent(this.viewer);
+          return this;
+        })
+        .catch(reject);
+    });
+    this.loadPromise.then(() => {
+      this.container.appendChild(this.htmllayer);
+    });
+    return this.loadPromise;
+  }
+
+  createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
+    const e = new Point(this, option);
+    this.loadPromise.then(() => {
+      drawPoint(this, e);
+    });
+    return e;
+  }
+
+  createReactPoint<K>(option?: Partial<ReactPointOption<K>>): ReactPoint<K> {
+    const e = new ReactPoint(this, option);
+    this.loadPromise.then(() => {
+      drawReactPoint(this, e);
+    });
+    return e;
+  }
+
+  createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
+    const e = new Polyline(this, option);
+    this.loadPromise.then(() => {
+      drawPolyline(this, e);
+    });
+    return e;
+  }
+  createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K> {
+    const e = new Polygon(this, option);
+    this.loadPromise.then(() => {
+      drawPolygon(this, e);
+    });
+    return e;
+  }
+  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
+    throw new Error("Method not implemented.");
+  }
+
+  /**
+   * 将高德地图 Canvas 像素坐标转换为经纬度
+   * @param {Array} p - canvas 点位数组 [x, y]
+   * @returns {Array} p - 经纬度数组 [lng, lat]
+   */
+  canvasTgeography(p: number[]) {
+    const mapInstance = this.viewer;
+    if (!mapInstance) {
+      this.loadPromise.then(() => {
+        this.canvasTgeography(p);
+      });
+      return [];
+    }
+    try {
+      const lngLat = this.viewer.lngLatToContainer(p);
+      return [lngLat.lng, lngLat.lat];
+    } catch (error) {
+      console.error("canvasPixelToLngLat 转换出错:", error);
+      return [];
+    }
+  }
+
+  /**
+   * 经纬度转换为高德地图 Canvas 像素坐标
+   * @param {Array} p - 经纬度数组 [lng, lat]
+   * @returns {Array} Canvas 像素坐标 [x, y]
+   */
+  geographyTcanvas(p: number[]): number[] {
+    const mapInstance = this.viewer;
+    if (!mapInstance) {
+      this.loadPromise.then(() => {
+        this.geographyTcanvas(p);
+      });
+      return [];
+    }
+    try {
+      const containerPixel = this.viewer.lngLatToContainer(p);
+      return [containerPixel.x, containerPixel.y];
+    } catch (error) {
+      console.error("lngLatToCanvasPixel 转换出错:", error);
+      return [];
+    }
+  }
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @param points
+   * @param opt
+   * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
+   */
+  flyToViewer(points: number[][], opt: IFlyToViewerOpt = { avoid: [0, 0, 0, 0], immediately: true }): void {
+    this.loadPromise.then(() => {
+      this.viewer.setBounds(
+        this.getBounds(points, { canvas: this.viewer.canvas, ...opt }),
+        opt?.immediately,
+        opt?.avoid,
+      );
+    });
+  }
+  flyTo() {}
+}

package/src/amap/AMapEvent.ts

@@ -0,0 +1,49 @@
+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();
+
+  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");
+  });
+}