Vue.js2+Cesium1.103.0 十五、绘制视锥,并可实时调整视锥姿态
Demo
<template>
<div
id="cesium-container"
style="width: 100%; height: 100%;"
/>
</template>
<script>
/* eslint-disable no-undef */
/* eslint-disable new-cap */
/* eslint-disable no-unused-vars */
/**
* 根据两个坐标,计算连接的线段与正北的夹角
*
*/
import * as turf from '@turf/turf'
export default {
data() {
return {}
},
computed: {},
watch: {},
mounted() {
window.$InitMap()
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(100, 10, 120, 70)
})
const altitude = 100000
const distance = 1000
const pointO = {
longitude: 116.407387,
latitude: 39.904179,
altitude: altitude
}
const pointN = {
label: 'N 0°',
longitude: turf.rhumbDestination(
turf.point([pointO.longitude, pointO.latitude]),
distance,
0
).geometry.coordinates[0],
latitude: turf.rhumbDestination(
turf.point([pointO.longitude, pointO.latitude]),
distance,
0
).geometry.coordinates[1],
altitude: altitude
}
const pointE = {
label: 'E 90°',
longitude: turf.rhumbDestination(
turf.point([pointO.longitude, pointO.latitude]),
distance,
90
).geometry.coordinates[0],
latitude: turf.rhumbDestination(
turf.point([pointO.longitude, pointO.latitude]),
distance,
90
).geometry.coordinates[1],
altitude: altitude
}
const pointS = {
label: 'S 180°',
longitude: turf.rhumbDestination(
turf.point([pointO.longitude, pointO.latitude]),
distance,
180
).geometry.coordinates[0],
latitude: turf.rhumbDestination(
turf.point([pointO.longitude, pointO.latitude]),
distance,
180
).geometry.coordinates[1],
altitude: altitude
}
const pointW = {
label: 'W 270°',
longitude: turf.rhumbDestination(
turf.point([pointO.longitude, pointO.latitude]),
distance,
270
).geometry.coordinates[0],
latitude: turf.rhumbDestination(
turf.point([pointO.longitude, pointO.latitude]),
distance,
270
).geometry.coordinates[1],
altitude: altitude
}
const list = [pointN, pointE, pointS, pointW]
for (let index = 0; index < list.length; index++) {
const point = list[index]
viewer.entities.add(
new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(
point.longitude,
point.latitude,
point.altitude
),
label: {
font: '14px sans-serif',
text: point.label,
fillColor: new Cesium.Color.fromCssColorString('#fff'),
outlineColor: new Cesium.Color.fromCssColorString('#fff'),
outlineWidth: 1,
// verticalOrigin: Cesium.VerticalOrigin.CENTER,
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
showBackground: true
},
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
pointO.longitude,
pointO.latitude,
pointO.altitude,
point.longitude,
point.latitude,
point.altitude
]),
width: 10,
material: new Cesium.PolylineArrowMaterialProperty(
new Cesium.Color.fromCssColorString('#fff').withAlpha(1)
)
}
})
)
}
const lines = [
[
{
longitude: 112.9634812162806,
latitude: 36.97040252777073,
altitude
},
{
longitude: 119.32663938454708,
latitude: 42.26995861317594,
altitude
}
],
[
{
longitude: 117.9592990653408,
latitude: 38.38163978720803,
altitude
},
{
longitude: 123.42464237870345,
latitude: 33.296977534577685,
altitude
}
],
[
{
longitude: 111.53663125569267,
latitude: 30.989726449061138,
altitude
},
{
longitude: 93.66207819341395,
latitude: 42.32870629780615,
altitude
}
],
[
{
longitude: 90.91200448882437,
latitude: 40.709266162020185,
altitude
},
{
longitude: 109.04284513782429,
latitude: 28.780767151167282,
altitude
}
]
]
for (let index = 0; index < lines.length; index++) {
const line = lines[index]
const angle = turf.rhumbBearing(
turf.point([line[0].longitude, line[0].latitude]),
turf.point([line[1].longitude, line[1].latitude])
)
viewer.entities.add(
new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(
line[1].longitude,
line[1].latitude,
line[1].altitude
),
label: {
font: '14px sans-serif',
text: `${angle.toFixed(0)}°`,
fillColor: new Cesium.Color.fromCssColorString('#fff'),
outlineColor: new Cesium.Color.fromCssColorString('#fff'),
outlineWidth: 1,
verticalOrigin: Cesium.VerticalOrigin.CENTER,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
showBackground: true
},
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
line[0].longitude,
line[0].latitude,
line[0].altitude,
line[1].longitude,
line[1].latitude,
line[1].altitude
]),
width: 10,
material: new Cesium.PolylineArrowMaterialProperty(
new Cesium.Color.fromCssColorString('#fff').withAlpha(1)
)
}
})
)
}
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction(function (event) {
// 平面坐标系转笛卡尔空间直角坐标系
/**
position: Cartesian2 {x: 683.0753784179688, y: 512.71826171875}
转
Cartesian3{x: -2174106.926252774, y: 4386734.375324652, z: 4074136.167795586}
*/
console.log(
'平面坐标系转笛卡尔空间直角坐标系',
viewer.scene.pickPosition(event.position)
)
// 空间直角坐标系转经纬度
const earthPosition = viewer.camera.pickEllipsoid(
event.position,
viewer.scene.globe.ellipsoid
)
const cartographic = Cesium.Cartographic.fromCartesian(
earthPosition,
viewer.scene.globe.ellipsoid,
new Cesium.Cartographic()
)
const longitude = Cesium.Math.toDegrees(cartographic.longitude)
const latitude = Cesium.Math.toDegrees(cartographic.latitude)
console.log(
'空间直角坐标系转经纬度',
longitude,
latitude,
cartographic.height
)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
},
methods: {}
}
</script>
<style></style>