地图SDK指南
一、集成地图SDK
在您的应用程序中集成地图SDK，首先需要前往官方网站下载适用于您平台的SDK。然后，按照官方文档的说明，将SDK添加到您的项目中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html, body {height: 100%;margin: 0;}
</style>
<link rel="stylesheet" href="./style.css" />
<link href="./static/css/7.f1af6b46.chunk.css" rel="stylesheet">
<script src="./3x.umd.js"></script>
<script src="./static/js/7.d22372d5.chunk.js"></script>
<script src="./static/js/main.c5db7777.chunk.js"></script>
<div id="domElement">Loading, please wait...</div>
</head>
<body>
</body>
</html>
二、地图基础操作
2.1 初始化地图
<script>
/**
* 创建 map 实例
*/
var map = new ThreeX.Map({
// 地图容器, domElement
el: document.body,
// 在地图编辑器中生成，或由我司提供
verifyUrl: 'https://www.example.com/map-verify/check/',
id: '123'
})
</script>
2.2 大小调整
<script>
var map = new ThreeX.Map({
el: document.body,
verifyUrl: 'https://www.example.com/map-verify/check/',
id: '123'
})
window.addEventListener('resize', () => {
map.view.resize();
})
</script>
2.3 元素拾取
<script>
var map = new ThreeX.Map({
el: document.body,
verifyUrl: 'https://www.example.com/map-verify/check/',
id: '123'
})
// 拾取地图中的对象
map.on('picked', result => {
console.log(result.node);
})
</script>
2.4 本地加载地图
<script>
var map = new om.Map({
container: document.body,
id: '123',
verifyUrl: 'https://www.example.com/',
// 标记为 本地加载
standalone: true,
// 本地文件所在目录(相对于此 html 文件)
// 比如:
// ./standalone/
// verify.om
// ***.scene
// ...
// assets/
// images/
// models/
baseUrl: './standalone/'
})
</script>
2.5 坐标转换
map.on('click', (e) => {
// 获取poi点数据
const polygon = e.object?.userData?.polygonData
if (polygon?.center) {
// 将地图容器像素坐标转换成经纬度
let lngLat = map.coordsToLngLat(polygon.center)
lng.innerHTML = 'lng: ' + lngLat.lng
lat.innerHTML = 'lat: ' + lngLat.lat
// 将经纬度转换成容器坐标
let coords = map.lngLatToCoord(lngLat)
containerX.innerHTML = 'x: ' + coords.x
containerY.innerHTML = 'y: ' + coords.y
}
})
三、地图控件
3.1 楼层控件
<script>
let map = new VgoMap.Map({
el: 'mapContainer',
id: mapId,
})
map.on('loaded', () => {
let floorControl = new VgoMap.FloorControl({
map,
style: 'inset: 80px 20px auto auto;',
floorButtonCount: 5, // 楼层显示按钮数量
showAllFloorButton: true, // 是否显示多层展示按钮
})
})
</script>
3.2 指北针控件
<script>
let map = new VgoMap.Map({
el: 'mapContainer',
id: mapId,
})
map.on('loaded', () => {
let compass = new VgoMap.Compass({
map,
style: 'inset: 20px auto auto 20px;',
})
console.log(compass, 'compass')
})
</script>
3.3 其他控件
缩放控件、视图控件、搜索框、提示框
四、视图控制
4.1 2D/3D转换
var status = status == '3D' ? '2D' : '3D'
// 切换3D/2D
map.setViewMode(status)
4.2 视图缩放
// 获取当前视图zoom
map.view.getZoom()
// 设置当前视图zoom
map.view.setZoom(zoom)
// 设置地图的最小比例尺级别
map.view.minZoomLevel = val;
// 设置地图的最大比例尺级别
map.view.maxZoomLevel = val;
// 同时设置最小与最大比例尺级别
map.view.setZoomLevelRange(17, 21);
4.3 视图角度
// viewAngle 和 polarAngle 的参数是一样的
// {angle: 角度值, duration: 300, callback: }
var data = {
angle: 45,
polar: 60,
randomViewAngle: () => {
// 随机角度
var angle = Math.random() * 360;
var duration = Math.random() * 2000;
map.view.viewAngle = {
angle: angle,
duration: duration,
callback: () => {
console.log('水平角度转动完成！', 'angle: ' + angle + ' duration: ' + duration);
}
}
},
randomPolarAngle: () => {
var angle = Math.random() * 60;
var duration = Math.random() * 2000;
map.view.polarAngle = {
angle: angle,
duration: duration,
callback: () => {
console.log('倾斜角度转动完成！', 'angle: ' + angle + ' duration: ' + duration);
}
}
}
}
4.4 视图移动
// 将视图中心移动到这个元素的位置
// 简单模式: 直接传入位置
// @param {Vector3 | float[]} position Vector3(x, y, z) 或 [x, y, z]
// map.view.moveTo(position);
// 参数模式: 除 veiwCenter 为必填参数外,其它参数都为可选参数
map.view.moveTo({
// 视图中心 *必填项*, Vector3(x, y, z) 或 [x, y, z]
viewCenter: position,
// 动画时长 毫秒
duration: 600 + Math.random() * 1000,
// 视图平面角度
viewAngle: Math.random() * 90 - 60,
// 视图倾斜角度
polarAngle: Math.random() * 20 + 40,
// 比例尺 或 zoomLevel (比例尺级别)
zoom: 300 + Math.random() * 500,
// 缓动曲线方程, 如: backOut, cubicInOut. 默认为 linear
easing: data.easing + 'Out',
// 动画完成后的回调方法
callback: () => {
console.log('moveTo complete');
}
})
4.5 视图状态
// 获取视图状态
map.view.getViewState();
// 设置视图状态
map.view.setViewStatus({
dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true
keyboardEnable: false, //地图是否可通过键盘控制，默认为true
doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
zoomEnable: false, //地图是否可缩放，默认值为true
rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
// 可以设置 2d/3d 模式
viewMode: '3d',
// 比例尺
zoom: 391.23,
// 也可以使用比例尺级别
// 如果两个设置比例尺有更高的优先级
// zoomLevel: 20,
// 视图的水平角度
viewAngle: -2.89,
// 视图的倾斜角度
polarAngle: 53.64,
// 视图的中心位置
viewCenter: [61.47,13.54,-9.09],
}, ()=>{
// 动画完成后调用
console.log(''视图状态设置完成!'')
})
五、POI标注
// marker 数据
var markerData = {
// marker的类型，poi, label, imageLeft, imageRight,
// imageBottom, imageTop, border, borderText, borderHalf
type: 'borderHalf',
position: [0, 0, 40], // 位置, 相对于父级，(场景，建筑，楼层),默认为[0, 0, 0]
anchor: 'bottom', // 轴心位置, 默认为 bottom, 还可以为 leftTop, right, center, imageCenter(图标中心)
autoHide: true, // 在遮挡时,是否自动隐藏
priority: 0, // 显示优化级, 值越大优先级越高
content: {
image: { // 图片，在类型中不需要图片时，会自动忽略，如: label
url: './images/ooomap.png', // 图像的url，或在 ooomap 服务器上的 imageID
width: 40, // 图片的宽度，默认 20
height: 40 // 图片的高度，默认 20
},
texts: [ // 文字，支持多行
// 设置了此行文字的大小size
{text: 'ooomap-园图', size: 30},
// 使用默认文字设置，只需要传入文字内容即可
'园圈 3D 场景地图',
// 文字的全部参数，align: left|center|right
{text: '室内外一体化', size: 16, color: '#ff0000', align: 'right', strokeColor: '#ffff00'}
],
}
}
// 使用 SpriteMarkerNode 类创建 marker 对象
var marker = new map.SpriteMarkerNode(map, markerData);
map.on('click', (e) => {
marker && map.removeAllCustomMarker()
// 获取poi点数据
const polygon = e.object?.userData?.polygonData
console.log(polygon, 'polygon')
if (polygon) {
card.style.display = 'block'
card.innerHTML = `名称: ${polygon.name || '未命名'}，id: ${polygon.id}`
} else {
card.style.display = 'none'
}
})
六、搜索查询
// 按ID查询
let poi = map.getPolygonDataById(val)
// 按名称查询
let list = map.getAreaByName(val)
七、室内外一体化
移动地图并缩放，将自动切换室内外模式
