@kimap/indoor-positioning-sdk-vue2 1.0.0

package/EXAMPLE.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="map-page">
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <h3>地图控制</h3>
+      <button @click="addMarker">添加标记</button>
+      <button @click="removeMarker">移除标记</button>
+      <button @click="updatePosition">更新位置</button>
+      <button @click="showInfo">显示弹窗</button>
+      <button @click="hideInfo">隐藏弹窗</button>
+      <button @click="startDrawLine">绘制线段</button>
+      <button @click="stopDraw">停止绘制</button>
+    </div>
+
+    <!-- 地图容器 -->
+    <kimap-component
+      ref="kimap"
+      :obj-url="modelUrl"
+      :origin="mapOrigin"
+      :max-x="100"
+      :max-y="50"
+      :show-grid="true"
+      :show-axes="true"
+      @ready="onMapReady"
+      @position-click="onPositionClick"
+      @error="onMapError"
+    />
+
+    <!-- 信息显示 -->
+    <div class="info-panel" v-if="clickedPosition">
+      <p>点击位置: X={{ clickedPosition.x }}, Z={{ clickedPosition.z }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+// 导入Vue2兼容组件
+import KimapComponent from './KimapComponent.vue';
+
+// 使用CommonJS导入Three.js（兼容旧版项目）
+var THREE = require('three');
+
+export default {
+  name: 'MapExample',
+  components: {
+    KimapComponent
+  },
+  data: function() {
+    return {
+      modelUrl: '/static/models/building.obj', // 模型文件路径
+      mapOrigin: { x: 0, y: 0, z: 0 },
+      clickedPosition: null,
+      markerCount: 0,
+      isMapReady: false
+    };
+  },
+  methods: {
+    // 地图加载完成
+    onMapReady: function(sdk) {
+      console.log('地图初始化完成', sdk);
+      this.isMapReady = true;
+      this.$message && this.$message.success('地图加载成功');
+    },
+    
+    // 地图加载失败
+    onMapError: function(error) {
+      console.error('地图加载失败:', error);
+      this.$message && this.$message.error('地图加载失败');
+    },
+    
+    // 点击位置回调
+    onPositionClick: function(data) {
+      console.log('点击位置:', data.position);
+      this.clickedPosition = data.position;
+    },
+    
+    // 添加标记
+    addMarker: function() {
+      if (!this.isMapReady) {
+        alert('地图未就绪');
+        return;
+      }
+      
+      this.markerCount++;
+      var id = 'marker-' + this.markerCount;
+      
+      // 随机位置
+      var x = Math.random() * 80 + 10;
+      var z = Math.random() * 40 + 10;
+      
+      this.$refs.kimap.addLocationMarker({
+        id: id,
+        position: new THREE.Vector3(x, 0, z),
+        label: '标记 ' + this.markerCount,
+        color: this.getRandomColor()
+      });
+      
+      console.log('添加标记:', id);
+    },
+    
+    // 移除标记
+    removeMarker: function() {
+      if (this.markerCount > 0) {
+        var id = 'marker-' + this.markerCount;
+        this.$refs.kimap.removeLocationMarker(id);
+        this.markerCount--;
+        console.log('移除标记:', id);
+      }
+    },
+    
+    // 更新当前位置
+    updatePosition: function() {
+      if (!this.isMapReady) {
+        alert('地图未就绪');
+        return;
+      }
+      
+      var x = Math.random() * 80 + 10;
+      var z = Math.random() * 40 + 10;
+      var position = new THREE.Vector3(x, 0, z);
+      
+      this.$refs.kimap.updateCurrentPosition(position);
+      console.log('更新位置:', position);
+    },
+    
+    // 显示弹窗
+    showInfo: function() {
+      if (!this.isMapReady) {
+        alert('地图未就绪');
+        return;
+      }
+      
+      this.$refs.kimap.showPopup({
+        title: '信息提示',
+        content: '这是一个示例弹窗',
+        position: new THREE.Vector3(50, 0, 25)
+      });
+    },
+    
+    // 隐藏弹窗
+    hideInfo: function() {
+      this.$refs.kimap.hidePopup();
+    },
+    
+    // 开始绘制
+    startDrawLine: function() {
+      var self = this;
+      
+      this.$refs.kimap.startDraw('line', {
+        onDrawClick: function(position) {
+          console.log('添加点:', position);
+        },
+        onDrawComplete: function(points) {
+          console.log('绘制完成，共 ' + points.length + ' 个点');
+          alert('线段绘制完成！共 ' + points.length + ' 个点');
+        }
+      });
+    },
+    
+    // 停止绘制
+    stopDraw: function() {
+      this.$refs.kimap.endDraw();
+    },
+    
+    // 获取随机颜色
+    getRandomColor: function() {
+      var colors = ['#4CAF50', '#2196F3', '#FF9800', '#E91E63', '#9C27B0'];
+      return colors[Math.floor(Math.random() * colors.length)];
+    }
+  },
+  
+  // 组件销毁时清理
+  beforeDestroy: function() {
+    console.log('组件即将销毁');
+  }
+};
+</script>
+
+<style scoped>
+.map-page {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  display: flex;
+}
+
+.control-panel {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  z-index: 100;
+}
+
+.control-panel h3 {
+  margin: 0 0 15px 0;
+  font-size: 16px;
+}
+
+.control-panel button {
+  display: block;
+  width: 120px;
+  margin-bottom: 10px;
+  padding: 8px 12px;
+  background: #2196F3;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.control-panel button:hover {
+  background: #1976D2;
+}
+
+.info-panel {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  background: white;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  z-index: 100;
+}
+
+.info-panel p {
+  margin: 0;
+  font-size: 14px;
+}
+</style>

package/KimapComponent.vue

@@ -0,0 +1,149 @@
+<template>
+  <div ref="mapContainer" class="kimap-container"></div>
+</template>
+
+<script>
+// Vue2兼容的Kimap SDK组件
+export default {
+  name: 'KimapComponent',
+  props: {
+    // SDK配置
+    objUrl: {
+      type: String,
+      required: true
+    },
+    origin: {
+      type: Object,
+      default: function() {
+        return { x: 0, y: 0, z: 0 };
+      }
+    },
+    maxX: {
+      type: Number,
+      default: 100
+    },
+    maxY: {
+      type: Number,
+      default: 50
+    },
+    showGrid: {
+      type: Boolean,
+      default: true
+    },
+    showAxes: {
+      type: Boolean,
+      default: true
+    },
+    backgroundColor: {
+      type: Number,
+      default: 0xf0f0f0
+    }
+  },
+  data: function() {
+    return {
+      sdk: null,
+      isReady: false
+    };
+  },
+  mounted: function() {
+    this.initSDK();
+  },
+  beforeDestroy: function() {
+    this.destroySDK();
+  },
+  methods: {
+    initSDK: function() {
+      var self = this;
+      
+      // 动态导入SDK（兼容旧版Webpack）
+      import('@kimap/indoor-positioning-sdk')
+        .then(function(module) {
+          var KimapSDK = module.KimapSDK;
+          
+          self.sdk = new KimapSDK({
+            container: self.$refs.mapContainer,
+            objUrl: self.objUrl,
+            origin: self.origin,
+            maxX: self.maxX,
+            maxY: self.maxY,
+            showGrid: self.showGrid,
+            showAxes: self.showAxes,
+            backgroundColor: self.backgroundColor,
+            onPositionClick: function(position, object) {
+              self.$emit('position-click', { position: position, object: object });
+            }
+          });
+          
+          self.isReady = true;
+          self.$emit('ready', self.sdk);
+        })
+        .catch(function(error) {
+          console.error('Failed to load Kimap SDK:', error);
+          self.$emit('error', error);
+        });
+    },
+    
+    destroySDK: function() {
+      if (this.sdk) {
+        this.sdk.destroy();
+        this.sdk = null;
+      }
+    },
+    
+    // 对外暴露的方法
+    addLocationMarker: function(marker) {
+      if (this.sdk) {
+        this.sdk.addLocationMarker(marker);
+      }
+    },
+    
+    removeLocationMarker: function(id) {
+      if (this.sdk) {
+        this.sdk.removeLocationMarker(id);
+      }
+    },
+    
+    updateCurrentPosition: function(position) {
+      if (this.sdk) {
+        this.sdk.updateCurrentPosition(position);
+      }
+    },
+    
+    showPopup: function(info) {
+      if (this.sdk) {
+        this.sdk.showPopup(info);
+      }
+    },
+    
+    hidePopup: function() {
+      if (this.sdk) {
+        this.sdk.hidePopup();
+      }
+    },
+    
+    startDraw: function(mode, callbacks) {
+      if (this.sdk) {
+        this.sdk.startDraw(mode, callbacks);
+      }
+    },
+    
+    endDraw: function() {
+      if (this.sdk) {
+        this.sdk.endDraw();
+      }
+    },
+    
+    getSDK: function() {
+      return this.sdk;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.kimap-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 zyl19950114
+
+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 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/QUICK_REFERENCE.md

@@ -0,0 +1,351 @@
+# Kimap SDK Vue2 快速参考
+
+## 🚀 快速开始
+
+### 1. 安装依赖
+
+```bash
+npm install three@0.150.0 @kimap/indoor-positioning-sdk --save
+```
+
+### 2. 使用组件
+
+```vue
+<template>
+  <kimap-component
+    ref="kimap"
+    :obj-url="'/static/models/building.obj'"
+    :max-x="100"
+    :max-y="50"
+    @ready="onReady"
+  />
+</template>
+
+<script>
+import KimapComponent from '@/components/kimap/KimapComponent.vue';
+var THREE = require('three');
+
+export default {
+  components: { KimapComponent },
+  methods: {
+    onReady: function(sdk) {
+      this.$refs.kimap.addLocationMarker({
+        id: 'marker-1',
+        position: new THREE.Vector3(10, 0, 15),
+        label: '位置1'
+      });
+    }
+  }
+};
+</script>
+```
+
+## 📋 Props 属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| objUrl | String | - | 模型文件路径（必填） |
+| origin | Object | {x:0,y:0,z:0} | 原点坐标 |
+| maxX | Number | 100 | X轴最大值 |
+| maxY | Number | 50 | Y轴最大值 |
+| showGrid | Boolean | true | 显示网格 |
+| showAxes | Boolean | true | 显示坐标轴 |
+| backgroundColor | Number | 0xf0f0f0 | 背景颜色 |
+
+## 📡 Events 事件
+
+```vue
+<kimap-component
+  @ready="onReady"
+  @error="onError"
+  @position-click="onClick"
+/>
+```
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| ready | sdk | 地图就绪 |
+| error | error | 加载失败 |
+| position-click | {position, object} | 点击位置 |
+
+## 🎯 常用方法
+
+### 添加标记
+
+```javascript
+var THREE = require('three');
+
+this.$refs.kimap.addLocationMarker({
+  id: 'marker-1',
+  position: new THREE.Vector3(10, 0, 15),
+  label: '会议室',
+  color: '#4CAF50'
+});
+```
+
+### 移除标记
+
+```javascript
+this.$refs.kimap.removeLocationMarker('marker-1');
+```
+
+### 更新当前位置
+
+```javascript
+var position = new THREE.Vector3(20, 0, 30);
+this.$refs.kimap.updateCurrentPosition(position);
+```
+
+### 显示弹窗
+
+```javascript
+this.$refs.kimap.showPopup({
+  title: '标题',
+  content: '内容',
+  position: new THREE.Vector3(15, 0, 20)
+});
+```
+
+### 隐藏弹窗
+
+```javascript
+this.$refs.kimap.hidePopup();
+```
+
+### 绘制线段
+
+```javascript
+this.$refs.kimap.startDraw('line', {
+  onDrawClick: function(pos) {
+    console.log('点击:', pos);
+  },
+  onDrawComplete: function(points) {
+    console.log('完成，共' + points.length + '个点');
+  }
+});
+```
+
+### 绘制多边形
+
+```javascript
+this.$refs.kimap.startDraw('polygon', {
+  onDrawComplete: function(points) {
+    console.log('多边形完成');
+  }
+});
+
+// 双击或调用完成
+this.$refs.kimap.completePolygon();
+```
+
+### 停止绘制
+
+```javascript
+this.$refs.kimap.endDraw();
+```
+
+### 获取原始SDK
+
+```javascript
+var sdk = this.$refs.kimap.getSDK();
+// 使用原始SDK的所有方法
+```
+
+## 🎨 样式定制
+
+### 修改容器大小
+
+```vue
+<template>
+  <div class="map-wrapper">
+    <kimap-component ref="kimap" />
+  </div>
+</template>
+
+<style scoped>
+.map-wrapper {
+  width: 100%;
+  height: 600px;
+}
+</style>
+```
+
+### 修改背景颜色
+
+```vue
+<kimap-component
+  :background-color="0x333333"
+/>
+```
+
+## 🔧 坐标转换
+
+### 使用坐标系统
+
+```javascript
+// 在methods中
+initCoordSystem: function() {
+  var createCoordSystem = require('@/components/kimap').createCoordSystem;
+  
+  createCoordSystem().then(function(coordSystem) {
+    coordSystem.init(
+      {
+        basePoint: { lat: 39.9042, lng: 116.4074 },
+        xAxisPoint: { lat: 39.9043, lng: 116.4075 },
+        yAxisPoint: { lat: 39.9044, lng: 116.4074 }
+      },
+      {
+        origin: { x: 0, y: 0 },
+        xAxis: { x: 100, y: 0 },
+        yAxis: { x: 0, y: 100 }
+      }
+    );
+    
+    // GPS转SDK坐标
+    var sdkCoord = coordSystem.gpsToSDK({
+      lat: 39.9042,
+      lng: 116.4075
+    }, 0);
+    
+    console.log('SDK坐标:', sdkCoord);
+  });
+}
+```
+
+## 💡 实用技巧
+
+### 1. 在created中加载数据
+
+```javascript
+export default {
+  data: function() {
+    return {
+      markers: [],
+      isMapReady: false
+    };
+  },
+  created: function() {
+    // 预加载标记数据
+    this.loadMarkers();
+  },
+  methods: {
+    loadMarkers: function() {
+      var self = this;
+      this.$http.get('/api/markers').then(function(res) {
+        self.markers = res.data;
+        // 如果地图已就绪，立即添加
+        if (self.isMapReady) {
+          self.addAllMarkers();
+        }
+      });
+    },
+    
+    onMapReady: function() {
+      this.isMapReady = true;
+      // 地图就绪后添加标记
+      this.addAllMarkers();
+    },
+    
+    addAllMarkers: function() {
+      var THREE = require('three');
+      var self = this;
+      
+      this.markers.forEach(function(m) {
+        self.$refs.kimap.addLocationMarker({
+          id: m.id,
+          position: new THREE.Vector3(m.x, 0, m.z),
+          label: m.label
+        });
+      });
+    }
+  }
+};
+```
+
+### 2. 监听位置变化
+
+```javascript
+export default {
+  data: function() {
+    return {
+      currentPos: null
+    };
+  },
+  watch: {
+    currentPos: function(newPos) {
+      if (newPos && this.$refs.kimap) {
+        var THREE = require('three');
+        var pos = new THREE.Vector3(newPos.x, 0, newPos.z);
+        this.$refs.kimap.updateCurrentPosition(pos);
+      }
+    }
+  }
+};
+```
+
+### 3. 清理资源
+
+```javascript
+export default {
+  beforeDestroy: function() {
+    // Vue组件会自动清理，无需手动调用destroy
+    console.log('地图组件销毁');
+  }
+};
+```
+
+## ⚠️ 注意事项
+
+1. **必须升级Three.js到0.150.0+**
+2. 模型文件放在 `static/` 目录，不要放在 `assets/`
+3. 使用 `$refs` 调用方法时，确保地图已就绪（在 `@ready` 之后）
+4. Three.js的Vector3等类使用 `require('three')` 导入
+5. 组件销毁时会自动清理资源
+
+## 🐛 常见错误
+
+### 错误1: "Cannot read property 'addLocationMarker' of undefined"
+
+**原因：** 地图未就绪时调用方法
+
+**解决：**
+```javascript
+// 错误
+mounted: function() {
+  this.$refs.kimap.addLocationMarker(...); // 地图可能还未初始化
+}
+
+// 正确
+methods: {
+  onMapReady: function() {
+    this.$refs.kimap.addLocationMarker(...); // 在ready事件中调用
+  }
+}
+```
+
+### 错误2: "Module not found: Can't resolve 'three'"
+
+**原因：** 未安装Three.js
+
+**解决：**
+```bash
+npm install three@0.150.0 --save
+```
+
+### 错误3: 模型不显示
+
+**排查：**
+1. 检查 `objUrl` 路径是否正确
+2. 打开Network面板查看模型是否加载
+3. 检查控制台错误
+
+## 📚 更多示例
+
+查看完整示例：
+- [EXAMPLE.vue](./EXAMPLE.vue) - 包含所有功能的完整示例
+- [INSTALL_GUIDE.md](./INSTALL_GUIDE.md) - 详细集成步骤
+- [README.md](./README.md) - 完整文档
+
+---
+
+**快速参考卡片 v1.0.0**

package/README.md

@@ -0,0 +1,448 @@
+# Kimap SDK Vue2 兼容包装器
+
+[![npm version](https://img.shields.io/npm/v/@kimap/indoor-positioning-sdk-vue2.svg)](https://www.npmjs.com/package/@kimap/indoor-positioning-sdk-vue2)
+[![license](https://img.shields.io/npm/l/@kimap/indoor-positioning-sdk-vue2.svg)](https://github.com/kimap/indoor-positioning-sdk/blob/main/LICENSE)
+
+为旧版Vue2项目提供的Kimap SDK兼容层，支持Webpack 3和Babel 6。
+
+## ⚠️ 重要：升级Three.js版本
+
+SDK要求 `three >= 0.150.0`。如果您的项目使用旧版本（如0.125.2），必须先升级。
+
+**升级Three.js：**
+
+```bash
+npm install three@0.150.0 --save
+```
+
+## 📦 安装
+
+### 方法1：从npm安装（推荐⭐）
+
+```bash
+# 安装Vue2包装器（会自动安装原厂SDK）
+npm install @kimap/indoor-positioning-sdk-vue2 --save
+
+# 同时安装Three.js（必需）
+npm install three@0.150.0 --save
+```
+
+**一行命令安装全部：**
+
+```bash
+npm install @kimap/indoor-positioning-sdk-vue2 three@0.150.0 --save
+```
+
+### 方法2：本地复制文件
+
+将此 `sdk-vue2-wrapper` 文件夹复制到您的项目中：
+
+```
+your-project/
+├── src/
+│   ├── components/
+│   │   └── kimap/           # 复制到这里
+│   │       ├── KimapComponent.vue
+│   │       ├── index.js
+│   │       └── package.json
+```
+
+然后安装依赖：
+
+```bash
+npm install @kimap/indoor-positioning-sdk three@0.150.0 --save
+```
+
+### 方法3：直接使用原厂SDK
+
+如果您的Webpack配置正确，也可以直接使用原厂SDK：
+
+```bash
+npm install @kimap/indoor-positioning-sdk three@0.150.0 --save
+```
+
+## 🚀 使用方法
+
+### 方式1：使用Vue组件（最简单）
+
+#### 从npm包导入（方法1安装）
+
+```vue
+<template>
+  <div class="map-page">
+    <kimap-component
+      ref="kimap"
+      :obj-url="modelUrl"
+      :origin="{ x: 0, y: 0, z: 0 }"
+      :max-x="100"
+      :max-y="50"
+      :show-grid="true"
+      @ready="onMapReady"
+      @position-click="onPositionClick"
+    />
+  </div>
+</template>
+
+<script>
+// 从npm包导入
+import KimapComponent from '@kimap/indoor-positioning-sdk-vue2/KimapComponent.vue';
+
+export default {
+  name: 'MapPage',
+  components: {
+    KimapComponent
+  },
+  data: function() {
+    return {
+      modelUrl: '/static/models/building.obj'
+    };
+  },
+  methods: {
+    onMapReady: function(sdk) {
+      console.log('地图加载完成', sdk);
+      this.addMarkers();
+    },
+    
+    onPositionClick: function(data) {
+      console.log('点击位置:', data.position);
+    },
+    
+    addMarkers: function() {
+      var THREE = require('three');
+      
+      // 通过ref调用组件方法
+      this.$refs.kimap.addLocationMarker({
+        id: 'marker-1',
+        position: new THREE.Vector3(10, 0, 15),
+        label: '会议室A',
+        color: '#4CAF50'
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.map-page {
+  width: 100%;
+  height: 100vh;
+}
+</style>
+```
+
+#### 从本地文件导入（方法2安装）
+
+如果使用方法2（复制文件），导入路径为：
+
+```javascript
+import KimapComponent from '@/components/kimap/KimapComponent.vue';
+```
+
+### 方式2：使用包装函数
+
+#### 从npm包导入
+
+```vue
+<template>
+  <div ref="mapContainer" class="map-container"></div>
+</template>
+
+<script>
+var createKimapSDK = require('@kimap/indoor-positioning-sdk-vue2').createKimapSDK;
+var THREE = require('three');
+
+export default {
+  name: 'MapPage',
+  data: function() {
+    return {
+      sdk: null
+    };
+  },
+  mounted: function() {
+    this.initMap();
+  },
+  beforeDestroy: function() {
+    if (this.sdk) {
+      this.sdk.destroy();
+    }
+  },
+  methods: {
+    initMap: function() {
+      var self = this;
+      
+      createKimapSDK({
+        container: this.$refs.mapContainer,
+        objUrl: '/static/models/building.obj',
+        origin: { x: 0, y: 0, z: 0 },
+        maxX: 100,
+        maxY: 50,
+        onPositionClick: function(position) {
+          self.handleClick(position);
+        }
+      }).then(function(sdk) {
+        self.sdk = sdk;
+        self.addMarkers();
+      }).catch(function(error) {
+        console.error('初始化失败:', error);
+      });
+    },
+    
+    addMarkers: function() {
+      this.sdk.addLocationMarker({
+        id: 'marker-1',
+        position: new THREE.Vector3(10, 0, 15),
+        label: '会议室'
+      });
+    },
+    
+    handleClick: function(position) {
+      console.log('点击位置:', position);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.map-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
+```
+
+### 方式3：直接使用SDK（需要Webpack支持动态导入）
+
+```vue
+<template>
+  <div ref="mapContainer" class="map-container"></div>
+</template>
+
+<script>
+export default {
+  name: 'MapPage',
+  data: function() {
+    return {
+      sdk: null
+    };
+  },
+  mounted: function() {
+    this.initMap();
+  },
+  beforeDestroy: function() {
+    if (this.sdk) {
+      this.sdk.destroy();
+    }
+  },
+  methods: {
+    initMap: function() {
+      var self = this;
+      
+      // 动态导入（Webpack 3支持，但需要babel-plugin-syntax-dynamic-import）
+      Promise.all([
+        import('@kimap/indoor-positioning-sdk'),
+        import('three')
+      ]).then(function(modules) {
+        var KimapSDK = modules[0].KimapSDK;
+        var THREE = modules[1];
+        
+        self.sdk = new KimapSDK({
+          container: self.$refs.mapContainer,
+          objUrl: '/static/models/building.obj',
+          origin: { x: 0, y: 0, z: 0 },
+          maxX: 100,
+          maxY: 50
+        });
+        
+        self.sdk.addLocationMarker({
+          id: 'marker-1',
+          position: new THREE.Vector3(10, 0, 15),
+          label: '会议室'
+        });
+      }).catch(function(error) {
+        console.error('加载失败:', error);
+      });
+    }
+  }
+};
+</script>
+```
+
+## 🔧 Webpack配置（如果需要）
+
+如果动态导入不工作，需要在 `build/webpack.base.conf.js` 中添加：
+
+```js
+module.exports = {
+  // ...其他配置
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src')
+    }
+  },
+  module: {
+    rules: [
+      // 确保处理node_modules中的ES6模块
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [
+          resolve('src'),
+          resolve('test'),
+          resolve('node_modules/@kimap') // 添加这行
+        ]
+      }
+    ]
+  }
+};
+```
+
+## 📋 完整示例项目结构
+
+```
+your-project/
+├── src/
+│   ├── components/
+│   │   └── kimap/
+│   │       ├── KimapComponent.vue
+│   │       ├── index.js
+│   │       └── package.json
+│   ├── views/
+│   │   └── MapView.vue
+│   └── main.js
+├── static/
+│   └── models/
+│       └── building.obj
+└── package.json
+```
+
+## ⚡ API方法
+
+所有方法与SDK保持一致，通过 `$refs` 调用：
+
+```js
+// 添加标记
+this.$refs.kimap.addLocationMarker(marker);
+
+// 移除标记
+this.$refs.kimap.removeLocationMarker('marker-id');
+
+// 更新当前位置
+this.$refs.kimap.updateCurrentPosition(position);
+
+// 显示弹窗
+this.$refs.kimap.showPopup(info);
+
+// 隐藏弹窗
+this.$refs.kimap.hidePopup();
+
+// 开始绘制
+this.$refs.kimap.startDraw('line', {
+  onDrawComplete: function(points) {
+    console.log('绘制完成', points);
+  }
+});
+
+// 获取原始SDK实例
+var sdk = this.$refs.kimap.getSDK();
+```
+
+## 🎯 Props属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| objUrl | String | - | OBJ模型文件路径（必填） |
+| origin | Object | `{x:0, y:0, z:0}` | 原点坐标 |
+| maxX | Number | 100 | X轴最大值 |
+| maxY | Number | 50 | Y轴最大值 |
+| showGrid | Boolean | true | 显示网格 |
+| showAxes | Boolean | true | 显示坐标轴 |
+| backgroundColor | Number | 0xf0f0f0 | 背景颜色 |
+
+## 📡 Events事件
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| ready | sdk | SDK初始化完成 |
+| error | error | 初始化失败 |
+| position-click | {position, object} | 点击位置 |
+
+## ⚠️ 常见问题
+
+### Q1: 提示找不到模块？
+
+**解决方案：** 确保已安装依赖
+
+```bash
+npm install @kimap/indoor-positioning-sdk three@0.150.0 --save
+```
+
+### Q2: Webpack编译错误？
+
+**解决方案：** 在 `webpack.base.conf.js` 中添加对 `@kimap` 的babel处理：
+
+```js
+{
+  test: /\.js$/,
+  loader: 'babel-loader',
+  include: [
+    resolve('src'),
+    resolve('node_modules/@kimap')
+  ]
+}
+```
+
+### Q3: Three.js版本冲突？
+
+**解决方案：** 必须升级到0.150.0或更高版本
+
+```bash
+npm uninstall three
+npm install three@0.150.0 --save
+```
+
+### Q4: 动态导入不支持？
+
+**解决方案：** 使用提供的Vue组件，它已经处理了兼容性问题。
+
+### Q5: 在IE浏览器报错？
+
+由于SDK使用了现代JavaScript特性，不支持IE浏览器。您的项目配置中已排除IE：
+
+```json
+"browserslist": [
+  "> 1%",
+  "last 2 versions",
+  "not ie <= 8"
+]
+```
+
+建议更新为：
+
+```json
+"browserslist": [
+  "> 1%",
+  "last 2 versions",
+  "not ie <= 11"
+]
+```
+
+## 📚 更多文档
+
+- [SDK API文档](../docs-site/API_REFERENCE.md)
+- [完整示例](../USAGE_EXAMPLE.md)
+- [发布指南](../sdk/PUBLISH_GUIDE.md)
+
+## 💡 提示
+
+1. **推荐使用方式1（Vue组件）**，最简单且兼容性最好
+2. **必须升级Three.js到0.150.0+**
+3. 如果遇到编译问题，检查Webpack配置
+4. 建议将模型文件放在 `static/` 目录下，避免Webpack处理
+
+## 🆘 技术支持
+
+如有问题，请查看：
+- [API文档](../docs-site/API_REFERENCE.md)
+- [GitHub Issues](https://github.com/kimap/sdk/issues)

package/index.js

@@ -0,0 +1,33 @@
+/**
+ * Vue2兼容的Kimap SDK包装器
+ * 使用CommonJS格式，兼容旧版Webpack
+ */
+
+// 导出Vue组件
+var KimapComponent = require('./KimapComponent.vue').default || require('./KimapComponent.vue');
+
+// 创建简化的包装函数
+function createKimapSDK(config) {
+  // 返回Promise以支持动态导入
+  return import('@kimap/indoor-positioning-sdk').then(function(module) {
+    var KimapSDK = module.KimapSDK;
+    return new KimapSDK(config);
+  });
+}
+
+// 导出坐标系统类的包装
+function createCoordSystem() {
+  return import('@kimap/indoor-positioning-sdk').then(function(module) {
+    var BuildingCoordSystem = module.BuildingCoordSystem;
+    return new BuildingCoordSystem();
+  });
+}
+
+module.exports = {
+  KimapComponent: KimapComponent,
+  createKimapSDK: createKimapSDK,
+  createCoordSystem: createCoordSystem
+};
+
+// 兼容ES6导出
+module.exports.default = module.exports;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@kimap/indoor-positioning-sdk-vue2",
+  "version": "1.0.0",
+  "description": "Vue2兼容的Kimap室内定位SDK包装器 - Vue2 Compatible Wrapper for Kimap Indoor Positioning SDK",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "KimapComponent.vue",
+    "README.md",
+    "QUICK_REFERENCE.md",
+    "EXAMPLE.vue"
+  ],
+  "scripts": {
+    "prepublishOnly": "echo 'Ready to publish'"
+  },
+  "keywords": [
+    "kimap",
+    "indoor-positioning",
+    "3d-map",
+    "vue2",
+    "threejs",
+    "wrapper",
+    "compatibility",
+    "vue",
+    "building-map",
+    "location",
+    "gps"
+  ],
+  "author": "zyl19950114",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kimap/indoor-positioning-sdk"
+  },
+  "bugs": {
+    "url": "https://github.com/kimap/indoor-positioning-sdk/issues"
+  },
+  "homepage": "https://github.com/kimap/indoor-positioning-sdk#readme",
+  "peerDependencies": {
+    "vue": "^2.6.0",
+    "three": ">=0.150.0"
+  },
+  "dependencies": {
+    "@kimap/indoor-positioning-sdk": "^1.0.0"
+  },
+  "engines": {
+    "node": ">=6.0.0",
+    "npm": ">=3.0.0"
+  }
+}