Appearance
标注距离
此功能案例实现点击开始标绘按钮后，点击地图，生成路径，并根据点位事实计算路径距离
目录
1. 功能点
- 场景点击事件 onSceneClick
- 添加地标图层 addLandmarkLayer
- 更新地标图层 updateLandmarkLayerCoord
- 添加路径图层 addPath
- 更新路径图层 updatePathCoord
2. 视频演示
3. 核心代码
引入版本：3.1 起支持
第一步
准备地标图数据变量、路径图数据变量，监听点击地图事件，根据点击次数添加或更新图层
JavaScript
//地标图数据
let pointsData = []
//路径图数据
let pathData = []监听点击事件
JavaScript
// 注册地图点击事件
window.appInstance.uniCall('addEventListener', {
eventName: 'onSceneClick',
callback: (res) => { // 事件回调
if (!isMark) { // 未开启该功能，不做操作
return
}
// 添加地标图数据
let point = {
id: 'point' + Date.now(),
label: '',
coord: res.data[0].coord,
coordZ: res.data[0].coordZ,
type: 'legendName1'
}
pointsData.push(point)
// 添加路径数据
pathData.push({
coord: res.data[0].coord,
coordZ: res.data[0].coordZ
})
// 首次点击，添加地标图层
if (pointsData.length == 1) {
addPoints()
} else if (pointsData.length == 2) {
// 第二次点击，更新地标图，添加路径
upDatePoints()
addPath()
let dis = getDistance(
pathData[0].coord[1],
pathData[0].coord[0],
pathData[1].coord[1],
pathData[1].coord[0]
)
console.log('测算距离', dis)
} else {
// 更新地标图，更新路径
upDatePoints()
upDataPath()
let dis = clacPathLength()
document.querySelector('.center').className = 'center'
document.querySelector('.center span').innerHTML = parseInt(dis) + '米'
console.log('测算距离', dis)
}
}
})第二步
添加地标图方法封装，更新地标图方法封装，添加轨迹图方法封装，更新轨迹图方法封装
JavaScript
// 添加散点
function addPoints() {
let jsonData = {
id: 'layerId', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: 'layerName', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
autoScale: true, // 如果开启后，图标会按照摄像机远近自动缩放大小
legends: [ // 定义图层包含图例，支持为不同图例定义各自样式
{
name: 'legendName1',
color: '#FFFFFF',
iconName: 'icon_03'
},
],
data: pointsData // 定义图层可视化数据
}
window.appInstance.uniCall('addLandmarkLayer', jsonData, (res) => {
window.appInstance.uniCall('pickOverlay', {
overlayType: 'landmarkLayer', // 图层对象类别
idLayer: 'layerId', // 限定图层对象
type: 'click', // 单选模式，click：点击选中；hover：悬停选中
isShowDecorator: false // 表示是否显示选中的高亮装饰符，true：显示，false：不显示，默认：true
})
})
}更新地标图
JavaScript
// 更新点位数据
function upDatePoints() {
window.appInstance.uniCall('updateLandmarkLayerCoord', {
id: 'layerId', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: 'layerName', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
isAppend: true, // 是否追加数据（按顺序），true：按新数据 更新原有重复数据 & 追加新数据；false：清除原有数据 & 重建新数据
data: pointsData // 定义图层可视化数据
})
}添加轨迹图
JavaScript
// 添加路径
function addPath() {
window.appInstance.uniCall('addPath', {
id: 'pathID', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: 'layerName', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
type: 'Segment03', // 路线样式类别，详见下表：路线样式类别
color: '#ff0000', // 路线颜色，"" 颜色透明（HEX 颜色值）
colorPass: '#ffff00', // 模型对象 移动经过后的 路径颜色（HEX 颜色值）
width: 20, // 路径宽度（单位：米）
points: [ // 定义路径途径点
{
coord: pointsData[0].coord, // XY 轴坐标，X：经度；Y：纬度
coordZ: pointsData[0].coordZ // Z 轴高度（单位：米）
},
{
coord: pointsData[1].coord,
coordZ: pointsData[1].coordZ
}
]
})
}更新轨迹图
JavaScript
// 更新路径图
function upDataPath() {
window.appInstance.uniCall('updatePathCoord', {
id: 'pathID', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: 'layerName', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
isAppend: false, // 是否追加数据（按数据顺序），true：在原有数据后方追加数据；false：清除原有数据，更新数据
points: pathData // 定义路径途径点
})
}第三部
封装测距方法，在页面中展示距离
JavaScript
// 两点间距离
function getDistance(lat1, lon1, lat2, lon2) {
lat1 = lat1 || 0
lon1 = lon1 || 0
lat2 = lat2 || 0
lon2 = lon2 || 0
var rad1 = (lat1 * Math.PI) / 180.0
var rad2 = (lat2 * Math.PI) / 180.0
var a = rad1 - rad2
var b = (lon1 * Math.PI) / 180.0 - (lon2 * Math.PI) / 180.0
var r = 6378137
var distance =
r *
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(a / 2), 2) +
Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2),
)
)
return distance
}
// 计算路径距离
function getPathDistance() {
let dis = 0
for (let i = 1; i < pointsData.length; i++) {
let temp = [
pointsData[i - 1].coord[1],
pointsData[i - 1].coord[0],
pointsData[i].coord[1],
pointsData[i].coord[0]
]
dis += getDistance(temp[0], temp[1], temp[2], temp[3])
}
return dis
}