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]

• 合入高德底图

  • 是将高德地图提供的静态地图瓦片图片, 加载到 ooomap 地图中, 可以理解为只是用到了高德的静态瓦片图源. API使用的完全是 ooomap SDK, 不包括高德地图API. 主要用于纯ooomap地图场景填补周边的空白

  • [合入高德底图示例]

  • [在编辑器中使用高德底图视频教程]

创建地图容器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)

})