1、障碍面
2、起点
2、终点
第一步:绘制障碍面 polygonZAM
为绘制成功后地图上的面矢量数据
export function drawPolygon() {
if (polygonZAM) {
polygonZAM.remove()
polygonZAM = null
}
graphicLayer.startDraw({
type: "polygon",
style: {
color: "#00ffff",
opacity: 0.4,
outline: true,
outlineWidth: 1,
outlineColor: "#ffffff"
},
success: (graphic) => {
polygonZAM = graphic
}
})
第二步:在地图上绘制起点和终点 pointQD
(起点矢量数据)、pointZD
(终点矢量数据)
graphicLayer.startDraw({
type: "point",
style: {
pixelSize: 10,
color: "red",
label: {
text: "起点",
font_size: 20,
color: "#ffffff",
outline: true,
outlineColor: "#000000",
pixelOffsetY: -20
}
},
success: (graphic) => {
pointQD = graphic
}
})
//==================================================
graphicLayer.startDraw({
type: "point",
style: {
pixelSize: 10,
color: "red",
label: {
text: "终点",
font_size: 20,
color: "#ffffff",
outline: true,
outlineColor: "#000000",
pixelOffsetY: -20
}
},
success: (graphic) => {
pointZD = graphic
}
})
第三步:计算最短路径 polyonLine
为最短路径
const polygon = polygonZAM.toGeoJSON() // 障碍面
const startPoint = pointQD.toGeoJSON() // 起点
const endPoint = pointZD.toGeoJSON() // 终点
const options = {
obstacles: polygon
}
const path = turf.shortestPath(startPoint, endPoint, options)
const positions = path.geometry.coordinates
const polyonLine = new mars3d.graphic.PolylineEntity({
positions: positions,
style: {
color: " #55ff33"
}
})
shortestPathLayer.addGraphic(polyonLine)