Cesium 画折线非常简单, 鼠标点击获取经纬度, 把这些经纬度存放在数组中。 每次鼠标点击先清空之前画的折线,然后重新画。所用到的API 有Cesium.Cartesian3.fromDegreesArrayHeights。
完整代码如下:
<template>
<div id="app">
<div id="mapId"></div>
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
this.polylineArr = []
this.init()
this.click()
},
methods: {
init() {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVC'
this.viewer = new Cesium.Viewer('mapId', {
homeButton: true,
sceneModePicker: false,
baseLayerPicker: false, // 影像切换
animation: false, // 是否显示动画控件
infoBox: false, // 是否显示点击要素之后显示的信息
selectionIndicator: false, // 要素选中框
geocoder: false, // 是否显示地名查找控件
timeline: false, // 是否显示时间线控件
fullscreenButton: false,
shouldAnimate: false,
navigationHelpButton: false, // 是否显示帮助信息控件
});
setTimeout(() => {
console.log("go to china")
this.viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(113, 16, 2500000),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: 0
}
})
}, 500);
},
click() {
const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
handler.setInputAction((movement) => {
const lonLat = this.getLonLatFromEllipsoid(movement)
// this.addBillboard(lonLat) //画广告牌
this.drawPolyline(lonLat) //画折线
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
},
drawPolyline(lonLat){
this.polylineArr.push(lonLat)
const polylineIns = this.viewer.entities.getById("polylineId")
if(polylineIns){
//先清除之前画的折线
this.viewer.entities.remove(polylineIns)
}
let positions = []
this.polylineArr.forEach(item => {
positions.push(item.longitude, item.latitude, item.altitude || 0)
})
this.viewer.entities.add({
name: "折线",
id: "polylineId",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
material: Cesium.Color.RED,
width: 1
}
})
},
addBillboard(coordinate){
const billboardOrigin = this.viewer.entities.getById("billboardId")
if(billboardOrigin){
//根据id, 清除之前创建的实体
this.viewer.entities.remove(billboardOrigin)
}
const billboardEntity = new Cesium.Entity({
id: 'billboardId',
position: Cesium.Cartesian3.fromDegrees(coordinate.longitude, coordinate.latitude, 0),
billboard: {
image: '/static/logo.png',
scale: 0.1
},
label: {
text: `经度:${coordinate.longitude} \n 纬度:${coordinate.latitude}`,
font: "2pt",
fillColor: Cesium.Color.RED,
show: true,
pixelOffset: new Cesium.Cartesian2(0, -30),
horizontalOrigin: Cesium.HorizontalOrigin.CENTER
}
})
this.viewer.entities.add(billboardEntity)
},
getLonLatFromEllipsoid(movement) {
//获取椭球上点的经纬度
let cartesian = this.viewer.camera.pickEllipsoid(movement.position);
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
let alt = cartographic.height; // 高度,椭球面height永远等于0
let coordinate = {
longitude: Number(lng.toFixed(6)),
latitude: Number(lat.toFixed(6)),
altitude: Number(alt.toFixed(2))
};
console.log('lonlat from Ellipsoid: ', coordinate)
return coordinate
},
}
}
</script>
<style></style>
注意:在使用此代码时,需要替换自己的accessToken。