@hzab/map-combine 0.4.2-alpha.7 → 0.4.2-alpha.8

package/CHANGELOG.md

@@ -1,75 +1,77 @@
-# @hzab/map-combine@0.4.2
-
-feat: 点线面 height 设置
-fix: openlayer getFromLonLat this 指向修复
-break: PointAggregation datas 改为数组对象
-fix: cesium flyTo height 计算
-feat: map.bussinesses onFrame 事件回调
-fix: AmapPoint drawPoint 逻辑修复
-feat: Cesium 线 首次加载优化
-
-# @hzab/map-combine@0.4.1
-
-fix: 点聚合销毁时监听事件解除
-
-# @hzab/map-combine@0.4.0
-
-feat: 点聚合功能
-fix: 高德地图 canvasTgeography 参数取值问题修复
-fix: AMap、Openlayer、MinMap view-moveEnd 事件
-
-# @hzab/map-combine@0.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
-
-组件初始化
+# @hzab/map-combine@0.4.2
+
+feat: 点线面 height 设置
+fix: openlayer getFromLonLat this 指向修复
+break: PointAggregation datas 改为数组对象
+fix: cesium flyTo height 计算
+feat: map.bussinesses onFrame 事件回调
+fix: AmapPoint drawPoint 逻辑修复
+feat: Cesium 线 首次加载优化
+feat: 高德地图 颜色支持配置十六进制 rgba
+feat: map event 添加 "drill-pick" 类型事件 返回当前点击位置的所有元素
+
+# @hzab/map-combine@0.4.1
+
+fix: 点聚合销毁时监听事件解除
+
+# @hzab/map-combine@0.4.0
+
+feat: 点聚合功能
+fix: 高德地图 canvasTgeography 参数取值问题修复
+fix: AMap、Openlayer、MinMap view-moveEnd 事件
+
+# @hzab/map-combine@0.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,83 +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 源和云效源都需要发布
-
-- 命令：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
+# @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,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.4.2-alpha.7",
+  "version": "0.4.2-alpha.8",
   "description": "地图组件",
   "main": "src",
   "scripts": {
@@ -53,8 +53,8 @@
   "peerDependencies": {
     "@turf/turf": "6.5.0",
     "coordtransform": "^2.1.2",
-    "nanoid": "^3.3.7",
     "lodash": ">=4.17.21",
+    "nanoid": "^3.3.7",
     "react-dom": "^17.0.2",
     "zrender": "^5.4.4"
   },
@@ -62,6 +62,5 @@
     "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
       "prettier --write"
     ]
-  },
-  "dependencies": {}
+  }
 }

package/src/amap/AMapEvent.ts

@@ -1,3 +1,5 @@
+import { pointToLineDistance } from "@turf/turf";
+
 import { AMap } from "./AMap";
 
 /**
@@ -47,6 +49,59 @@ export function bindEvent(map: AMap) {
 
   viewer.on("click", (e) => {
     event.trigger("left-click");
+
+    // "drill-pick" 获取点击位置的元素
+    const clickPosition = e.lnglat;
+    const position = [clickPosition.lng, clickPosition.lat];
+    const allOverlays = viewer.getAllOverlays(); // 获取所有覆盖物
+    const pickedObjects = [];
+
+    // 遍历所有覆盖物，检查点击位置是否在覆盖物内
+    allOverlays.forEach((overlay) => {
+      // 判断是否为多边形
+      if (overlay instanceof map.LbsAMap.Polygon) {
+        // 使用 contains 方法判断点是否在多边形内
+        if (overlay.contains(clickPosition)) {
+          pickedObjects.push(overlay);
+        }
+      }
+      // 判断是否为折线
+      else if (overlay instanceof map.LbsAMap.Polyline) {
+        // 使用点线距离计算
+        const path = overlay.getPath();
+        const coords = path.map((p) => [p.getLng(), p.getLat()]);
+        const distance = pointToLineDistance(position, coords, { units: "meters" });
+
+        // 获取当前地图的分辨率（米/像素） 每像素代表多少米
+        const resolution = viewer.getResolution();
+        // 计算线宽对应的地理距离（单边）
+        const halfWidthInMeters = (overlay.getOptions().strokeWeight / 2) * resolution;
+
+        // 根据距离判断是否点击
+        if (distance < halfWidthInMeters + 2) {
+          pickedObjects.push(overlay);
+        }
+      }
+      // 判断是否为 Marker
+      else if (overlay instanceof map.LbsAMap.Marker) {
+        const position = overlay.getPosition();
+        const distance = map.LbsAMap.GeometryUtil.distance(position, clickPosition);
+        if (distance < 20) {
+          // 点击位置距离 Marker 小于 20 像素
+          pickedObjects.push(overlay);
+        }
+      }
+    });
+
+    // 按 zIndex 从高到低排序
+    pickedObjects.sort((a, b) => (b.getzIndex?.() || 0) - (a.getzIndex?.() || 0));
+
+    event.trigger("drill-pick", {
+      event: e,
+      pickedTargets: pickedObjects.map((it) => it.getOptions()?.extData?.target),
+      sourceObjects: pickedObjects,
+      position: position,
+    });
   });
 
   viewer.on("dblclick", (e) => {

package/src/amap/AMapPoint.ts

@@ -20,9 +20,12 @@ export function drawPoint(map: AMap, point: Point<unknown>) {
     angle: point.rotation,
     anchor: point.center,
     draggable: point.editable,
+    bubble: true,
     extData: {
+      userdata: point.userdata,
       cursor: point.cursor,
       silent: point.silent,
+      target: point,
     },
     offset: pointOffset,
   });

package/src/amap/AMapPolygon.ts

@@ -1,8 +1,12 @@
 import { AMap } from "./AMap";
 import { Polygon } from "../basic/Polygon";
 
+import { parseHexColor } from "../utils/color";
+
 export function drawPolygon(map: AMap, polygon: Polygon<unknown>) {
   const { event, viewer, LbsAMap } = map;
+  const { color: strokeColor, opacity: strokeOpacity } = parseHexColor(polygon.stroke);
+  const { color: fillColor, opacity: fillOpacity } = parseHexColor(polygon.fill);
 
   let status = 0;
   let skip = 0;
@@ -49,18 +53,20 @@ export function drawPolygon(map: AMap, polygon: Polygon<unknown>) {
 
   aMapPolygonEditor = new LbsAMap.PolygonEditor(viewer, undefined, {
     createOptions: {
-      strokeColor: polygon.stroke,
+      strokeColor: strokeColor,
+      strokeOpacity: strokeOpacity,
       strokeWeight: polygon.lineWidth,
-      fillOpacity: 0.4,
-      fillColor: polygon.fill,
+      fillColor: fillColor,
+      fillOpacity: fillOpacity,
       strokeStyle: polygon.dash ? "dashed" : "solid",
       strokeDasharray: [10, 10],
     },
     editOptions: {
-      strokeColor: polygon.stroke,
+      strokeColor: strokeColor,
+      strokeOpacity: strokeOpacity,
       strokeWeight: polygon.lineWidth,
-      fillOpacity: 0.4,
-      fillColor: polygon.fill,
+      fillColor: fillColor,
+      fillOpacity: fillOpacity,
       strokeStyle: polygon.dash ? "dashed" : "solid",
       strokeDasharray: [10, 10],
     },
@@ -76,13 +82,21 @@ export function drawPolygon(map: AMap, polygon: Polygon<unknown>) {
     status = 2;
     target = new LbsAMap.Polygon({
       path: polygon.coordinates,
-      strokeColor: polygon.stroke,
+      strokeColor: strokeColor,
+      strokeOpacity: strokeOpacity,
       strokeWeight: polygon.lineWidth,
-      fillOpacity: 0.4,
-      fillColor: polygon.fill,
+      fillColor: fillColor,
+      fillOpacity: fillOpacity,
       strokeStyle: polygon.dash ? "dashed" : "solid",
       strokeDasharray: [10, 10],
       zIndex: polygon.coordinates[0]?.[2] ?? polygon.height,
+      bubble: true,
+      extData: {
+        userdata: polygon.userdata,
+        cursor: polygon.cursor,
+        silent: polygon.silent,
+        target: polygon,
+      },
     });
     viewer.add(target);
     bindEvent(target);
@@ -126,13 +140,17 @@ export function drawPolygon(map: AMap, polygon: Polygon<unknown>) {
           });
           break;
         case "fill":
+          const { color: fillColor, opacity: fillOpacity } = parseHexColor(polygon.fill);
           target.setOptions({
-            fillColor: polygon.fill,
+            fillColor: fillColor,
+            fillOpacity: fillOpacity,
           });
           break;
         case "stroke":
+          const { color: strokeColor, opacity: strokeOpacity } = parseHexColor(polygon.stroke);
           target.setOptions({
-            strokeColor: polygon.stroke,
+            strokeColor: strokeColor,
+            strokeOpacity: strokeOpacity,
           });
           break;
         case "dash":

package/src/amap/AMapPolyline.ts

@@ -1,8 +1,11 @@
 import { AMap } from "./AMap";
 import { Polyline } from "../basic/Polyline";
 
+import { parseHexColor } from "../utils/color";
+
 export function drawPolyline(map: AMap, polyline: Polyline<unknown>) {
   const { event, viewer, LbsAMap } = map;
+  const { color: strokeColor, opacity: strokeOpacity } = parseHexColor(polyline.stroke);
 
   let status = 0;
   let skip = 0;
@@ -49,13 +52,15 @@ export function drawPolyline(map: AMap, polyline: Polyline<unknown>) {
 
   aMapPolylineEditor = new LbsAMap.PolylineEditor(viewer, undefined, {
     createOptions: {
-      strokeColor: polyline.stroke,
+      strokeColor: strokeColor,
+      strokeOpacity: strokeOpacity,
       strokeWeight: polyline.lineWidth,
       strokeStyle: polyline.dash ? "dashed" : "solid",
       strokeDasharray: [10, 10],
     },
     editOptions: {
-      strokeColor: polyline.stroke,
+      strokeColor: strokeColor,
+      strokeOpacity: strokeOpacity,
       strokeWeight: polyline.lineWidth,
       strokeStyle: polyline.dash ? "dashed" : "solid",
       strokeDasharray: [10, 10],
@@ -73,11 +78,19 @@ export function drawPolyline(map: AMap, polyline: Polyline<unknown>) {
     status = 2;
     target = new LbsAMap.Polyline({
       path: polyline.coordinates,
-      strokeColor: polyline.stroke,
+      strokeColor: strokeColor,
+      strokeOpacity: strokeOpacity,
       strokeWeight: polyline.lineWidth,
       strokeStyle: polyline.dash ? "dashed" : "solid",
       strokeDasharray: [10, 10],
       zIndex: polyline.coordinates[0]?.[2] ?? polyline.height,
+      bubble: true,
+      extData: {
+        userdata: polyline.userdata,
+        cursor: polyline.cursor,
+        silent: polyline.silent,
+        target: polyline,
+      },
     });
     viewer.add(target);
     bindEvent(target);

package/src/amap/loader.ts

@@ -1,58 +1,58 @@
-const defaultVersion = "2.0";
-const defaultPlugins = ["AMap.Geocoder", "AMap.AutoComplete", "AMap.PolygonEditor", "AMap.PolylineEditor"];
-
-if (!window._AMapLoaderTemp) {
-  window._AMapLoaderTemp = {};
-}
-
-window._AMapLoaderTemp.loading = false;
-
-function Loader(opt) {
-  if (!window.AMap) {
-    window._AMapSecurityConfig = {
-      securityJsCode: opt.securityJsCode || window._AMapLoaderTemp.securityJsCode,
-    };
-  }
-  const { key, version, plugins } = opt || {};
-  return new Promise((resolve, reject) => {
-    // 判断是否有进行中的加载器
-    if (window._AMapLoaderTemp.loading && window._AMapLoaderTemp.promise) {
-      window._AMapLoaderTemp.promise.then((AMap) => {
-        resolve(window.AMap);
-      });
-      return;
-    }
-    // 判断是否存在 AMap，且入参 plugins 是否改变
-    if (
-      (window.AMap && !plugins) ||
-      (window.AMap && plugins && JSON.stringify(window._AMapLoaderTemp.plugins) === JSON.stringify(plugins))
-    ) {
-      resolve(window.AMap);
-      return;
-    }
-
-    window._AMapLoaderTemp.plugins = plugins ? [...defaultPlugins, ...(plugins || [])] : defaultPlugins;
-
-    // 不用地图组件时可以不安装  "@amap/amap-jsapi-loader"
-    const AMapLoader = require("@amap/amap-jsapi-loader");
-
-    window._AMapLoaderTemp.loading = true;
-    window._AMapLoaderTemp.promise = AMapLoader.load({
-      key: key || window._AMapLoaderTemp.key, // 申请好的Web端开发者Key，首次调用 load 时必填
-      version: version || defaultVersion, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-      plugins: window._AMapLoaderTemp.plugins, // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-    })
-      .then((AMap) => {
-        window.AMap = AMap;
-        resolve(window.AMap);
-        window._AMapLoaderTemp.loading = false;
-        return AMap;
-      })
-      .catch((e) => {
-        reject(e);
-        console.error("AMap loader: ", e);
-      });
-  });
-}
-
-export default Loader;
+const defaultVersion = "2.0";
+const defaultPlugins = ["AMap.Geocoder", "AMap.AutoComplete", "AMap.PolygonEditor", "AMap.PolylineEditor"];
+
+if (!window._AMapLoaderTemp) {
+  window._AMapLoaderTemp = {};
+}
+
+window._AMapLoaderTemp.loading = false;
+
+function Loader(opt) {
+  if (!window.AMap) {
+    window._AMapSecurityConfig = {
+      securityJsCode: opt.securityJsCode || window._AMapLoaderTemp.securityJsCode,
+    };
+  }
+  const { key, version, plugins } = opt || {};
+  return new Promise((resolve, reject) => {
+    // 判断是否有进行中的加载器
+    if (window._AMapLoaderTemp.loading && window._AMapLoaderTemp.promise) {
+      window._AMapLoaderTemp.promise.then((AMap) => {
+        resolve(window.AMap);
+      });
+      return;
+    }
+    // 判断是否存在 AMap，且入参 plugins 是否改变
+    if (
+      (window.AMap && !plugins) ||
+      (window.AMap && plugins && JSON.stringify(window._AMapLoaderTemp.plugins) === JSON.stringify(plugins))
+    ) {
+      resolve(window.AMap);
+      return;
+    }
+
+    window._AMapLoaderTemp.plugins = plugins ? [...defaultPlugins, ...(plugins || [])] : defaultPlugins;
+
+    // 不用地图组件时可以不安装  "@amap/amap-jsapi-loader"
+    const AMapLoader = require("@amap/amap-jsapi-loader");
+
+    window._AMapLoaderTemp.loading = true;
+    window._AMapLoaderTemp.promise = AMapLoader.load({
+      key: key || window._AMapLoaderTemp.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: version || defaultVersion, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: window._AMapLoaderTemp.plugins, // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    })
+      .then((AMap) => {
+        window.AMap = AMap;
+        resolve(window.AMap);
+        window._AMapLoaderTemp.loading = false;
+        return AMap;
+      })
+      .catch((e) => {
+        reject(e);
+        console.error("AMap loader: ", e);
+      });
+  });
+}
+
+export default Loader;