my-openlayer 1.0.9 → 1.0.11

package/MyOl.js

@@ -40,13 +40,16 @@ class MyOl {
             // 准备图层
             const layers = Array.isArray(this.options.layers) ? this.options.layers : [];
             // 创建地图实例
-            this.map = new Map({
+            // 确保 view 选项不会传递给 OpenLayers Map 构造函数，避免 "then is not a function" 错误
+            // 我们完全控制传递给 Map 的选项，不直接传递用户的 options
+            const mapOptions = {
                 target: id,
-                view: MyOl.createView(this.options),
+                view: this.options.view || MyOl.createView(this.options),
                 layers: layers,
                 controls: this.createControls()
-            });
-            if (layers.length === 0 || this.options.annotation) {
+            };
+            this.map = new Map(mapOptions);
+            if (this.options.token && (layers.length === 0 || this.options.annotation)) {
                 this.getMapBaseLayers();
             }
             // 初始化基础事件监听（地图错误等）
@@ -136,8 +139,8 @@ class MyOl {
                 projection,
                 center: olProjFromLonLat(options.center, projection),
                 zoom: options.zoom ?? MyOl.DefaultOptions.zoom,
-                minZoom: options.minZoom ?? MyOl.DefaultOptions.minZoom,
-                maxZoom: options.maxZoom ?? MyOl.DefaultOptions.maxZoom,
+                minZoom: options.minZoom,
+                maxZoom: options.maxZoom,
                 ...(options.extent && { extent: options.extent })
             };
             return new View(viewOptions);
@@ -369,8 +372,6 @@ MyOl.DefaultOptions = {
     layers: undefined,
     zoom: 10,
     center: [119.81, 29.969],
-    minZoom: 8,
-    maxZoom: 20,
     extent: undefined
 };
 // 坐标系配置

package/core/Point.d.ts

@@ -79,12 +79,11 @@ export default class Point {
      * 添加vue组件为点位
      * @param pointDataList 点位信息列表
      * @param template vue组件模板
-     * @param options 选项，包含Vue实例
+     * @param Vue Vue实例
      * @returns 返回控制对象，包含显示、隐藏、移除方法
      * @throws 当参数无效时抛出错误
      */
     addVueTemplatePoint(pointDataList: PointData[], template: any, options?: {
-        Vue?: any;
         positioning?: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-left' | 'center-center' | 'center-right' | 'top-left' | 'top-center' | 'top-right';
         stopEvent?: boolean;
     }): {

package/core/Point.js

@@ -321,7 +321,7 @@ export default class Point {
      * 添加vue组件为点位
      * @param pointDataList 点位信息列表
      * @param template vue组件模板
-     * @param options 选项，包含Vue实例
+     * @param Vue Vue实例
      * @returns 返回控制对象，包含显示、隐藏、移除方法
      * @throws 当参数无效时抛出错误
      */
@@ -332,9 +332,6 @@ export default class Point {
         if (!template) {
             throw new Error('Vue template is required');
         }
-        if (!options?.Vue) {
-            throw new Error('Vue instance is required in options');
-        }
         try {
             const vueTemplatePoint = new VueTemplatePoint(this.map);
             return vueTemplatePoint.addVueTemplatePoint(pointDataList, template, options);

package/core/Polygon.js

@@ -117,11 +117,9 @@ export default class Polygon {
      */
     setFeatureStyles(features, options) {
         features.forEach(feature => {
-            feature.set('type', options.type || options.layerName);
-            feature.set('layerName', options.type || options.layerName);
-            const fillColor = options.fillColorCallBack
-                ? options.fillColorCallBack(feature)
-                : options.fillColor;
+            feature.set('type', options.layerName);
+            feature.set('layerName', options.layerName);
+            const fillColor = options.fillColorCallBack ? options.fillColorCallBack(feature) : options.fillColor;
             const featureStyle = new Style({
                 stroke: new Stroke({
                     color: options.strokeColor,

package/core/VueTemplatePoint.d.ts

@@ -21,7 +21,6 @@ export default class VueTemplatePoint {
      * @returns 点位控制器
      */
     addVueTemplatePoint(pointDataList: any[], template: any, options?: {
-        Vue?: any;
         positioning?: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-left' | 'center-center' | 'center-right' | 'top-left' | 'top-center' | 'top-right';
         stopEvent?: boolean;
     }): {

package/core/VueTemplatePoint.js

@@ -2,13 +2,59 @@ import Overlay from 'ol/Overlay';
 import { VueTemplatePointState } from '../types';
 import { ErrorHandler, ErrorType } from '../utils/ErrorHandler';
 import { ValidationUtils } from '../utils/ValidationUtils';
-/**
- * 检测Vue版本
- * @param Vue Vue实例
- * @returns 是否为Vue3
- */
-function isVue3(Vue) {
-    return !!(Vue && (Vue.version?.startsWith('3') || Vue.createApp));
+// 动态导入Vue
+let Vue = null;
+let isVue3 = false;
+// 检测Vue版本并导入
+async function detectAndImportVue() {
+    try {
+        // 尝试动态导入Vue
+        const vueModule = await import('vue');
+        Vue = vueModule.default || vueModule;
+        // 检测Vue版本
+        if (Vue && (Vue.version?.startsWith('3') || Vue.createApp)) {
+            isVue3 = true;
+        }
+        else {
+            isVue3 = false;
+        }
+    }
+    catch (e) {
+        console.warn('Vue not found. Please ensure Vue is installed in your project.');
+        Vue = null;
+    }
+}
+// 同步版本的Vue检测（用于兼容性）
+function detectVueSync() {
+    try {
+        // 尝试从全局对象获取Vue
+        if (typeof window !== 'undefined' && window.Vue) {
+            Vue = window.Vue;
+            isVue3 = !!(Vue.version?.startsWith('3') || Vue.createApp);
+            return;
+        }
+        // 如果在Node.js环境中，尝试require
+        if (typeof window === 'undefined') {
+            try {
+                // 使用eval来避免TypeScript编译时的require检查
+                const requireFunc = eval('require');
+                Vue = requireFunc('vue');
+                isVue3 = !!(Vue.version?.startsWith('3') || Vue.createApp);
+            }
+            catch (e) {
+                console.warn('Vue not found. Please ensure Vue is installed in your project.');
+                Vue = null;
+            }
+        }
+    }
+    catch (e) {
+        console.warn('Failed to detect Vue:', e);
+    }
+}
+// 初始化Vue导入
+detectVueSync();
+if (!Vue) {
+    detectAndImportVue();
 }
 /**
  * Vue模板点位管理类
@@ -39,12 +85,7 @@ export default class VueTemplatePoint {
         if (!template) {
             throw new Error('Vue template is required');
         }
-        if (!options?.Vue) {
-            throw new Error('Vue instance is required in options');
-        }
         try {
-            const Vue = options.Vue;
-            const vueIsVue3 = isVue3(Vue);
             const instances = [];
             pointDataList.forEach((pointData) => {
                 if (!ValidationUtils.validateLngLat(pointData.lgtd, pointData.lttd)) {
@@ -63,7 +104,7 @@ export default class VueTemplatePoint {
                     positioning: options?.positioning,
                     stopEvent: options?.stopEvent,
                 };
-                const instance = new VueTemplatePointInstanceImpl(this.map, pointOptions, this.errorHandler, Vue, vueIsVue3);
+                const instance = new VueTemplatePointInstanceImpl(this.map, pointOptions, this.errorHandler);
                 instances.push(instance);
                 this.vuePoints.set(instance.id, instance);
             });
@@ -123,13 +164,11 @@ export default class VueTemplatePoint {
  * @internal
  */
 class VueTemplatePointInstanceImpl {
-    constructor(map, options, errorHandler, Vue, isVue3) {
+    constructor(map, options, errorHandler) {
         this.app = null;
         this.state = VueTemplatePointState.CREATED;
         this.map = map;
         this.errorHandler = errorHandler;
-        this.Vue = Vue;
-        this.isVue3 = isVue3;
         this.options = this.mergeDefaultOptions(options);
         this.id = this.generateUniqueId();
         this.position = [this.options.lgtd, this.options.lttd];
@@ -214,13 +253,13 @@ class VueTemplatePointInstanceImpl {
      */
     createVueApp() {
         const { Template, props } = this.options;
-        if (!this.Vue) {
-            throw new Error('Vue is not available. Please ensure Vue instance is provided.');
+        if (!Vue) {
+            throw new Error('Vue is not available. Please ensure Vue is installed in your project.');
         }
         try {
-            if (this.isVue3) {
+            if (isVue3) {
                 // Vue 3
-                this.app = this.Vue.createApp({
+                this.app = Vue.createApp({
                     ...Template,
                     props: props || {}
                 });
@@ -228,7 +267,7 @@ class VueTemplatePointInstanceImpl {
             }
             else {
                 // Vue 2
-                this.app = new this.Vue({
+                this.app = new Vue({
                     el: this.dom,
                     render: (h) => h(Template, { props: props || {} })
                 });
@@ -395,7 +434,7 @@ class VueTemplatePointInstanceImpl {
     destroyVueApp() {
         if (this.app) {
             try {
-                if (this.isVue3) {
+                if (isVue3) {
                     // Vue 3: 使用 unmount
                     this.app.unmount();
                 }

package/index.d.ts

@@ -15,4 +15,4 @@ export { ValidationUtils } from './utils/ValidationUtils';
 export type { BaseOptions, StyleOptions, TextOptions } from './types';
 export type { PointOptions, LineOptions, PolygonOptions } from './types';
 export type { OptionsType } from './types';
-export type { MapInitType, MapLayersOptions, HeatMapOptions, ImageLayerData, MaskLayerOptions, ColorMap, FeatureColorUpdateOptions, PointData, LineData, ClusterOptions, MeasureHandlerType, VueTemplatePointOptions, MapJSONData, Feature, AnnotationType, TiandituType, MapLayers, AnnotationLayerOptions } from './types';
+export type { MapInitType, MapLayersOptions, HeatMapOptions, ImageLayerData, MaskLayerOptions, ColorMap, FeatureColorUpdateOptions, PointData, LineData, ClusterOptions, MeasureHandlerType, VueTemplatePointOptions, MapJSONData, FeatureData, AnnotationType, TiandituType, MapLayers, AnnotationLayerOptions } from './types';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "1.0.9",
+  "version": "1.0.11",
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",
@@ -29,7 +29,8 @@
   "dependencies": {
     "@turf/turf": "^7.2.0",
     "ol": "^6.15.1",
-    "proj4": "^2.7.5"
+    "proj4": "^2.7.5",
+    "my-openlayer": "^1.0.9"
   },
   "devDependencies": {
     "@types/proj4": "^2.5.2",

package/types.d.ts

@@ -1,7 +1,9 @@
 import BaseLayer from "ol/layer/Base";
 import TileLayer from "ol/layer/Tile";
 import { WMTS } from "ol/source";
-export interface Feature {
+import View from "ol/View";
+import Feature from "ol/Feature";
+export interface FeatureData {
     type: string;
     properties: any;
     geometry: {
@@ -12,7 +14,7 @@ export interface Feature {
 export interface MapJSONData {
     type: string;
     name?: string;
-    features: Feature[];
+    features: FeatureData[];
 }
 type LayerItem = BaseLayer | TileLayer<WMTS>;
 export interface MapInitType {
@@ -21,7 +23,7 @@ export interface MapInitType {
     };
     zoom?: number;
     center?: number[];
-    view?: any;
+    view?: View;
     minZoom?: number;
     maxZoom?: number;
     extent?: number[];
@@ -81,8 +83,6 @@ export interface BaseOptions {
     mapClipData?: MapJSONData;
     /** 投影选项 */
     projectionOptOptions?: any;
-    /** 扩展属性 */
-    [propName: string]: any;
 }
 /**
  * 样式选项接口 - 图形样式相关配置
@@ -99,7 +99,7 @@ export interface StyleOptions {
     /** 填充颜色 */
     fillColor?: string;
     /** 填充颜色回调函数 */
-    fillColorCallBack?: (feature: any) => string;
+    fillColorCallBack?: (feature: Feature) => string;
 }
 /**
  * 文本选项接口 - 文本标注相关配置
@@ -108,7 +108,7 @@ export interface TextOptions {
     /** 文本可见性 */
     textVisible?: boolean;
     /** 文本内容回调函数 */
-    textCallBack?: (feature: any) => string;
+    textCallBack?: (feature: Feature) => string;
     /** 文本字体 */
     textFont?: string;
     /** 文本填充颜色 */

package/core/DomPoint.d.ts

@@ -1,163 +0,0 @@
-import { Map } from 'ol';
-import Overlay from 'ol/Overlay';
-import { Coordinate } from 'ol/coordinate';
-import { DomPointOptions, DomPointState } from '../types';
-/**
- * DOM点位管理类
- * 用于在地图上添加和管理DOM元素覆盖物
- */
-export default class DomPoint {
-    private readonly map;
-    private readonly errorHandler;
-    private app;
-    private readonly anchor;
-    private readonly dom;
-    private readonly id;
-    private readonly options;
-    private state;
-    private position;
-    /**
-     * 构造函数
-     * @param map OpenLayers地图实例
-     * @param options 配置选项
-     * @throws 当参数无效时抛出错误
-     */
-    constructor(map: Map, options: DomPointOptions);
-    /**
-     * 验证构造函数参数
-     * @param map 地图实例
-     * @param options 配置选项
-     * @private
-     */
-    private validateConstructorParams;
-    /**
-     * 合并默认配置选项
-     * @param options 用户配置选项
-     * @returns 合并后的配置选项
-     * @private
-     */
-    private mergeDefaultOptions;
-    /**
-     * 生成唯一ID
-     * @returns 唯一标识符
-     * @private
-     */
-    private generateUniqueId;
-    /**
-     * 创建DOM元素
-     * @returns DOM元素
-     * @private
-     */
-    private createDomElement;
-    /**
-     * 创建Vue应用实例
-     * @private
-     */
-    private createVueApp;
-    /**
-     * 创建覆盖层
-     * @returns 覆盖层实例
-     * @private
-     */
-    private createOverlay;
-    /**
-     * 错误处理
-     * @param message 错误消息
-     * @param error 原始错误
-     * @param context 错误上下文
-     * @private
-     */
-    private handleError;
-    /**
-     * 设置可见性
-     * @param visible 是否可见
-     * @throws 当操作失败时抛出错误
-     */
-    setVisible(visible: boolean): void;
-    /**
-     * 获取当前可见性状态
-     * @returns 是否可见
-     */
-    isVisible(): boolean;
-    /**
-     * 更新位置
-     * @param lgtd 新经度
-     * @param lttd 新纬度
-     * @throws 当操作失败时抛出错误
-     */
-    updatePosition(lgtd: number, lttd: number): void;
-    /**
-     * 获取当前位置
-     * @returns 当前坐标位置
-     */
-    getPosition(): Coordinate;
-    /**
-     * 更新组件属性
-     * @param newProps 新的属性对象
-     * @throws 当操作失败时抛出错误
-     */
-    updateProps(newProps: Record<string, any>): void;
-    /**
-     * 设置CSS样式
-     * @param styles 样式对象
-     * @throws 当操作失败时抛出错误
-     */
-    setStyle(styles: Partial<CSSStyleDeclaration>): void;
-    /**
-     * 添加CSS类名
-     * @param className 要添加的类名
-     * @throws 当操作失败时抛出错误
-     */
-    addClass(className: string): void;
-    /**
-     * 移除CSS类名
-     * @param className 要移除的类名
-     * @throws 当操作失败时抛出错误
-     */
-    removeClass(className: string): void;
-    /**
-     * 销毁Vue应用实例
-     * @private
-     */
-    private destroyVueApp;
-    /**
-     * 移除点位
-     * @throws 当移除失败时抛出错误
-     */
-    remove(): void;
-    /**
-     * 获取覆盖层
-     * @returns 覆盖层实例
-     */
-    getOverlay(): Overlay;
-    /**
-     * 获取点位ID
-     * @returns 点位唯一标识符
-     */
-    getId(): string;
-    /**
-     * 获取DOM元素
-     * @returns DOM元素
-     */
-    getDomElement(): HTMLElement;
-    /**
-     * 获取当前状态
-     * @returns 当前状态
-     */
-    getState(): DomPointState;
-    /**
-     * 获取配置选项
-     * @returns 配置选项的副本
-     */
-    getOptions(): Readonly<DomPointOptions>;
-    /**
-     * 检查是否已销毁
-     * @returns 是否已销毁
-     */
-    isDestroyed(): boolean;
-    /**
-     * 获取地图实例
-     * @returns 地图实例
-     */
-    getMap(): Map;
-}