|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<!-- Use correct character set. -->
|
|
|
<meta charset="utf-8" />
|
|
|
<!-- Tell IE to use the latest, best version. -->
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
|
|
<meta
|
|
|
name="viewport"
|
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
|
|
/>
|
|
|
<title>广州飞行情报区ZGZU</title>
|
|
|
<script src="/Cesium/Cesium.js"></script>
|
|
|
<style>
|
|
|
@import url(/Cesium/Widgets/widgets.css);
|
|
|
html,
|
|
|
body,
|
|
|
#cesiumContainer {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.cesium-viewer-geocoderContainer,
|
|
|
.cesium-home-button,
|
|
|
.cesium-sceneModePicker-wrapper,
|
|
|
.cesium-navigationHelpButton-wrapper{
|
|
|
display:none !important;
|
|
|
}
|
|
|
.cesium-viewer-bottom{
|
|
|
display:none
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="cesiumContainer"></div>
|
|
|
<script>
|
|
|
const czml = [
|
|
|
{
|
|
|
id: "document",
|
|
|
name: "CZML Point",
|
|
|
version: "1.0",
|
|
|
},
|
|
|
{
|
|
|
id: "Point 1",
|
|
|
name: "各达山",
|
|
|
position: {
|
|
|
cartographicDegrees: [105.541667, 23.195833, 10],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
label: {
|
|
|
text: "各达山",
|
|
|
font: "24px Helvetica",
|
|
|
fillColor:Cesium.Color.BLACK, //字体颜色
|
|
|
showBackground:true, //是否显示背景颜色
|
|
|
backgroundColor:Cesium.Color.AQUA, //背景颜色
|
|
|
backgroundPadding: new Cesium.Cartesian2(25,75),
|
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE , //label样式
|
|
|
verticalOrigin : Cesium.VerticalOrigin.TOP ,//垂直位置
|
|
|
horizontalOrigin :Cesium.HorizontalOrigin.LEFT,//水平位置
|
|
|
pixelOffset:new Cesium.Cartesian2(25,75), //偏移
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 2",
|
|
|
name: "旧州",
|
|
|
position: {
|
|
|
cartographicDegrees: [105.8, 24.65, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 3",
|
|
|
name: "基长",
|
|
|
position: {
|
|
|
cartographicDegrees: [107.65, 25.7, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 4",
|
|
|
name: "同古",
|
|
|
position: {
|
|
|
cartographicDegrees: [109.3166667, 26.58333333, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 5",
|
|
|
name: "比耳",
|
|
|
position: {
|
|
|
cartographicDegrees: [109.3833333, 28.78333333, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 6",
|
|
|
name: "来凤",
|
|
|
position: {
|
|
|
cartographicDegrees: [109.4, 29.51666667, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 7",
|
|
|
name: "岳阳",
|
|
|
position: {
|
|
|
cartographicDegrees: [113.12, 29.38333333, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 8",
|
|
|
name: "修水",
|
|
|
position: {
|
|
|
cartographicDegrees: [114.5666667, 29.03333333, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 9",
|
|
|
name: "宁冈",
|
|
|
position: {
|
|
|
cartographicDegrees: [113.95, 26.7, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 10",
|
|
|
name: "高坪",
|
|
|
position: {
|
|
|
cartographicDegrees: [114.1166667, 26.05, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 11",
|
|
|
name: "赣州",
|
|
|
position: {
|
|
|
cartographicDegrees: [114.8733333, 25.76666667, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 12",
|
|
|
name: "点",
|
|
|
position: {
|
|
|
cartographicDegrees: [115.4166667, 25.09166667, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 13",
|
|
|
name: "点",
|
|
|
position: {
|
|
|
cartographicDegrees: [115.4008333, 24.67333333, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 14",
|
|
|
name: "大埔",
|
|
|
position: {
|
|
|
cartographicDegrees: [116.7, 24.36666667, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 15",
|
|
|
name: "诏安",
|
|
|
position: {
|
|
|
cartographicDegrees: [117.1833333, 23.7, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 16",
|
|
|
name: "点",
|
|
|
position: {
|
|
|
cartographicDegrees: [117.5, 23.5, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 17",
|
|
|
name: "点",
|
|
|
position: {
|
|
|
cartographicDegrees: [117.5, 23, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 18",
|
|
|
name: "点",
|
|
|
position: {
|
|
|
cartographicDegrees: [115.6666667, 22.40833333, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 19",
|
|
|
name: "点",
|
|
|
position: {
|
|
|
cartographicDegrees: [114.5, 22.40833333, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 20",
|
|
|
name: "点",
|
|
|
position: {
|
|
|
cartographicDegrees: [113.8666667, 22.35833333, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 21",
|
|
|
name: "点",
|
|
|
position: {
|
|
|
cartographicDegrees: [111.5, 19.5, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 22",
|
|
|
name: "点",
|
|
|
position: {
|
|
|
cartographicDegrees: [111.5, 20.5, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 23",
|
|
|
name: "点",
|
|
|
position: {
|
|
|
cartographicDegrees: [108.05, 20.5, 0],
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 24",
|
|
|
name: "点",
|
|
|
position: {
|
|
|
cartographicDegrees: [108.2086111, 21.20972222, 0],
|
|
|
},
|
|
|
label: {
|
|
|
text: "Point 24",
|
|
|
font: "24px Helvetica",
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
fillColor: Cesium.Color.SKYBLUE,
|
|
|
outlineColor: Cesium.Color.BLACK,
|
|
|
outlineWidth: 2,
|
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point 25",
|
|
|
name: "漳州机场",
|
|
|
position: {
|
|
|
cartographicDegrees: [117.65469408873497,24.561665899584984, 0],
|
|
|
},
|
|
|
label: {
|
|
|
text: "漳州机场",
|
|
|
font: "24px Helvetica",
|
|
|
color: {
|
|
|
rgba: [0, 0, 0, 255],
|
|
|
},
|
|
|
fillColor: Cesium.Color.BLUE,
|
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
|
},
|
|
|
point: {
|
|
|
color: {
|
|
|
rgba: [0, 255, 255, 255],
|
|
|
},
|
|
|
pixelSize: 6,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "Point26",
|
|
|
name: "点",
|
|
|
position: {
|
|
|
cartographicDegrees: [117.5002778,24.13416667, 0],
|
|
|
},
|
|
|
point: {
|
|
|
// 点的大小（像素）
|
|
|
pixelSize: 5,
|
|
|
// 点位颜色，fromCssColorString 可以直接使用CSS颜色
|
|
|
color: Cesium.Color.RED,
|
|
|
// 边框颜色
|
|
|
outlineColor: Cesium.Color.fromCssColorString('#fff'),
|
|
|
// 边框宽度(像素)
|
|
|
outlineWidth: 2,
|
|
|
// 显示在距相机的距离处的属性，多少区间内是可以显示的
|
|
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
|
|
|
// 是否显示
|
|
|
show: true
|
|
|
},
|
|
|
},
|
|
|
];
|
|
|
var viewer = new Cesium.Viewer("cesiumContainer");
|
|
|
// 假设已经有一个Cesium.Viewer实例叫做`viewer`
|
|
|
viewer.camera.setView({
|
|
|
destination:Cesium.Cartesian3.fromDegrees(116.46,39.92,10000000.0),
|
|
|
}); // 设置初始位置
|
|
|
// 创建一个Polyline实例
|
|
|
var polyline = viewer.entities.add({
|
|
|
name:"广州飞行情报区ZGZU",
|
|
|
polyline: {
|
|
|
positions: Cesium.Cartesian3.fromDegreesArray([
|
|
|
105.541667, 23.195833,
|
|
|
105.8, 24.65,
|
|
|
107.65, 25.7,
|
|
|
109.3166667, 26.58333333,
|
|
|
109.3833333, 28.78333333,
|
|
|
109.4, 29.51666667,
|
|
|
113.12, 29.38333333,
|
|
|
114.5666667, 29.03333333,
|
|
|
113.95, 26.7,
|
|
|
114.1166667, 26.05,
|
|
|
114.8733333, 25.76666667,
|
|
|
115.4166667, 25.09166667,
|
|
|
115.4008333, 24.67333333,
|
|
|
116.7, 24.36666667,
|
|
|
117.1833333, 23.7,
|
|
|
117.5, 23.5,
|
|
|
117.5, 23,
|
|
|
115.6666667, 22.40833333,
|
|
|
114.5, 22.40833333,
|
|
|
113.8666667, 22.35833333,
|
|
|
111.5, 19.5,
|
|
|
111.5, 20.5,
|
|
|
108.05, 20.5,
|
|
|
108.2086111, 21.20972222,
|
|
|
105.541667, 23.195833,
|
|
|
]),
|
|
|
width: 4,
|
|
|
material: Cesium.Color.fromCssColorString('#ccc')
|
|
|
}
|
|
|
});
|
|
|
viewer.zoomTo(viewer.entities);
|
|
|
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
|
|
|
viewer.dataSources.add(dataSourcePromise);
|
|
|
viewer.zoomTo(dataSourcePromise);
|
|
|
viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[4];
|
|
|
</script>
|
|
|
<script>
|
|
|
/**
|
|
|
* @description: 获取当前鼠标点击位置坐标
|
|
|
* @return {*}
|
|
|
*/
|
|
|
|
|
|
function getClickPoint(viewer) {
|
|
|
// 屏幕点击事件
|
|
|
console.log(111)
|
|
|
var pointsCollection = []; // 标记点集合，方便后续将标记的点进行清除；
|
|
|
viewer.screenSpaceEventHandler.setInputAction((evt) => {
|
|
|
var ray = viewer.camera.getPickRay(evt.position);
|
|
|
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
|
|
if(Cesium.defined(cartesian)){
|
|
|
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
|
|
// console.log(cartesian, cartographic)
|
|
|
var lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度值
|
|
|
var lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度值
|
|
|
var height = cartographic.height;
|
|
|
var entity = viewer.entities.add({
|
|
|
position: Cesium.Cartesian3.fromDegrees(lng, lat, height),
|
|
|
label: { //文字标签
|
|
|
text: 'Lon: '+lng.toFixed(5)+'\u00B0'+'\nLat: '+lat.toFixed(5)+'\u00B0'+'\nheight: '+height.toFixed(2)+'m',
|
|
|
font: '20px monospace', //15pt monospace
|
|
|
fillColor: Cesium.Color.BLACK, //文字颜色
|
|
|
scale: 1,
|
|
|
style: Cesium.LabelStyle.FILL,
|
|
|
pixelOffset: new Cesium.Cartesian2(-90, -30), //偏移量
|
|
|
showBackground: true,
|
|
|
backgroundColor: Cesium.Color.AQUA.withAlpha(1),
|
|
|
backgroundPadding: new Cesium.Cartesian2(17, 10),
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
disableDepthTestDistance:Number.POSITIVE_INFINITY,
|
|
|
},
|
|
|
point:{
|
|
|
color:Cesium.Color.RED,
|
|
|
pixelSize:9,
|
|
|
outlineColor:Cesium.Color.ALICEBLUE,
|
|
|
outlineWidth:2,
|
|
|
disableDepthTestDistance:Number.POSITIVE_INFINITY,
|
|
|
},
|
|
|
})
|
|
|
pointsCollection.push(entity);
|
|
|
}
|
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
|
|
viewer.screenSpaceEventHandler.setInputAction(function(){
|
|
|
// 删除标记点
|
|
|
pointsCollection.forEach(function (item) {
|
|
|
if (item instanceof Cesium.Entity) {
|
|
|
viewer.entities.remove(item);
|
|
|
}
|
|
|
})
|
|
|
// 清除左键点击标记事件
|
|
|
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|