@kimap/indoor-positioning-sdk-vue2 3.7.4 → 3.8.1

package/EXAMPLE.vue

@@ -1,234 +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兼容组件
-var KimapComponent = require('./KimapComponent.vue').default || require('./KimapComponent.vue');
-
-// 使用CommonJS导入Three.js（兼容旧版项目）
-var THREE = require('three');
-
-module.exports = {
-  name: 'KimapExample',
-  components: {
-    KimapComponent: 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>
+<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兼容组件
+var KimapComponent = require('./KimapComponent.vue').default || require('./KimapComponent.vue');
+
+// 使用CommonJS导入Three.js（兼容旧版项目）
+var THREE = require('three');
+
+module.exports = {
+  name: 'KimapExample',
+  components: {
+    KimapComponent: 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>