map-ol-utils 0.1.26 → 0.1.28

package/README.md

@@ -0,0 +1,109 @@
+# map-ol-utils
+
+OpenLayers 地图工具库，封装常用的图层创建、要素交互与地图管理操作。
+
+## 安装
+
+```bash
+pnpm add map-ol-utils
+```
+
+## 快速上手
+
+```ts
+import { createMapInstance, createMassMarksLayer, addMassMarksLayer } from 'map-ol-utils'
+
+// 创建地图（单例）
+const map = createMapInstance({ target: 'map-container' })
+
+// 添加点位图层
+const layer = createMassMarksLayer(dataList, styles)
+map.addLayer(layer)
+```
+
+## 主要 API
+
+### 地图管理
+
+| 函数 | 说明 |
+|------|------|
+| `createMap(config)` | 创建 OL 地图实例 |
+| `createMapInstance(config)` | 创建地图单例 |
+| `getMapInstance()` | 获取当前单例 |
+| `disposeMap()` | 销毁地图，释放资源 |
+| `resetMap(config)` | 重置地图（清除图层并还原视图） |
+| `resetZoomAndCenter(center)` | 动画还原缩放和中心点 |
+
+### 底图图层
+
+| 函数 | 说明 |
+|------|------|
+| `createBaseLayer(type?)` | 创建杭州本地切片底图 |
+| `createMapWorldLayer(options)` | 创建天地图图层 |
+| `createZheJiangLayer(type?)` | 创建浙江省切片图层 |
+| `switchBaseLayer(type)` | 切换底图类型 |
+
+### 矢量图层
+
+| 函数 | 说明 |
+|------|------|
+| `createBusinessLayer(dataList, config)` | 从业务数据创建矢量图层（自动识别线/面类型） |
+| `createVectorLineLayer(dataList, config)` | 创建线状图层 |
+| `createVectorFaceLayer(dataList, config)` | 创建面状图层 |
+| `appendFeaturesByLayer(layer, dataList)` | 向已有图层追加要素 |
+
+### 点位与聚合
+
+| 函数 | 说明 |
+|------|------|
+| `createMassMarksLayer(dataList, styles)` | 创建大量点位图层 |
+| `addMassMarksLayer(getImgUrlFn)` | 高阶函数，返回添加点位图层的方法 |
+| `buildMassMarksStyles(getImgUrlFn)` | 构建多状态点位样式数组 |
+| `updateMarksLayersByStatus(statusList)` | 按状态控制点位显隐 |
+| `createClusterLayer(dataList, config)` | 创建聚合图层 |
+
+### 交互与选择
+
+| 函数 | 说明 |
+|------|------|
+| `createSelectByLayer(layer)` | 为图层添加点击选中交互 |
+| `activeFeatureByUid(uid)` | 通过 uid 程序化激活要素 |
+| `resetActiveFeature()` | 清除选中状态 |
+| `resetActiveVector()` | 清除矢量激活状态 |
+
+### 视图控制
+
+| 函数 | 说明 |
+|------|------|
+| `setFitViewByCoords(coords)` | 缩放至坐标范围 |
+| `setFitViewByGeom(geom)` | 缩放至几何范围 |
+| `setFitViewByLayer(layer)` | 缩放至图层范围 |
+
+### OGC
+
+| 函数 | 说明 |
+|------|------|
+| `createWmtsLayer(url, options)` | 从 GeoServer GetCapabilities 创建 WMTS 图层 |
+
+## 依赖
+
+- [ol](https://openlayers.org/) `>=10.5.0`（peer dependency）
+- [gcoord](https://github.com/hujiulong/gcoord) — 坐标系转换
+- [mitt](https://github.com/developit/mitt) — 事件总线
+
+## 事件
+
+通过导出的 `emitter` 监听图层交互事件：
+
+```ts
+import { emitter } from 'map-ol-utils'
+
+emitter.on('selected-feature', (data) => {
+  console.log('选中要素：', data)
+})
+```
+
+| 事件名 | 触发时机 | 回调参数 |
+|--------|----------|----------|
+| `selected-feature` | 点击选中要素 | feature properties |
+| `dynamic-marker` | 选中动态标注点 | marker data |

package/dist/index.cjs

@@ -69,6 +69,7 @@ var index_exports = {};
 __export(index_exports, {
   GeometryType: () => GeometryType,
   activeFeatureByUid: () => activeFeatureByUid,
+  addFeaturesByLayer: () => addFeaturesByLayer,
   addMassMarksLayer: () => addMassMarksLayer,
   appendFeaturesByLayer: () => appendFeaturesByLayer,
   buildMassMarksStyles: () => buildMassMarksStyles,
@@ -455,13 +456,11 @@ var selectEventHandle = (vectorLayer, feature) => {
   }
   const isAutoFit = vectorLayer.get("_isAutoFit");
   if (isAutoFit) {
-    const [x, y] = (0, import_extent.getCenter)(feature.getGeometry().getExtent());
-    const [offsetX, offsetY] = vectorLayer.get("_offset") || [0, 0];
     const view = instance.getView();
     view.animate({
       duration: 1e3,
       zoom: view.getZoom(),
-      center: [x + offsetX, y + offsetY]
+      center: (0, import_extent.getCenter)(feature.getGeometry().getExtent())
     });
   }
 };
@@ -510,8 +509,8 @@ var createSelectByLayer = (vectorLayer) => {
   vectorLayer.set("_selectInteraction", interaction);
   return interaction;
 };
-var createMassMarksLayer = (dataList, styleList = []) => {
-  const features = dataList.map((item) => {
+var createFeatures = (dataList, styleList = []) => {
+  return dataList.map((item) => {
     const { crsForm } = item;
     const coord = import_gcoord.default.transform(
       [+item.lnglat[0], +item.lnglat[1]],
@@ -528,10 +527,21 @@ var createMassMarksLayer = (dataList, styleList = []) => {
     feature.setStyle(styleList[item.style]);
     return feature;
   });
+};
+var addFeaturesByLayer = (targetLayer, dataList, config) => {
+  const massMarksStyles = targetLayer.get("_massMarksStyles");
+  const targetSource = targetLayer == null ? void 0 : targetLayer.getSource();
+  const { clear } = config;
+  if (clear) {
+    targetSource == null ? void 0 : targetSource.clear();
+  }
+  targetSource == null ? void 0 : targetSource.addFeatures(createFeatures(dataList, massMarksStyles));
+};
+var createMassMarksLayer = (dataList, styleList = []) => {
   const vectorLayer = new import_Vector.default({
     zIndex: 2e3,
     source: new import_Vector2.default({
-      features
+      features: createFeatures(dataList, styleList)
     })
   });
   vectorLayer.setProperties({
@@ -614,12 +624,14 @@ var addMassMarksLayer = (getImgUrlFn) => {
     }
     massMarksLayer.setProperties({
       _isCustom: true,
+      _offset: offset,
       _hasLine: hasLine,
       _hasFace: hasFace,
       className: layerName,
       _layerName: layerName,
       _isVectorLayer: true,
-      _isDynamic: isDynamic
+      _isDynamic: isDynamic,
+      _massMarksStyles: massMarksStyles
     });
     instance.addLayer(massMarksLayer);
     return massMarksLayer;
@@ -662,7 +674,8 @@ var createClusterLayer = (dataList, config) => {
     openClick,
     buildStyle,
     singleStyles,
-    computedRadius
+    computedRadius,
+    layerName = "cluster-layer"
   } = config;
   const innerComputedRadius = (size) => Math.pow(size / count, 1 / 18);
   styleCache[1] = singleStyles;
@@ -705,6 +718,7 @@ var createClusterLayer = (dataList, config) => {
   };
   const vectorLayer = new import_Vector.default({
     zIndex: 200,
+    className: layerName,
     source: new import_Cluster.default({
       distance: distance || 80,
       minDistance: minDistance || 0,
@@ -738,7 +752,6 @@ var import_source2 = require("ol/source");
 var import_tilegrid = require("ol/tilegrid");
 var import_layer = require("ol/layer");
 var import_WMTS = __toESM(require("ol/tilegrid/WMTS"), 1);
-var import_WebGLTile = __toESM(require("ol/layer/WebGLTile"), 1);
 var createBaseLayer = (layerName = "hzsyvector_dark") => {
   const config = {
     zIndex: -5,
@@ -785,7 +798,7 @@ var createBaseLayer = (layerName = "hzsyvector_dark") => {
       _layerName: layerName
     }
   };
-  return isWebGLSupported() ? new import_WebGLTile.default(config) : new import_layer.Tile(config);
+  return new import_layer.Tile(config);
 };
 var createMapWorldLayer = (layerName, tk = "c77eddc667c5bed016fded560baf93e7") => {
   const [name, matrixSet] = layerName.split("_");
@@ -998,8 +1011,8 @@ var getLayersDataList = () => {
 };
 var determineGeometryType = (coordinates) => {
   const getArrayDepth = (arr) => {
-    if (!Array.isArray(arr)) return 0;
-    return 1 + Math.max(...arr.map((item) => getArrayDepth(item)), 0);
+    if (!Array.isArray(arr) || arr.length === 0) return 0;
+    return 1 + getArrayDepth(arr[0]);
   };
   const isClosedRing = (coords) => {
     if (!Array.isArray(coords) || coords.length < 3) return false;
@@ -1044,10 +1057,6 @@ var determineGeometryType = (coordinates) => {
     return "Invalid" /* Invalid */;
   }
 };
-var isWebGLSupported = () => {
-  const canvas = document.createElement("canvas");
-  return !!canvas.getContext("webgl") || !!canvas.getContext("experimental-webgl");
-};
 
 // src/ogc-utils.ts
 var import_source3 = require("ol/source");
@@ -1101,6 +1110,7 @@ var createWmtsLayer = (serverUrl) => (config) => __async(null, null, function* (
 0 && (module.exports = {
   GeometryType,
   activeFeatureByUid,
+  addFeaturesByLayer,
   addMassMarksLayer,
   appendFeaturesByLayer,
   buildMassMarksStyles,

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import { Layer, Tile } from 'ol/layer';
 import { Style } from 'ol/style';
-import { Map as Map$1, Overlay, Feature } from 'ol';
+import { Map as Map$1, Feature, Overlay } from 'ol';
 import { CRSTypes } from 'gcoord';
 import * as ol_source from 'ol/source';
 import { Source, XYZ, WMTS } from 'ol/source';
@@ -9,9 +9,8 @@ import { FeatureLike } from 'ol/Feature';
 import { Emitter, EventType } from 'mitt';
 import TileLayer from 'ol/layer/Tile';
 import * as ol_renderer_Layer from 'ol/renderer/Layer';
-import WebGLTileLayer from 'ol/layer/WebGLTile';
 import * as ol_geom from 'ol/geom';
-import { SimpleGeometry, Point } from 'ol/geom';
+import { Point, SimpleGeometry } from 'ol/geom';
 import { Options } from 'ol/Overlay';
 import Cluster from 'ol/source/Cluster';
 import { Select } from 'ol/interaction';
@@ -62,6 +61,7 @@ type ClusterData = {
 };
 type ClusterConfig = {
     distance: number;
+    layerName?: string;
     openClick?: boolean;
     minDistance: number;
     singleStyles: Style[];
@@ -130,7 +130,7 @@ declare const createWmtsLayer: (serverUrl: string) => (config: WmtsSourceOptions
  * 创建杭州规自地图
  * @param layerName - 'hzsyraster' | 'hzsyvector' | 'hzsyvector_dark'
  */
-declare const createBaseLayer: (layerName?: HzsyType) => WebGLTileLayer | Tile<XYZ>;
+declare const createBaseLayer: (layerName?: HzsyType) => Tile<XYZ>;
 /**
  * 创建全国天地图
  * @param layerName - 图层名称
@@ -147,7 +147,9 @@ declare const createZheJiangLayer: (layerName?: ZheJiangType, tk?: string) => Ti
  * 根据图层名称获取图层
  * @param name
  */
-declare const getLayerByName: (name: string) => Layer<ol_source.Source, ol_renderer_Layer.default<any>> | undefined;
+declare const getLayerByName: (name: string) => Layer<ol_source.Source, ol_renderer_Layer.default<any>, {
+    [x: string]: any;
+}> | undefined;
 /**
  * 根据图层名称删除图层
  * @param name
@@ -192,7 +194,11 @@ declare const setFitViewByGeom: (geom: SimpleGeometry, mapInstance?: CustomMap,
  * @param fitOptions
  */
 declare const setFitViewByLayer: (layer: VectorLayer, mapInstance?: CustomMap, fitOptions?: FitOptions) => void;
-declare const createBusinessLayer: (dataList: MassData[], config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
+declare const createBusinessLayer: (dataList: MassData[], config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>, Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>;
 /**
  * 追加Features
  * @param targetLayer
@@ -205,13 +211,21 @@ declare const appendFeaturesByLayer: (targetLayer: VectorLayer, dataList: MassDa
  * @param dataList
  * @param config
  */
-declare const createVectorFaceLayer: (dataList: MassData[] | undefined, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
+declare const createVectorFaceLayer: (dataList: MassData[] | undefined, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>, Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>;
 /**
  * 创建矢量线图层
  * @param dataList
  * @param config
  */
-declare const createVectorLineLayer: (dataList: MassData[] | undefined, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
+declare const createVectorLineLayer: (dataList: MassData[] | undefined, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>, Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>;
 /**
  * 移除覆盖物以及自定义图层
  */
@@ -234,17 +248,34 @@ declare const buildMassMarksStyles: (getImgUrlFn: GetImgUrlFn) => (iconConfig: I
  * @param vectorLayer
  */
 declare const createSelectByLayer: (vectorLayer: VectorLayer) => Select;
+/**
+ * 添加Features
+ * @param targetLayer
+ * @param dataList
+ * @param config
+ */
+declare const addFeaturesByLayer: (targetLayer: VectorLayer, dataList: MassData[], config: {
+    clear: false;
+}) => void;
 /**
  * 创建massMarksLayer
  * @param dataList
  * @param styleList
  */
-declare const createMassMarksLayer: (dataList: MassData[], styleList?: StyleLike[]) => VectorLayer<VectorSource<Feature<Point>>, Feature<Point>>;
+declare const createMassMarksLayer: (dataList: MassData[], styleList?: StyleLike[]) => VectorLayer<VectorSource<Feature<Point, {
+    [x: string]: any;
+}>>, Feature<Point, {
+    [x: string]: any;
+}>>;
 /**
  * 添加massMarksLayer
  * @param getImgUrlFn
  */
-declare const addMassMarksLayer: (getImgUrlFn: GetImgUrlFn) => (dataList: never[] | undefined, iconConfig: IconConfig, openClick?: boolean) => VectorLayer<VectorSource<Feature<Point>>, Feature<Point>>;
+declare const addMassMarksLayer: (getImgUrlFn: GetImgUrlFn) => (dataList: never[] | undefined, iconConfig: IconConfig, openClick?: boolean) => VectorLayer<VectorSource<Feature<Point, {
+    [x: string]: any;
+}>>, Feature<Point, {
+    [x: string]: any;
+}>>;
 /**
  * 更新图层根据选中状态列表
  * @param checkedStatusList
@@ -260,6 +291,10 @@ declare const createOverlay: (config?: Options) => Overlay;
  * @param dataList
  * @param config
  */
-declare const createClusterLayer: (dataList: ClusterData[], config: ClusterConfig) => VectorLayer<Cluster<Feature<Point>>, Feature<ol_geom.Geometry>>;
+declare const createClusterLayer: (dataList: ClusterData[], config: ClusterConfig) => VectorLayer<Cluster<Feature<Point, {
+    [x: string]: any;
+}>>, Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>;
 
-export { type ClusterConfig, type ClusterData, type CustomMap, type GeometryCoordinates, GeometryType, type GetImgUrl, type GetImgUrlFn, type HzsyType, type IconConfig, type MassData, type VectorConfig, type WmtsSourceOptions, type WorldLayerType, type ZheJiangType, activeFeatureByUid, addMassMarksLayer, appendFeaturesByLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createBusinessLayer, createClusterLayer, createMap, createMapInstance, createMapWorldLayer, createMassMarksLayer, createOverlay, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, createZheJiangLayer, disposeMap, emitter, getLayerByName, getLayersDataList, getMapInstance, instance, removeAllLayers, removeLayerByName, removeOverlays, resetActiveFeature, resetActiveVector, resetMap, resetZoomAndCenter, setFitViewByCoords, setFitViewByGeom, setFitViewByLayer, updateMarksLayersByStatus };
+export { type ClusterConfig, type ClusterData, type CustomMap, type GeometryCoordinates, GeometryType, type GetImgUrl, type GetImgUrlFn, type HzsyType, type IconConfig, type MassData, type VectorConfig, type WmtsSourceOptions, type WorldLayerType, type ZheJiangType, activeFeatureByUid, addFeaturesByLayer, addMassMarksLayer, appendFeaturesByLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createBusinessLayer, createClusterLayer, createMap, createMapInstance, createMapWorldLayer, createMassMarksLayer, createOverlay, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, createZheJiangLayer, disposeMap, emitter, getLayerByName, getLayersDataList, getMapInstance, instance, removeAllLayers, removeLayerByName, removeOverlays, resetActiveFeature, resetActiveVector, resetMap, resetZoomAndCenter, setFitViewByCoords, setFitViewByGeom, setFitViewByLayer, updateMarksLayersByStatus };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Layer, Tile } from 'ol/layer';
 import { Style } from 'ol/style';
-import { Map as Map$1, Overlay, Feature } from 'ol';
+import { Map as Map$1, Feature, Overlay } from 'ol';
 import { CRSTypes } from 'gcoord';
 import * as ol_source from 'ol/source';
 import { Source, XYZ, WMTS } from 'ol/source';
@@ -9,9 +9,8 @@ import { FeatureLike } from 'ol/Feature';
 import { Emitter, EventType } from 'mitt';
 import TileLayer from 'ol/layer/Tile';
 import * as ol_renderer_Layer from 'ol/renderer/Layer';
-import WebGLTileLayer from 'ol/layer/WebGLTile';
 import * as ol_geom from 'ol/geom';
-import { SimpleGeometry, Point } from 'ol/geom';
+import { Point, SimpleGeometry } from 'ol/geom';
 import { Options } from 'ol/Overlay';
 import Cluster from 'ol/source/Cluster';
 import { Select } from 'ol/interaction';
@@ -62,6 +61,7 @@ type ClusterData = {
 };
 type ClusterConfig = {
     distance: number;
+    layerName?: string;
     openClick?: boolean;
     minDistance: number;
     singleStyles: Style[];
@@ -130,7 +130,7 @@ declare const createWmtsLayer: (serverUrl: string) => (config: WmtsSourceOptions
  * 创建杭州规自地图
  * @param layerName - 'hzsyraster' | 'hzsyvector' | 'hzsyvector_dark'
  */
-declare const createBaseLayer: (layerName?: HzsyType) => WebGLTileLayer | Tile<XYZ>;
+declare const createBaseLayer: (layerName?: HzsyType) => Tile<XYZ>;
 /**
  * 创建全国天地图
  * @param layerName - 图层名称
@@ -147,7 +147,9 @@ declare const createZheJiangLayer: (layerName?: ZheJiangType, tk?: string) => Ti
  * 根据图层名称获取图层
  * @param name
  */
-declare const getLayerByName: (name: string) => Layer<ol_source.Source, ol_renderer_Layer.default<any>> | undefined;
+declare const getLayerByName: (name: string) => Layer<ol_source.Source, ol_renderer_Layer.default<any>, {
+    [x: string]: any;
+}> | undefined;
 /**
  * 根据图层名称删除图层
  * @param name
@@ -192,7 +194,11 @@ declare const setFitViewByGeom: (geom: SimpleGeometry, mapInstance?: CustomMap,
  * @param fitOptions
  */
 declare const setFitViewByLayer: (layer: VectorLayer, mapInstance?: CustomMap, fitOptions?: FitOptions) => void;
-declare const createBusinessLayer: (dataList: MassData[], config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
+declare const createBusinessLayer: (dataList: MassData[], config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>, Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>;
 /**
  * 追加Features
  * @param targetLayer
@@ -205,13 +211,21 @@ declare const appendFeaturesByLayer: (targetLayer: VectorLayer, dataList: MassDa
  * @param dataList
  * @param config
  */
-declare const createVectorFaceLayer: (dataList: MassData[] | undefined, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
+declare const createVectorFaceLayer: (dataList: MassData[] | undefined, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>, Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>;
 /**
  * 创建矢量线图层
  * @param dataList
  * @param config
  */
-declare const createVectorLineLayer: (dataList: MassData[] | undefined, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
+declare const createVectorLineLayer: (dataList: MassData[] | undefined, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>, Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>;
 /**
  * 移除覆盖物以及自定义图层
  */
@@ -234,17 +248,34 @@ declare const buildMassMarksStyles: (getImgUrlFn: GetImgUrlFn) => (iconConfig: I
  * @param vectorLayer
  */
 declare const createSelectByLayer: (vectorLayer: VectorLayer) => Select;
+/**
+ * 添加Features
+ * @param targetLayer
+ * @param dataList
+ * @param config
+ */
+declare const addFeaturesByLayer: (targetLayer: VectorLayer, dataList: MassData[], config: {
+    clear: false;
+}) => void;
 /**
  * 创建massMarksLayer
  * @param dataList
  * @param styleList
  */
-declare const createMassMarksLayer: (dataList: MassData[], styleList?: StyleLike[]) => VectorLayer<VectorSource<Feature<Point>>, Feature<Point>>;
+declare const createMassMarksLayer: (dataList: MassData[], styleList?: StyleLike[]) => VectorLayer<VectorSource<Feature<Point, {
+    [x: string]: any;
+}>>, Feature<Point, {
+    [x: string]: any;
+}>>;
 /**
  * 添加massMarksLayer
  * @param getImgUrlFn
  */
-declare const addMassMarksLayer: (getImgUrlFn: GetImgUrlFn) => (dataList: never[] | undefined, iconConfig: IconConfig, openClick?: boolean) => VectorLayer<VectorSource<Feature<Point>>, Feature<Point>>;
+declare const addMassMarksLayer: (getImgUrlFn: GetImgUrlFn) => (dataList: never[] | undefined, iconConfig: IconConfig, openClick?: boolean) => VectorLayer<VectorSource<Feature<Point, {
+    [x: string]: any;
+}>>, Feature<Point, {
+    [x: string]: any;
+}>>;
 /**
  * 更新图层根据选中状态列表
  * @param checkedStatusList
@@ -260,6 +291,10 @@ declare const createOverlay: (config?: Options) => Overlay;
  * @param dataList
  * @param config
  */
-declare const createClusterLayer: (dataList: ClusterData[], config: ClusterConfig) => VectorLayer<Cluster<Feature<Point>>, Feature<ol_geom.Geometry>>;
+declare const createClusterLayer: (dataList: ClusterData[], config: ClusterConfig) => VectorLayer<Cluster<Feature<Point, {
+    [x: string]: any;
+}>>, Feature<ol_geom.Geometry, {
+    [x: string]: any;
+}>>;
 
-export { type ClusterConfig, type ClusterData, type CustomMap, type GeometryCoordinates, GeometryType, type GetImgUrl, type GetImgUrlFn, type HzsyType, type IconConfig, type MassData, type VectorConfig, type WmtsSourceOptions, type WorldLayerType, type ZheJiangType, activeFeatureByUid, addMassMarksLayer, appendFeaturesByLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createBusinessLayer, createClusterLayer, createMap, createMapInstance, createMapWorldLayer, createMassMarksLayer, createOverlay, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, createZheJiangLayer, disposeMap, emitter, getLayerByName, getLayersDataList, getMapInstance, instance, removeAllLayers, removeLayerByName, removeOverlays, resetActiveFeature, resetActiveVector, resetMap, resetZoomAndCenter, setFitViewByCoords, setFitViewByGeom, setFitViewByLayer, updateMarksLayersByStatus };
+export { type ClusterConfig, type ClusterData, type CustomMap, type GeometryCoordinates, GeometryType, type GetImgUrl, type GetImgUrlFn, type HzsyType, type IconConfig, type MassData, type VectorConfig, type WmtsSourceOptions, type WorldLayerType, type ZheJiangType, activeFeatureByUid, addFeaturesByLayer, addMassMarksLayer, appendFeaturesByLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createBusinessLayer, createClusterLayer, createMap, createMapInstance, createMapWorldLayer, createMassMarksLayer, createOverlay, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, createZheJiangLayer, disposeMap, emitter, getLayerByName, getLayersDataList, getMapInstance, instance, removeAllLayers, removeLayerByName, removeOverlays, resetActiveFeature, resetActiveVector, resetMap, resetZoomAndCenter, setFitViewByCoords, setFitViewByGeom, setFitViewByLayer, updateMarksLayersByStatus };

package/dist/index.js

@@ -70,13 +70,7 @@ import VectorSource from "ol/source/Vector";
 import { Point } from "ol/geom";
 import { singleClick } from "ol/events/condition";
 import { boundingExtent, getCenter } from "ol/extent";
-import {
-  Icon,
-  Text,
-  Fill,
-  Style,
-  Stroke
-} from "ol/style";
+import { Icon, Text, Fill, Style, Stroke } from "ol/style";
 var removeOverlays = (key = "") => {
   if (instance) {
     const overlays = instance.getOverlays().getArray().filter((overlay) => overlay.get(key || "position"));
@@ -393,13 +387,11 @@ var selectEventHandle = (vectorLayer, feature) => {
   }
   const isAutoFit = vectorLayer.get("_isAutoFit");
   if (isAutoFit) {
-    const [x, y] = getCenter(feature.getGeometry().getExtent());
-    const [offsetX, offsetY] = vectorLayer.get("_offset") || [0, 0];
     const view = instance.getView();
     view.animate({
       duration: 1e3,
       zoom: view.getZoom(),
-      center: [x + offsetX, y + offsetY]
+      center: getCenter(feature.getGeometry().getExtent())
     });
   }
 };
@@ -448,8 +440,8 @@ var createSelectByLayer = (vectorLayer) => {
   vectorLayer.set("_selectInteraction", interaction);
   return interaction;
 };
-var createMassMarksLayer = (dataList, styleList = []) => {
-  const features = dataList.map((item) => {
+var createFeatures = (dataList, styleList = []) => {
+  return dataList.map((item) => {
     const { crsForm } = item;
     const coord = gcoord.transform(
       [+item.lnglat[0], +item.lnglat[1]],
@@ -466,10 +458,21 @@ var createMassMarksLayer = (dataList, styleList = []) => {
     feature.setStyle(styleList[item.style]);
     return feature;
   });
+};
+var addFeaturesByLayer = (targetLayer, dataList, config) => {
+  const massMarksStyles = targetLayer.get("_massMarksStyles");
+  const targetSource = targetLayer == null ? void 0 : targetLayer.getSource();
+  const { clear } = config;
+  if (clear) {
+    targetSource == null ? void 0 : targetSource.clear();
+  }
+  targetSource == null ? void 0 : targetSource.addFeatures(createFeatures(dataList, massMarksStyles));
+};
+var createMassMarksLayer = (dataList, styleList = []) => {
   const vectorLayer = new VectorLayer({
     zIndex: 2e3,
     source: new VectorSource({
-      features
+      features: createFeatures(dataList, styleList)
     })
   });
   vectorLayer.setProperties({
@@ -552,12 +555,14 @@ var addMassMarksLayer = (getImgUrlFn) => {
     }
     massMarksLayer.setProperties({
       _isCustom: true,
+      _offset: offset,
       _hasLine: hasLine,
       _hasFace: hasFace,
       className: layerName,
       _layerName: layerName,
       _isVectorLayer: true,
-      _isDynamic: isDynamic
+      _isDynamic: isDynamic,
+      _massMarksStyles: massMarksStyles
     });
     instance.addLayer(massMarksLayer);
     return massMarksLayer;
@@ -600,7 +605,8 @@ var createClusterLayer = (dataList, config) => {
     openClick,
     buildStyle,
     singleStyles,
-    computedRadius
+    computedRadius,
+    layerName = "cluster-layer"
   } = config;
   const innerComputedRadius = (size) => Math.pow(size / count, 1 / 18);
   styleCache[1] = singleStyles;
@@ -643,6 +649,7 @@ var createClusterLayer = (dataList, config) => {
   };
   const vectorLayer = new VectorLayer({
     zIndex: 200,
+    className: layerName,
     source: new Cluster({
       distance: distance || 80,
       minDistance: minDistance || 0,
@@ -676,7 +683,6 @@ import { WMTS } from "ol/source";
 import { TileGrid } from "ol/tilegrid";
 import { Tile } from "ol/layer";
 import WMTSTileGrid from "ol/tilegrid/WMTS";
-import WebGLTileLayer from "ol/layer/WebGLTile";
 var createBaseLayer = (layerName = "hzsyvector_dark") => {
   const config = {
     zIndex: -5,
@@ -723,7 +729,7 @@ var createBaseLayer = (layerName = "hzsyvector_dark") => {
       _layerName: layerName
     }
   };
-  return isWebGLSupported() ? new WebGLTileLayer(config) : new Tile(config);
+  return new Tile(config);
 };
 var createMapWorldLayer = (layerName, tk = "c77eddc667c5bed016fded560baf93e7") => {
   const [name, matrixSet] = layerName.split("_");
@@ -936,8 +942,8 @@ var getLayersDataList = () => {
 };
 var determineGeometryType = (coordinates) => {
   const getArrayDepth = (arr) => {
-    if (!Array.isArray(arr)) return 0;
-    return 1 + Math.max(...arr.map((item) => getArrayDepth(item)), 0);
+    if (!Array.isArray(arr) || arr.length === 0) return 0;
+    return 1 + getArrayDepth(arr[0]);
   };
   const isClosedRing = (coords) => {
     if (!Array.isArray(coords) || coords.length < 3) return false;
@@ -982,10 +988,6 @@ var determineGeometryType = (coordinates) => {
     return "Invalid" /* Invalid */;
   }
 };
-var isWebGLSupported = () => {
-  const canvas = document.createElement("canvas");
-  return !!canvas.getContext("webgl") || !!canvas.getContext("experimental-webgl");
-};
 
 // src/ogc-utils.ts
 import { WMTS as WMTS2 } from "ol/source";
@@ -1038,6 +1040,7 @@ var createWmtsLayer = (serverUrl) => (config) => __async(null, null, function* (
 export {
   GeometryType,
   activeFeatureByUid,
+  addFeaturesByLayer,
   addMassMarksLayer,
   appendFeaturesByLayer,
   buildMassMarksStyles,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "map-ol-utils",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "type": "module",
   "description": "Openlayers utils library",
   "files": [
@@ -27,7 +27,7 @@
   "dependencies": {
     "gcoord": "^1.0.7",
     "mitt": "^3.0.1",
-    "ol": "^10.6.1"
+    "ol": "^10.9.0"
   },
   "peerDependencies": {
     "ol": ">=10.5.0"