my-openlayer 1.0.8 → 1.0.9

package/core/Point.d.ts

@@ -79,11 +79,12 @@ export default class Point {
      * 添加vue组件为点位
      * @param pointDataList 点位信息列表
      * @param template vue组件模板
-     * @param Vue Vue实例
+     * @param options 选项，包含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 Vue Vue实例
+     * @param options 选项，包含Vue实例
      * @returns 返回控制对象，包含显示、隐藏、移除方法
      * @throws 当参数无效时抛出错误
      */
@@ -332,6 +332,9 @@ 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/VueTemplatePoint.d.ts

@@ -21,6 +21,7 @@ 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,52 +2,14 @@ import Overlay from 'ol/Overlay';
 import { VueTemplatePointState } from '../types';
 import { ErrorHandler, ErrorType } from '../utils/ErrorHandler';
 import { ValidationUtils } from '../utils/ValidationUtils';
-// 动态导入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);
-        }
-        else {
-            console.warn('Vue not found in global scope. Please ensure Vue is loaded before this library.');
-            Vue = null;
-        }
-    }
-    catch (e) {
-        console.warn('Failed to detect Vue:', e);
-        Vue = null;
-    }
+/**
+ * 检测Vue版本
+ * @param Vue Vue实例
+ * @returns 是否为Vue3
+ */
+function isVue3(Vue) {
+    return !!(Vue && (Vue.version?.startsWith('3') || Vue.createApp));
 }
-// 初始化Vue导入
-detectVueSync();
-// 注意：不在模块顶层调用异步函数，避免模块变成异步的
-// if (!Vue) {
-//   detectAndImportVue();
-// }
 /**
  * Vue模板点位管理类
  * 用于在地图上添加和管理Vue组件覆盖物
@@ -77,7 +39,12 @@ 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)) {
@@ -96,7 +63,7 @@ export default class VueTemplatePoint {
                     positioning: options?.positioning,
                     stopEvent: options?.stopEvent,
                 };
-                const instance = new VueTemplatePointInstanceImpl(this.map, pointOptions, this.errorHandler);
+                const instance = new VueTemplatePointInstanceImpl(this.map, pointOptions, this.errorHandler, Vue, vueIsVue3);
                 instances.push(instance);
                 this.vuePoints.set(instance.id, instance);
             });
@@ -156,11 +123,13 @@ export default class VueTemplatePoint {
  * @internal
  */
 class VueTemplatePointInstanceImpl {
-    constructor(map, options, errorHandler) {
+    constructor(map, options, errorHandler, Vue, isVue3) {
         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];
@@ -169,31 +138,18 @@ class VueTemplatePointInstanceImpl {
             this.validateConstructorParams(map, options);
             // 创建DOM元素
             this.dom = this.createDomElement();
+            // 创建Vue应用实例
+            this.createVueApp();
             // 创建覆盖层
             this.anchor = this.createOverlay();
             // 添加到地图
             this.map.addOverlay(this.anchor);
-            // 异步创建Vue应用实例
-            this.initializeVueApp();
-        }
-        catch (error) {
-            this.handleError('Failed to create Vue template point', error, { map, options });
-            throw error;
-        }
-    }
-    /**
-     * 异步初始化Vue应用
-     * @private
-     */
-    async initializeVueApp() {
-        try {
-            await this.createVueApp();
             // 设置初始状态
             this.state = VueTemplatePointState.MOUNTED;
             this.setVisible(this.options.visible ?? true);
         }
         catch (error) {
-            this.handleError('Failed to initialize Vue app', error);
+            this.handleError('Failed to create Vue template point', error, { map, options });
             throw error;
         }
     }
@@ -256,24 +212,15 @@ class VueTemplatePointInstanceImpl {
      * 创建Vue应用实例
      * @private
      */
-    async createVueApp() {
+    createVueApp() {
         const { Template, props } = this.options;
-        // 如果Vue不可用，尝试异步导入
-        if (!Vue) {
-            try {
-                await detectAndImportVue();
-            }
-            catch (error) {
-                throw new Error('Vue is not available. Please ensure Vue is installed in your project.');
-            }
-        }
-        if (!Vue) {
-            throw new Error('Vue is not available. Please ensure Vue is installed in your project.');
+        if (!this.Vue) {
+            throw new Error('Vue is not available. Please ensure Vue instance is provided.');
         }
         try {
-            if (isVue3) {
+            if (this.isVue3) {
                 // Vue 3
-                this.app = Vue.createApp({
+                this.app = this.Vue.createApp({
                     ...Template,
                     props: props || {}
                 });
@@ -281,7 +228,7 @@ class VueTemplatePointInstanceImpl {
             }
             else {
                 // Vue 2
-                this.app = new Vue({
+                this.app = new this.Vue({
                     el: this.dom,
                     render: (h) => h(Template, { props: props || {} })
                 });
@@ -373,7 +320,7 @@ class VueTemplatePointInstanceImpl {
      * @param newProps 新的属性对象
      * @throws 当操作失败时抛出错误
      */
-    async updateProps(newProps) {
+    updateProps(newProps) {
         if (this.state === VueTemplatePointState.DESTROYED) {
             throw new Error('Cannot update props on destroyed DOM point');
         }
@@ -381,7 +328,7 @@ class VueTemplatePointInstanceImpl {
             // 重新创建Vue应用实例
             this.destroyVueApp();
             this.options.props = { ...this.options.props, ...newProps };
-            await this.createVueApp();
+            this.createVueApp();
         }
         catch (error) {
             this.handleError('Failed to update props', error, { newProps });
@@ -448,7 +395,7 @@ class VueTemplatePointInstanceImpl {
     destroyVueApp() {
         if (this.app) {
             try {
-                if (isVue3) {
+                if (this.isVue3) {
                     // Vue 3: 使用 unmount
                     this.app.unmount();
                 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "1.0.8",
+  "version": "1.0.9",
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",

package/types.d.ts

@@ -290,7 +290,7 @@ export interface VueTemplatePointInstance {
     options: VueTemplatePointOptions;
     setVisible(visible: boolean): void;
     updatePosition(lgtd: number, lttd: number): void;
-    updateProps(newProps: Record<string, any>): Promise<void>;
+    updateProps(newProps: Record<string, any>): void;
     setStyle(styles: Partial<CSSStyleDeclaration>): void;
     addClass(className: string): void;
     removeClass(className: string): void;