Appearance
区域标绘
此功能案例实现点击开始标绘按钮后，点击地图，生成路径，点击结束标绘按钮，按照路径，生成区域图
目录
1. 功能点
- 场景点击事件 onSceneClick
- 添加地标图层 addLandmarkLayer
- 更新地标图层 updateLandmarkLayerCoord
- 添加路径图层 addPath
- 更新路径图层 updatePathCoord
- 删除图层 removeOverlay
- 添加区域图 addArea
2. 视频演示
3. 核心代码
引入版本：3.1 起支持
第一步
准备地标图数据变量、路径图数据变量，点击开始标绘按钮，监听点击地图事件，根据回调信息，添加数据
JavaScript
// 地标图数据
let pointsData = []
// 路径图数据
let pathData = []
// 区域图数据
let pathData = []监听点击事件
JavaScript
// 注册地图点击事件
window.appInstance.uniCall('addEventListener', {
eventName: 'onSceneClick',
callback: (res) => {
if (!isMark) {
return
}
console.log(res.data[0].coordZ, 111)
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()
} else {
upDatePoints()
upDataPath()
}
}
})第二步
添加地标图方法封装，更新地标图方法封装，添加轨迹图方法封装，更新轨迹图方法封装
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', // 如果具体想限定图层对象，则填写图层对象 id，如不限制，可不填
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
}第四步
结束标绘后，删除地表图，删除路径图，添加区域图
JavaScript
// 删除图层
function removeLayer(id, layerType) {
window.appInstance.uniCall('removeOverlay', {
id: id, // 图层Id
overlayType: layerType //图层类型
})
}根据点位数据信息，生成区域图数据，添加区域图
JavaScript
// 添加区域图
function addArea() {
let areaData = pathData.map((item) => {
return {
coord: item.coord
}
})
window.appInstance.uniCall('addArea', {
id: 'AreaId', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: 'layerArea', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
coordZ: pointsData[0].coordZ + 30, // 高度（单位：米）
type: 'Segment01', // 区域边界样式类别
color: '#ff0000', // 颜色（HEX 颜色值）
areaHeight: 30, // 围栏高度（单位：米）
fillArea: 'Segment01', // 区域填充样式类别
fillPosition: 'top', // 区域填充的位置，top/bottom，默认top
points: areaData // 定义区域边界
})
}