@kimap/indoor-positioning-sdk-vue2 3.4.2 → 3.4.4

package/index.js

@@ -31,6 +31,9 @@ function KMCreateMap(config) {
 var utils = require('./src/utils/index.js');
 var modules = require('./src/modules/index.js');
 
+// 导出 DOM 标记类
+var KMDOMMarker = require('./src/KMDOMMarker.js');
+
 module.exports = {
   // Vue组件
   KimapComponent: KimapComponent,
@@ -41,6 +44,9 @@ module.exports = {
   // 直接导出SDK类（高级用法）
   KimapSDK: KimapSDK,
   
+  // DOM 标记类（面向对象风格）
+  KMDOMMarker: KMDOMMarker,
+  
   // 工具类
   BuildingCoordSystem: utils.BuildingCoordSystem,
   CoordTransformer: utils.CoordTransformer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kimap/indoor-positioning-sdk-vue2",
-  "version": "3.4.2",
+  "version": "3.4.4",
   "description": "Vue2自包含室内定位SDK - 完全兼容Webpack3+Babel6 | Vue2 Self-Contained Indoor Positioning SDK",
   "main": "index.js",
   "files": [

package/src/KMDOMMarker.js

@@ -0,0 +1,240 @@
+/**
+ * KMDOMMarker - 面向对象风格的 DOM 标记类
+ * 兼容 Vue2 + Webpack3 + Babel6
+ * 
+ * 用法:
+ *   var marker = new KMDOMMarker({
+ *     id: 'marker-1',
+ *     position: { x: 10, y: 0, z: 5 },
+ *     domElement: document.createElement('div'),
+ *     offset: { x: 0, y: -20 }
+ *   }).addTo(sdk);
+ *   
+ *   // 平滑移动
+ *   marker.animateTo({ x: 20, y: 0, z: 10 }, 1000);
+ *   
+ *   // 移除
+ *   marker.remove();
+ */
+
+function KMDOMMarker(config) {
+  if (!config) {
+    throw new Error('KMDOMMarker: config is required');
+  }
+  
+  this.id = config.id || 'km-marker-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+  this.domElement = config.domElement;
+  this.offset = config.offset || { x: 0, y: 0 };
+  this.sdk = null;
+  this._animationId = null;
+  
+  // 存储位置（支持 THREE.Vector3 或普通对象）
+  var pos = config.position || { x: 0, y: 0, z: 0 };
+  this.position = {
+    x: pos.x || 0,
+    y: pos.y || 0,
+    z: pos.z || 0
+  };
+}
+
+/**
+ * 添加到 SDK
+ * @param {KimapSDK} sdk - SDK 实例
+ * @returns {KMDOMMarker} this
+ */
+KMDOMMarker.prototype.addTo = function(sdk) {
+  if (!sdk) {
+    throw new Error('KMDOMMarker.addTo: sdk is required');
+  }
+  
+  this.sdk = sdk;
+  
+  // 调用 SDK 的 addCustomDOM 方法
+  sdk.addCustomDOM({
+    id: this.id,
+    position: this.position,
+    domElement: this.domElement,
+    offset: this.offset
+  });
+  
+  return this;
+};
+
+/**
+ * 从 SDK 移除
+ * @returns {KMDOMMarker} this
+ */
+KMDOMMarker.prototype.remove = function() {
+  // 取消正在进行的动画
+  if (this._animationId) {
+    cancelAnimationFrame(this._animationId);
+    this._animationId = null;
+  }
+  
+  if (this.sdk) {
+    this.sdk.removeCustomDOM(this.id);
+    this.sdk = null;
+  }
+  
+  return this;
+};
+
+/**
+ * 设置位置（立即更新）
+ * @param {Object} position - { x, y, z }
+ * @returns {KMDOMMarker} this
+ */
+KMDOMMarker.prototype.setPosition = function(position) {
+  if (!position) return this;
+  
+  this.position.x = position.x !== undefined ? position.x : this.position.x;
+  this.position.y = position.y !== undefined ? position.y : this.position.y;
+  this.position.z = position.z !== undefined ? position.z : this.position.z;
+  
+  // 更新 SDK 中的位置
+  if (this.sdk && this.sdk.customDOMs && this.sdk.customDOMs[this.id]) {
+    var domData = this.sdk.customDOMs[this.id];
+    domData.position.x = this.position.x;
+    domData.position.y = this.position.y;
+    domData.position.z = this.position.z;
+    this.sdk.updateDOMPosition(this.id);
+  }
+  
+  return this;
+};
+
+/**
+ * 平滑移动到目标位置
+ * @param {Object} targetPosition - { x, y, z }
+ * @param {number} duration - 动画时长（毫秒），默认 1000
+ * @returns {Promise} 动画完成后 resolve
+ */
+KMDOMMarker.prototype.animateTo = function(targetPosition, duration) {
+  var self = this;
+  duration = duration || 1000;
+  
+  return new Promise(function(resolve) {
+    // 取消之前的动画
+    if (self._animationId) {
+      cancelAnimationFrame(self._animationId);
+      self._animationId = null;
+    }
+    
+    var startPosition = {
+      x: self.position.x,
+      y: self.position.y,
+      z: self.position.z
+    };
+    
+    var targetPos = {
+      x: targetPosition.x !== undefined ? targetPosition.x : startPosition.x,
+      y: targetPosition.y !== undefined ? targetPosition.y : startPosition.y,
+      z: targetPosition.z !== undefined ? targetPosition.z : startPosition.z
+    };
+    
+    var startTime = null;
+    
+    function animate(currentTime) {
+      if (!startTime) startTime = currentTime;
+      
+      var elapsed = currentTime - startTime;
+      var progress = Math.min(elapsed / duration, 1);
+      
+      // 使用 easeInOutQuad 缓动函数
+      var eased = progress < 0.5
+        ? 2 * progress * progress
+        : 1 - Math.pow(-2 * progress + 2, 2) / 2;
+      
+      // 计算当前位置
+      var currentPos = {
+        x: startPosition.x + (targetPos.x - startPosition.x) * eased,
+        y: startPosition.y + (targetPos.y - startPosition.y) * eased,
+        z: startPosition.z + (targetPos.z - startPosition.z) * eased
+      };
+      
+      // 更新位置
+      self.setPosition(currentPos);
+      
+      if (progress < 1) {
+        self._animationId = requestAnimationFrame(animate);
+      } else {
+        self._animationId = null;
+        resolve();
+      }
+    }
+    
+    self._animationId = requestAnimationFrame(animate);
+  });
+};
+
+/**
+ * 设置偏移量
+ * @param {Object} offset - { x, y }
+ * @returns {KMDOMMarker} this
+ */
+KMDOMMarker.prototype.setOffset = function(offset) {
+  if (!offset) return this;
+  
+  this.offset.x = offset.x !== undefined ? offset.x : this.offset.x;
+  this.offset.y = offset.y !== undefined ? offset.y : this.offset.y;
+  
+  // 更新 SDK 中的偏移量
+  if (this.sdk && this.sdk.customDOMs && this.sdk.customDOMs[this.id]) {
+    this.sdk.customDOMs[this.id].offset = this.offset;
+    this.sdk.updateDOMPosition(this.id);
+  }
+  
+  return this;
+};
+
+/**
+ * 显示标记
+ * @returns {KMDOMMarker} this
+ */
+KMDOMMarker.prototype.show = function() {
+  if (this.domElement) {
+    this.domElement.style.display = '';
+  }
+  return this;
+};
+
+/**
+ * 隐藏标记
+ * @returns {KMDOMMarker} this
+ */
+KMDOMMarker.prototype.hide = function() {
+  if (this.domElement) {
+    this.domElement.style.display = 'none';
+  }
+  return this;
+};
+
+/**
+ * 获取当前位置
+ * @returns {Object} { x, y, z }
+ */
+KMDOMMarker.prototype.getPosition = function() {
+  return {
+    x: this.position.x,
+    y: this.position.y,
+    z: this.position.z
+  };
+};
+
+/**
+ * 获取 DOM 元素
+ * @returns {HTMLElement}
+ */
+KMDOMMarker.prototype.getDOMElement = function() {
+  return this.domElement;
+};
+
+/**
+ * 检查是否已添加到 SDK
+ * @returns {boolean}
+ */
+KMDOMMarker.prototype.isAdded = function() {
+  return this.sdk !== null;
+};
+
+module.exports = KMDOMMarker;

package/src/KimapCore.browser.js

@@ -691,13 +691,12 @@
     };
 
     // 定位策略：
-    // 1. XZ平面：将模型中心对齐到origin的XZ位置
-    // 2. Y方向：将模型底部（box.min.y）对齐到origin.y（通常是地面）
+    // 将模型左上角（min.x, min.z）对齐到原点，使(0,0)在左上角
     var origin = this.coordinateSystem.origin;
     this.mapModel.position.set(
-      origin.x - center.x,           // X方向居中
+      origin.x - box.min.x,          // X方向：左边界对齐
       origin.y - box.min.y,          // Y方向：底部对齐地面
-      origin.z - center.z            // Z方向居中
+      origin.z - box.min.z           // Z方向：上边界对齐
     );
     
     console.log('📦 模型包围盒:');

package/src/KimapCore.js

@@ -555,13 +555,14 @@ SceneCore.prototype.loadMap = function(OBJLoader, MTLLoader) {
             box.getCenter(center);
             
             var origin = self.coordinateSystem.origin;
+            // 将模型左上角（min.x, min.z）对齐到原点，而不是居中
             self.mapModel.position.set(
-              origin.x - center.x,      // X方向居中
+              origin.x - box.min.x,     // X方向：左边界对齐
               origin.y - box.min.y,     // Y方向：底部对齐地面
-              origin.z - center.z       // Z方向居中
+              origin.z - box.min.z      // Z方向：上边界对齐
             );
             
-            console.log('✅ 模型已居中对齐到原点');
+            console.log('✅ 模型左上角已对齐到原点');
             
             // 统计模型信息
             var meshCount = 0;
@@ -735,10 +736,11 @@ SceneCore.prototype.loadMap = function(OBJLoader, MTLLoader) {
           box.getCenter(center);
           
           var origin = self.coordinateSystem.origin;
+          // 将模型左上角（min.x, min.z）对齐到原点，而不是居中
           self.mapModel.position.set(
-            origin.x - center.x,      // X方向居中
+            origin.x - box.min.x,     // X方向：左边界对齐
             origin.y - box.min.y,     // Y方向：底部对齐地面
-            origin.z - center.z       // Z方向居中
+            origin.z - box.min.z      // Z方向：上边界对齐
           );
           
           console.log('✅ 模型已居中对齐到原点');