my-openlayer 0.1.0 → 0.1.2

package/LICENSE

@@ -1,21 +1,21 @@
- MIT License
+MIT License
 
-   Copyright (c) 2024 yuchen
+Copyright (c) 2025 cuteyuchen
 
-   Permission is hereby granted, free of charge, to any person obtaining a copy
-   of this software and associated documentation files (the "Software"), to deal
-   in the Software without restriction, including without limitation the rights
-   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-   copies of the Software, and to permit persons to whom the Software is
-   furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-   The above copyright notice and this permission notice shall be included in all
-   copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
-   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-   SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,339 @@
+# my-openlayer
+
+基于 OpenLayers 的地图组件库，提供了一系列便捷的地图操作功能，支持天地图底图加载、要素绘制、图层管理等功能。
+
+## 功能特点
+
+- **底图管理**
+  - 支持天地图矢量图、影像图、地形图
+  - 支持底图动态切换
+  - 支持注记图层控制
+  - 支持地图裁剪
+
+- **要素操作**
+  - 点位标注（支持图标、文字）
+  - 线要素绘制（支持样式自定义）
+  - 面要素绘制
+  - DOM点位（支持Vue组件）
+  - 点位聚合展示
+  - 闪烁点位效果
+
+- **地图工具**
+  - 图层管理
+  - 事件监听
+  - 坐标转换
+  - 视图控制
+
+## 安装
+
+```bash
+npm install my-openlayer
+```
+
+## 使用方法
+
+### 基础初始化
+
+```javascript
+import MyOl from 'my-openlayer';
+
+const map = new MyOl('map-container', {
+    // 中心点坐标
+    center: [119.81, 29.969],
+    // 缩放级别
+    zoom: 10,
+    // 最小缩放级别
+    minZoom: 8,
+    // 最大缩放级别
+    maxZoom: 20,
+    // 天地图token
+    token: 'your-tianditu-token',
+    // 是否显示注记
+    annotation: true,
+    // 地图裁剪
+    mapClip: false,
+    mapClipData: undefined,
+    // 图层配置
+    layers: {
+        vec_c: [], // 矢量图层
+        img_c: [], // 影像图层
+        ter_c: []  // 地形图层
+    }
+});
+```
+
+### 底图操作
+
+```javascript
+// 获取底图管理实例
+const baseLayers = map.getMapBaseLayers();
+
+// 切换底图
+baseLayers.switchBaseLayer('vec_c');  // 切换到矢量图
+baseLayers.switchBaseLayer('img_c');  // 切换到影像图
+baseLayers.switchBaseLayer('ter_c');  // 切换到地形图
+
+// 添加注记图层
+baseLayers.addAnnotationLayer({
+    type: 'cva_c',  // 注记类型
+    zIndex: 11,     // 图层层级
+    visible: true   // 是否可见
+});
+```
+
+### 点位操作
+
+```javascript
+// 获取点位操作实例
+const point = map.getPoint();
+
+// 添加普通点位
+point.addPoint([
+    {
+        lgtd: 119.81,
+        lttd: 29.969,
+        name: '测试点位'
+    }
+], 'test-point', {
+    nameKey: 'name',            // 名称字段
+    img: 'marker.png',          // 图标路径
+    hasImg: true,              // 是否显示图标
+    textFont: '12px sans-serif', // 文字样式
+    textFillColor: '#FFF',      // 文字颜色
+    textStrokeColor: '#000',    // 文字描边颜色
+    textStrokeWidth: 3,         // 文字描边宽度
+    textOffsetY: 20,           // 文字Y轴偏移
+    zIndex: 4,                 // 图层层级
+    visible: true              // 是否可见
+});
+
+// 添加聚合点位
+point.addClusterPoint(pointData, 'cluster-point', {
+    nameKey: 'name',
+    img: 'cluster.png',
+    zIndex: 4
+});
+
+// 添加Vue组件点位
+const domPoints = point.setDomPointVue(
+    [{ lgtd: 119.81, lttd: 29.969 }],
+    YourVueComponent,
+    Vue
+);
+
+// 控制组件点位显隐
+domPoints.setVisible(true);
+
+// 移除组件点位
+domPoints.remove();
+
+// 地图定位
+point.locationAction(119.81, 29.969, 15, 1000);
+```
+
+### 线要素操作
+
+```javascript
+// 获取线要素操作实例
+const line = map.getLine();
+
+// 添加普通线要素
+line.addLineCommon(lineGeoJSON, {
+    type: 'test-line',          // 线要素类型
+    strokeColor: '#037AFF',     // 线条颜色
+    strokeWidth: 3,             // 线条宽度
+    zIndex: 3                   // 图层层级
+});
+
+// 添加河流要素（支持分级显示）
+line.addRiverLayersByZoom(riverGeoJSON, {
+    type: 'river',
+    strokeColor: '#0071FF',
+    strokeWidth: 3,
+    zIndex: 6,
+    visible: true
+});
+```
+
+### 地图工具
+
+```javascript
+// 获取工具实例
+const tools = map.getTools();
+
+// 获取图层
+const layer = tools.getLayerByLayerName('layerName');
+
+// 移除图层
+tools.removeLayer('layerName');
+
+// 事件监听
+MapTools.mapOnEvent(map, 'click', (feature, event) => {
+    console.log('点击要素:', feature);
+});
+
+// 支持的事件类型
+// - click: 点击事件
+// - moveend: 地图移动结束事件
+// - hover: 鼠标悬停事件
+```
+
+## API文档
+
+### MyOl
+
+主类，用于创建和管理地图实例。
+
+#### 构造函数
+
+```
+constructor(id: string, options: MapInitType)
+```
+
+参数：
+- `id`: 地图容器ID
+- `options`: 地图初始化配置
+  - `center`: 中心点坐标 [经度, 纬度]
+  - `zoom`: 缩放级别
+  - `minZoom`: 最小缩放级别
+  - `maxZoom`: 最大缩放级别
+  - `token`: 天地图token
+  - `annotation`: 是否显示注记
+  - `mapClip`: 是否启用地图裁剪
+  - `mapClipData`: 裁剪数据
+  - `layers`: 图层配置
+
+#### 方法
+
+- `getPoint()`: 获取点位操作实例
+- `getLine()`: 获取线要素操作实例
+- `getPolygon()`: 获取面要素操作实例
+- `getTools()`: 获取地图工具实例
+- `getMapBaseLayers()`: 获取底图图层管理实例
+- `restPosition(duration?: number)`: 重置地图位置
+- `locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number)`: 地图定位
+- `mapOnEvent(eventType: string, callback: Function, clickType?: string)`: 地图事件监听
+- `showMapLayer(layerName: string, show: boolean)`: 控制图层显隐
+
+### MapBaseLayers
+
+底图图层管理类。
+
+#### 方法
+
+- `switchBaseLayer(type: TiandituType)`: 切换底图
+- `addAnnotationLayer(options: AnnotationLayerOptions)`: 添加注记图层
+- `initLayer()`: 初始化图层
+
+### Point
+
+点位操作类。
+
+#### 方法
+
+- `addPoint(pointData: PointData[], type: string, options: OptionsType)`: 添加点位
+- `addClusterPoint(pointData: any[], type: string, options: OptionsType)`: 添加聚合点位
+- `setDomPointVue(pointInfoList: any[], template: any, Vue: any)`: 添加Vue组件点位
+- `locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number)`: 地图定位
+
+### Line
+
+线要素操作类。
+
+#### 方法
+
+- `addLineCommon(data: MapJSONData, options: OptionsType)`: 添加普通线要素
+- `addRiverLayersByZoom(data: MapJSONData, options: OptionsType)`: 添加河流要素
+- `showRiverLayer(show: boolean)`: 控制河流图层显隐
+
+### MapTools
+
+地图工具类。
+
+#### 方法
+
+- `getLayerByLayerName(layerName: string)`: 获取图层
+- `removeLayer(layerName: string)`: 移除图层
+- `static mapOnEvent(map: Map, eventType: string, callback: Function, clickType?: string)`: 事件监听
+- `static setMapClip(baseLayer: any, data: MapJSONData)`: 设置地图裁剪
+
+## 类型定义
+
+```typescript
+interface MapInitType {
+    layers?: undefined;
+    zoom?: number;
+    center?: number[];
+    minZoom?: number;
+    maxZoom?: number;
+    extent?: undefined;
+    token?: string;
+    annotation?: boolean;
+    mapClip?: boolean;
+    mapClipData?: any;
+}
+
+type TiandituType = 'vec_c' | 'img_c' | 'ter_c';
+
+interface AnnotationLayerOptions {
+    type: string;
+    token: string;
+    zIndex?: number;
+    visible?: boolean;
+}
+
+interface OptionsType {
+    type?: string;
+    nameKey?: string;
+    img?: string;
+    hasImg?: boolean;
+    textFont?: string;
+    textFillColor?: string;
+    textStrokeColor?: string;
+    textStrokeWidth?: number;
+    textOffsetY?: number;
+    zIndex?: number;
+    visible?: boolean;
+    strokeColor?: string;
+    strokeWidth?: number;
+}
+```
+
+## 依赖
+
+- ol ^6.15.1
+- proj4 ^2.7.5
+- turf ^3.0.14
+
+
+## 许可证
+
+[MIT](LICENSE)
+
+
+## 更新日志
+
+### 0.1.1
+- 初始版本发布
+- 支持基础地图功能
+- 支持点线面要素操作
+- 支持天地图底图
+
+## 常见问题
+
+1. **如何获取天地图token？**
+   - 访问天地图开发者平台注册账号
+   - 申请密钥(token)
+
+2. **为什么地图无法加载？**
+   - 检查token是否正确
+   - 检查网络连接
+   - 确认坐标系是否正确
+
+3. **如何自定义点位样式？**
+   - 通过options参数配置样式
+   - 支持自定义图标和文字样式
+
+## 联系方式
+
+如有问题或建议，请提交 [Issue](https://github.com/cuteyuchen/my-openlayer/issues)

package/dist/MyOl.d.ts

@@ -3,6 +3,7 @@ import Map from "ol/Map";
 import Polygon from "./core/Polygon";
 import Point from "./core/Point";
 import Line from "./core/Line";
+import MapBaseLayers from "./core/MapBaseLayers";
 import MapTools from "./core/MapTools";
 import { MapInitType } from './types';
 export default class MyOl {
@@ -31,7 +32,7 @@ export default class MyOl {
      * @returns Polygon
      */
     getPolygon(): Polygon;
-    getMapBaseLayers(): any;
+    getMapBaseLayers(): MapBaseLayers;
     /**
      * 获取 地图 点 操作
      * @returns Point

package/dist/core/MapBaseLayers.d.ts

@@ -14,7 +14,7 @@ export default class MapBaseLayers {
     constructor(map: Map, options: MapLayersOptions);
     switchBaseLayer(type: TiandituType): void;
     initLayer(): void;
-    addAnnotationLayer(options: AnnotationLayerOptions): void;
+    addAnnotationLayer(options: Omit<AnnotationLayerOptions, 'token'>): void;
     static addAnnotationLayer(map: Map, options: AnnotationLayerOptions): TileLayer<XYZ>;
     addMapLayer(): void;
     createLayer(layer: any): any;

package/dist/core/MapBaseLayers.js

@@ -76,15 +76,18 @@ export default class MapBaseLayers {
     }
     //添加注记图层
     addAnnotationLayer(options) {
-        MapBaseLayers.addAnnotationLayer(this.map, options);
+        MapBaseLayers.addAnnotationLayer(this.map, {
+            ...options,
+            token: this.options.token || ''
+        });
     }
     //添加注记图层
     static addAnnotationLayer(map, options) {
         const layer = MapBaseLayers.getAnnotationLayer({
             type: options.type,
             token: options.token,
-            zIndex: options.zIndex,
-            visible: options.visible
+            zIndex: options.zIndex ?? 10,
+            visible: options.visible ?? true
         });
         map.addLayer(layer);
         return layer;

package/dist/types.d.ts

@@ -45,8 +45,8 @@ export interface MapLayersOptions {
 export interface AnnotationLayerOptions {
     type: AnnotationType;
     token: string;
-    zIndex: number;
-    visible: boolean;
+    zIndex?: number;
+    visible?: boolean;
 }
 export interface OptionsType {
     type?: string;

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "keywords": [
+    "openlayers",
+    "ol",
+    "gis",
+    "map",
+    "vue"
+  ],
   "files": [
-    "dist/*"
+    "dist/*",
+    "LICENSE",
+    "README.md"
   ],
   "scripts": {
     "dev": "vite",