1.0.78 • Published 10 months ago
ooomap-combine-amap v1.0.78
ooomap 嵌入 高德3D地图插件
将 ooomap 地图
合并到 高德地图
中
安装
npm install ooomap-combine-amap --save
引入
使用模块引入
import { createOAMap } from "ooomap-combine-amap"
createOAMap( ... )
也可以直接使用 <script>
标签引入, 此时调用要放到加载 ooomap SDK
之后, 使用om
命名空间调用
om.createOAMap( ... )
"嵌入高德地图" 与 "合入高德底图" 的区别
嵌入高德地图 * 是将 ooomap 地图, 嵌入到高德地图中,使用的是高德地图的JsAPI, 您可以使用高德地图提供的所有API, 包括定位, 导航等, 视图的控制是在高德地图中, 主要用于 "室外" 部分ooomap地图做为高德地图中的一个图层, 用于细化园区或室内地图部分, 用于室内外一体化的导航项目
* [[高德3D地图API]](https://lbs.amap.com/api/jsapi-v2/guide/map/3d-map)
合入高德底图 * 是将高德地图提供的静态地图瓦片图片, 加载到 ooomap 地图中, 可以理解为只是用到了高德的静态瓦片图源. API使用的完全是 ooomap SDK, 不包括高德地图API. 主要用于纯ooomap地图场景填补周边的空白
* [[合入高德底图示例]](https://www.ooomap.com/main/repl/#baselayer) * [[在编辑器中使用高德底图视频教程]](https://www.ooomap.com/main/omeditor.html?tag=videos&i=0&j=4&n=baseLayer_720)
创建地图容器div
<!-- 地图的容器 -->
<div id="container"></div>
调用创建方法
方法签名
createOAMap( ooomapConfig, amapConfig ).then( { map, amap, gllayer } => {})
示例
createOAMap(
// ooomap 配置
{
container,
verifyUrl: 'https://www.ooomap.com/ooomap-verify/check/13b7e6de01570b42ae2a686c1253756d',
appID: '3c4caa9aeb0a89a1c731308956bee252'
},
// 高德地图 配置
{
zoom: 19,
center: [117.213337,39.090965], // 高德地图中心点经纬度坐标
}
).then(({ map, amap, gllayer }) => {
//
// map: ooomap 地图实例
// amap: 高德地图实例
// gllayer: ooomap所在的高德图层
//
console.log(map, amap, gllayer)
})