my-openlayer 2.5.1 → 2.5.3

package/MyOl.d.ts

@@ -25,6 +25,8 @@ export default class MyOl {
     private readonly options;
     static readonly DefaultOptions: MapInitType;
     private static readonly PROJECTIONS;
+    /** *********************内置投影定义*********************/
+    private static readonly PROJECTION_DEFINITIONS;
     /**
      * 构造函数
      * @param id 地图容器 DOM 元素 ID
@@ -41,6 +43,16 @@ export default class MyOl {
      * @private
      */
     private static initializeProjections;
+    /**
+     * 缺失时注册 proj4 投影定义，避免生产构建依赖第三方模块默认副作用。
+     * @private
+     */
+    private static ensureProj4Definition;
+    /**
+     * 应用用户显式提供的投影元数据。
+     * @private
+     */
+    private static applyCustomProjectionMetadata;
     /**
      * 创建地图控件
      * @private
@@ -57,6 +69,11 @@ export default class MyOl {
      * @returns View 地图视图实例
      */
     static createView(options?: MapInitType): View;
+    /**
+     * 解析视图投影，优先复用已注册投影，避免丢失 proj4 推导的单位信息。
+     * @private
+     */
+    private static resolveViewProjection;
     /**
      * 获取视图（向后兼容）
      * @deprecated 请使用 createView 方法

package/MyOl.js

@@ -1,7 +1,7 @@
 "use strict";
 // OpenLayers 核心导入
 import { register as olProj4Register } from 'ol/proj/proj4';
-import { Projection as olProjProjection, addProjection as olProjAddProjection, fromLonLat as olProjFromLonLat } from 'ol/proj';
+import { Projection as olProjProjection, addProjection as olProjAddProjection, fromLonLat as olProjFromLonLat, get as olProjGetProjection } from 'ol/proj';
 import View from "ol/View";
 import Map from "ol/Map";
 import { defaults as defaultControls } from 'ol/control';
@@ -86,9 +86,13 @@ class MyOl {
      * @private
      */
     static initializeProjections(options) {
-        // 定义 CGCS2000 坐标系
-        proj4.defs(MyOl.PROJECTIONS.CGCS2000, "+proj=longlat +ellps=GRS80 +no_defs");
-        proj4.defs(MyOl.PROJECTIONS.CGCS2000_3_DEGREE, "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
+        /** *********************投影定义初始化*********************/
+        MyOl.ensureProj4Definition(MyOl.PROJECTIONS.WGS84, MyOl.PROJECTION_DEFINITIONS[MyOl.PROJECTIONS.WGS84]);
+        MyOl.ensureProj4Definition(MyOl.PROJECTIONS.CGCS2000, MyOl.PROJECTION_DEFINITIONS[MyOl.PROJECTIONS.CGCS2000]);
+        MyOl.ensureProj4Definition(MyOl.PROJECTIONS.CGCS2000_3_DEGREE, MyOl.PROJECTION_DEFINITIONS[MyOl.PROJECTIONS.CGCS2000_3_DEGREE]);
+        if (options.projection?.code && options.projection.def) {
+            proj4.defs(options.projection.code, options.projection.def);
+        }
         // 注册到 OpenLayers
         olProj4Register(proj4);
         // 添加 CGCS2000 投影
@@ -100,17 +104,50 @@ class MyOl {
         });
         olProjAddProjection(cgsc2000);
         if (options.projection?.code) {
-            const code = options.projection.code;
-            if (options.projection.def) {
-                proj4.defs(code, options.projection.def);
+            MyOl.applyCustomProjectionMetadata(options.projection);
+        }
+    }
+    /**
+     * 缺失时注册 proj4 投影定义，避免生产构建依赖第三方模块默认副作用。
+     * @private
+     */
+    static ensureProj4Definition(code, definition) {
+        if (!proj4.defs(code)) {
+            proj4.defs(code, definition);
+        }
+    }
+    /**
+     * 应用用户显式提供的投影元数据。
+     * @private
+     */
+    static applyCustomProjectionMetadata(projection) {
+        const { code, extent, worldExtent, units } = projection;
+        const registeredProjection = olProjGetProjection(code);
+        /** *********************自定义投影元数据初始化*********************/
+        if (units) {
+            olProjAddProjection(new olProjProjection({
+                code,
+                extent: extent ?? registeredProjection?.getExtent(),
+                worldExtent: worldExtent ?? registeredProjection?.getWorldExtent(),
+                units
+            }));
+            return;
+        }
+        if (registeredProjection) {
+            if (extent) {
+                registeredProjection.setExtent(extent);
             }
-            const customProj = new olProjProjection({
+            if (worldExtent) {
+                registeredProjection.setWorldExtent(worldExtent);
+            }
+            return;
+        }
+        if (extent || worldExtent) {
+            olProjAddProjection(new olProjProjection({
                 code,
-                extent: options.projection.extent ?? cgsc2000.getExtent(),
-                worldExtent: options.projection.worldExtent ?? cgsc2000.getWorldExtent(),
-                units: options.projection.units ?? cgsc2000.getUnits()
-            });
-            olProjAddProjection(customProj);
+                extent,
+                worldExtent
+            }));
         }
     }
     /**
@@ -147,12 +184,7 @@ class MyOl {
     static createView(options = MyOl.DefaultOptions) {
         try {
             const code = options.projection?.code ?? MyOl.PROJECTIONS.CGCS2000;
-            const projection = new olProjProjection({
-                code,
-                extent: options.projection?.extent ?? [-180, -90, 180, 90],
-                worldExtent: options.projection?.worldExtent ?? [-180, -90, 180, 90],
-                units: options.projection?.units ?? "degrees"
-            });
+            const projection = MyOl.resolveViewProjection(options, code);
             const viewOptions = {
                 projection,
                 center: olProjFromLonLat(options.center, projection),
@@ -167,6 +199,26 @@ class MyOl {
             throw new MyOpenLayersError(`视图创建失败: ${error instanceof Error ? error.message : '未知错误'}`, ErrorType.MAP_ERROR, { options });
         }
     }
+    /**
+     * 解析视图投影，优先复用已注册投影，避免丢失 proj4 推导的单位信息。
+     * @private
+     */
+    static resolveViewProjection(options, code) {
+        const registeredProjection = olProjGetProjection(code);
+        /** *********************视图投影初始化*********************/
+        if (registeredProjection
+            && !options.projection?.extent
+            && !options.projection?.worldExtent
+            && !options.projection?.units) {
+            return registeredProjection;
+        }
+        return new olProjProjection({
+            code,
+            extent: options.projection?.extent ?? registeredProjection?.getExtent() ?? [-180, -90, 180, 90],
+            worldExtent: options.projection?.worldExtent ?? registeredProjection?.getWorldExtent() ?? [-180, -90, 180, 90],
+            units: options.projection?.units ?? registeredProjection?.getUnits() ?? "degrees"
+        });
+    }
     /**
      * 获取视图（向后兼容）
      * @deprecated 请使用 createView 方法
@@ -413,7 +465,14 @@ class MyOl {
 MyOl.DefaultOptions = ConfigManager.DEFAULT_MYOL_OPTIONS;
 // 坐标系配置
 MyOl.PROJECTIONS = {
+    WGS84: "EPSG:4326",
     CGCS2000: "EPSG:4490",
     CGCS2000_3_DEGREE: "EPSG:4549"
 };
+/** *********************内置投影定义*********************/
+MyOl.PROJECTION_DEFINITIONS = {
+    [MyOl.PROJECTIONS.WGS84]: "+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees",
+    [MyOl.PROJECTIONS.CGCS2000]: "+proj=longlat +ellps=GRS80 +no_defs",
+    [MyOl.PROJECTIONS.CGCS2000_3_DEGREE]: "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs"
+};
 export default MyOl;

package/README.md

@@ -39,7 +39,7 @@ my-openlayer 是一个基于 [OpenLayers](https://openlayers.org/) 的现代地
   - **TypeScript 完全支持**：提供完整的类型定义
   - **错误处理 (ErrorHandler)**：统一的错误捕获与日志
   - **配置管理 (ConfigManager)**：集中管理默认配置
-  - **坐标系支持**：内置 CGCS2000 坐标系支持
+  - **坐标系支持**：内置 `EPSG:4326`、`EPSG:4490`、`EPSG:4549`，支持基于 `proj4.def` 的自定义投影注册
 
 ## 安装
 

package/core/map/MapTools.js

@@ -5,6 +5,7 @@ import { ErrorHandler, ErrorType } from "../../utils/ErrorHandler";
 import ValidationUtils from "../../utils/ValidationUtils";
 import ProjectionUtils from "../../utils/ProjectionUtils";
 import { createEmpty, extend, isEmpty } from "ol/extent";
+import { multiply as multiplyTransform } from "ol/transform";
 /**
  * 地图工具类
  * 提供地图的基础操作功能
@@ -75,10 +76,12 @@ class MapTools {
         const features = new GeoJSON().readFeatures(data);
         baseLayer.on("prerender", (event) => {
             const ctx = event.context;
-            // 获取坐标转换矩阵 (pixel = coordinate * transform)
-            // 注意：OpenLayers 的 transform 可能包含 pixelRatio，也可能不包含，取决于版本
-            // 在现代版本中，event.frameState.coordinateToPixelTransform 通常用于将地理坐标转换为 Canvas 像素坐标
-            const transform = event.frameState.coordinateToPixelTransform;
+            /** *********************高分屏坐标转换*********************/
+            // coordinateToPixelTransform 得到的是地图视口 CSS 像素；
+            // inversePixelTransform 会继续转换到当前图层 canvas 的真实渲染像素。
+            const transform = event.inversePixelTransform
+                ? multiplyTransform(event.inversePixelTransform.slice(), event.frameState.coordinateToPixelTransform)
+                : event.frameState.coordinateToPixelTransform;
             ctx.save();
             ctx.beginPath();
             features.forEach((feature) => {

package/docs/MyOl.md

@@ -43,6 +43,20 @@ constructor(id: string | HTMLElement, options?: Partial<MapInitType>)
 | `projection.code` | `string` | 投影代码，如 `'EPSG:4549'`。 |
 | `projection.def` | `string` | proj4 定义字符串。 |
 | `projection.extent` | `number[]` | 投影范围。 |
+| `projection.worldExtent` | `number[]` | 投影对应的经纬度世界范围。 |
+| `projection.units` | `Units` | 显式覆盖投影单位，通常不需要传；优先让 `proj4.def` 自动推导。 |
+
+### 内置坐标系
+
+`MyOl` 初始化时会显式注册以下内置坐标系，并在 `register(proj4)` 前保证 `EPSG:4326` 存在，因此业务项目不需要手动调用 `proj4.defs('EPSG:4326', ...)`：
+
+| 坐标系 | 说明 |
+| :--- | :--- |
+| `EPSG:4326` | WGS84 经纬度坐标，作为输入经纬度和投影转换的基础坐标系。 |
+| `EPSG:4490` | CGCS2000 经纬度坐标，默认视图投影。 |
+| `EPSG:4549` | CGCS2000 3 度带投影，可通过 `projection.code` 使用。 |
+
+自定义投影传入 `projection.def` 后，`MyOl` 会先写入 `proj4.defs`，再统一调用 OpenLayers `register(proj4)`。如果只传 `code` 和 `def`，视图会复用注册后的投影对象，保留 proj4 从定义字符串中推导出的单位，例如 `+units=m` 会保持为米制，不会被默认经纬度元数据覆盖。
 
 ## 静态方法
 
@@ -241,7 +255,12 @@ const map = new MyOl('map', {
   projection: {
     code: 'EPSG:4549', // CGCS2000 3度带
     def: '+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs',
-    extent: [...] // 可选
+    extent: [...], // 可选，仅在需要限制投影范围时传入
+    worldExtent: [...] // 可选，经纬度世界范围
   }
 });
 ```
+
+自定义投影传入 `projection.def` 时，`MyOl` 会先写入 `proj4.defs`，再统一注册到 OpenLayers。这样可以保证 `center` 从 `EPSG:4326` 转换到目标投影时已有完整转换关系。
+
+`projection.extent` 和 `projection.worldExtent` 只会在显式传入时补充到已注册投影；`projection.units` 只有在确实需要覆盖 `proj4.def` 推导结果时才传入。米制投影一般只需要在 `def` 中包含 `+units=m`，不需要额外传 `units`。

package/docs/index.md

@@ -9,6 +9,7 @@ My OpenLayers 是一个基于 OpenLayers 的轻量级地图封装库，旨在简
 - **TypeScript**: 完全使用 TypeScript 编写，提供完整的类型定义。
 - **工具丰富**: 内置测量、选择、裁剪、遮罩等实用工具。
 - **高性能闪烁点**: 基于 `VectorLayer` 和单个 `requestAnimationFrame` 渲染大量预警点位，避免 DOM 动画卡顿。
+- **坐标系稳定注册**: 内置 `EPSG:4326`、`EPSG:4490`、`EPSG:4549`，生产构建下无需业务侧手动注册 WGS84。
 - **扩展性强**: 提供基础类和接口，方便二次封装和扩展。
 
 ## 安装
@@ -30,8 +31,7 @@ import 'ol/ol.css'; // 引入 OpenLayers 样式
 // 初始化地图
 const map = new MyOl('map-container', {
   center: [120.2, 30.3],
-  zoom: 12,
-  projection: 'EPSG:4326'
+  zoom: 12
 });
 
 // 获取原生 Map 实例

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "2.5.1",
+  "version": "2.5.3",
   "type": "module",
   "license": "MIT",
   "main": "index.js",