@kimap/indoor-positioning-sdk-vue2

Kimap Indoor Positioning SDK - Vue2 自包含版本

新版本：完全自包含，不依赖原厂 SDK npm 包！

适配 Vue 2.x + Webpack 3.x + Babel 6.x 的室内定位地图SDK组件。

新版本特性

• 完全自包含 - 不需要安装原厂 SDK
• ES5 兼容 - 完美支持 Babel 6
• 开箱即用 - 零配置（Webpack 配置可选）
• 轻量级 - 只需要 Three.js 一个依赖
• 🆕 路径规划增强 (v4.0.4) - 支持识别墙面、矩形、圆形、多边形等障碍物

🆕 v4.0.4 新功能：Layers数据支持

路径规划现在可以识别和绕过更多类型的障碍物！

快速使用

// 1. 设置项目的layers数据
sdk.setProjectLayers(project.floors[currentFloorIndex].layers);

// 2. 路径规划会自动使用layers和kidata
await marker.animateTo({ x: 50, y: 0, z: 50 }, {
  duration: 3000,
  avoidObstacles: true  // 现在会绕过所有障碍物！
});

支持的障碍物类型

• ✅ 墙面 (wall)
• ✅ 矩形 (rectangle)
• ✅ 圆形 (circle)
• ✅ 多边形 (polygon)
• ✅ 3D模型 (furniture)

详细文档

• 快速开始 - 3步快速集成
• 完整指南 - 如何获取layers数据
• 编辑器集成 - 在编辑器中使用
• 更新日志 - 完整的更新说明

安装

简化安装步骤

# 1. 首先安装 Three.js（必需的peer dependency）
npm install three@0.150.1 --save

# 2. 安装SDK
npm install @kimap/indoor-positioning-sdk-vue2@4.1.2 --save

# 国内用户推荐使用 cnpm（更快）
cnpm install three@0.150.1 @kimap/indoor-positioning-sdk-vue2@4.1.2 --save

⚠️ 重要提示 (v4.1.2+):

• Three.js 现在是 peer dependency,必须先安装
• SDK 不再内部打包 Three.js,避免多实例冲突
• 确保 Three.js 版本 >= 0.150.0

不需要安装原厂 SDK 了！ 所有代码已集成。

方法2：本地复制文件

将此 sdk-vue2-wrapper 文件夹复制到您的项目中：

your-project/
├── src/
│   ├── components/
│   │   └── kimap/           # 复制到这里
│   │       ├── KimapComponent.vue
│   │       ├── index.js
│   │       └── package.json

然后安装依赖：

npm install @kimap/indoor-positioning-sdk three@0.150.0 --save

方法3：直接使用原厂SDK

如果您的Webpack配置正确，也可以直接使用原厂SDK：

npm install @kimap/indoor-positioning-sdk three@0.150.0 --save

🚀 使用方法

方式1：使用Vue组件（最简单）

从npm包导入（方法1安装）

<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（复制文件），导入路径为：

import KimapComponent from '@/components/kimap/KimapComponent.vue';

方式2：使用包装函数

从npm包导入

<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script>
var KMCreateMap = require('@kimap/indoor-positioning-sdk-vue2').KMCreateMap;
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;
      
      KMCreateMap({
        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支持动态导入）

<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 中添加：

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 调用：

// 添加标记
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属性

📡 Events事件

⚠️ 常见问题

Q1: 提示找不到模块？

解决方案： 确保已安装依赖

npm install @kimap/indoor-positioning-sdk three@0.150.0 --save

Q2: Webpack编译错误？

解决方案： 在 webpack.base.conf.js 中添加对 @kimap 的babel处理：

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('src'),
    resolve('node_modules/@kimap')
  ]
}

Q3: Three.js版本冲突？

解决方案： 必须升级到0.150.0或更高版本

npm uninstall three
npm install three@0.150.0 --save

Q4: 动态导入不支持？

解决方案： 使用提供的Vue组件，它已经处理了兼容性问题。

Q5: 在IE浏览器报错？

由于SDK使用了现代JavaScript特性，不支持IE浏览器。您的项目配置中已排除IE：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]

建议更新为：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 11"
]

📚 更多文档

• SDK API文档
• 完整示例
• 发布指南

💡 提示

1. 推荐使用方式1（Vue组件），最简单且兼容性最好
2. 必须升级Three.js到0.150.0+
3. 如果遇到编译问题，检查Webpack配置
4. 建议将模型文件放在 static/ 目录下，避免Webpack处理

🆘 技术支持

如有问题，请查看：

• API文档
• GitHub Issues