You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

793 lines
20 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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,
zIndex: 10,
},
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), //偏移
zIndex: 10,
},
},
{
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,
},
},
];
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'),
zIndex: 1,
}
});
// 图片的URL
var imageUrl = './Public/img/icon01.png';
var billboard = viewer.entities.add({
name: 'TEBON',
position: Cesium.Cartesian3.fromDegrees(117.5002778, 24.13416667, 0),
billboard: {
image: '/Public/img/icon01.png',
scale: 0.5,
width: 30,
height: 26,
},
label: {
text: "TEBON",
font: "18px Helvetica",
fillColor: Cesium.Color.KEYBLUE,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.CENTER , //水平位置
eyeOffset: new Cesium.ConstantProperty(new Cesium.Cartesian3(0, 1000, 0)),
},
});
var billboard1 = viewer.entities.add({
name: 'P51',
position: Cesium.Cartesian3.fromDegrees(116.8019444, 24.56916667, 0),
billboard: {
image: '/Public/img/icon01.png',
scale: 0.5,
width: 30,
height: 26,
padding:5,
},
label: {
text: "P51",
font: "18px Helvetica",
fillColor: Cesium.Color.KEYBLUE,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.CENTER , //水平位置
eyeOffset: new Cesium.ConstantProperty(new Cesium.Cartesian3(0, 1000, 0)),
},
});
var billboard2 = viewer.entities.add({
name: 'NUSPA',
position: Cesium.Cartesian3.fromDegrees(117.6191667, 24.05055556, 0),
billboard: {
image: '/Public/img/icon01.png',
scale: 0.5,
width: 30,
height: 26,
},
label: {
text: "NUSPA",
font: "18px Helvetica",
fillColor: new Cesium.ConstantProperty(Cesium.Color.KEYBLUE),
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.LEFT , //水平位置
eyeOffset: new Cesium.ConstantProperty(new Cesium.Cartesian3(1000,0,0)),
},
});
var billboard3 = viewer.entities.add({
name: '漳州机场',
position: Cesium.Cartesian3.fromDegrees(117.65469408873497, 24.561665899584984, 0),
billboard: {
image: '/Public/img/icon03.png',
scale: 0.5,
width: 30,
height: 30,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000),
// 是否显示
show: true
},
label: {
text: "漳州",
font: "18px Helvetica",
fillColor: Cesium.Color.KEYBLUE,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: Cesium.VerticalOrigin.CENTER , //垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.RIGHT , //水平位置
// eyeOffset: new Cartesian3(0.0, 80.0, 0.0),
eyeOffset: new Cesium.ConstantProperty(new Cesium.Cartesian3(-1000, 0, 0)),
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000),
},
});
var billboard4 = viewer.entities.add({
name: '杏林',
position: Cesium.Cartesian3.fromDegrees(118.0166667,24.56666667, 0),
billboard: {
image: '/Public/img/icon02.png',
scale: 0.5,
width: 36,
height: 28,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000),
// 是否显示
show: true
},
label: {
text: "杏林",
font: "18px Helvetica",
fillColor: Cesium.Color.KEYBLUE,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: Cesium.VerticalOrigin.CENTER , //垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.RIGHT , //水平位置
// eyeOffset: new Cartesian3(0.0, 80.0, 0.0),
eyeOffset: new Cesium.ConstantProperty(new Cesium.Cartesian3(-1000, 0, 0)),
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000),
},
});
var billboard5 = viewer.entities.add({
name: 'DABER',
position: Cesium.Cartesian3.fromDegrees(116.8519444,24.135, 0),
billboard: {
image: '/Public/img/icon01.png',
scale: 0.5,
width: 30,
height: 26,
},
label: {
text: "DABER",
font: "18px Helvetica",
fillColor: new Cesium.ConstantProperty(Cesium.Color.KEYBLUE),
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.RIGHT , //水平位置
eyeOffset: new Cesium.ConstantProperty(new Cesium.Cartesian3(-1000,0,0)),
},
});
var billboard6 = viewer.entities.add({
name: 'SAPUT',
position: Cesium.Cartesian3.fromDegrees(117.0333333,23.90111111, 0),
billboard: {
image: '/Public/img/icon01.png',
scale: 0.5,
width: 30,
height: 26,
},
label: {
text: "SAPUT",
font: "18px Helvetica",
fillColor: new Cesium.ConstantProperty(Cesium.Color.KEYBLUE),
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.RIGHT , //水平位置
eyeOffset: new Cesium.ConstantProperty(new Cesium.Cartesian3(-1000,0,0)),
},
});
var billboard7 = viewer.entities.add({
name: 'IKATA',
position: Cesium.Cartesian3.fromDegrees(117.1338889,23.7525, 0),
billboard: {
image: '/Public/img/icon01.png',
scale: 0.5,
width: 30,
height: 26,
},
label: {
text: "IKATA",
font: "18px Helvetica",
fillColor: new Cesium.ConstantProperty(Cesium.Color.KEYBLUE),
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.RIGHT , //水平位置
eyeOffset: new Cesium.ConstantProperty(new Cesium.Cartesian3(-1000,0,0)),
},
});
var billboard8 = viewer.entities.add({
name: 'BINUS',
position: Cesium.Cartesian3.fromDegrees(117.4005556,23.83472222, 0),
billboard: {
image: '/Public/img/icon01.png',
scale: 0.5,
width: 30,
height: 26,
},
label: {
text: "BINUS",
font: "18px Helvetica",
fillColor: new Cesium.ConstantProperty(Cesium.Color.KEYBLUE),
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.RIGHT , //水平位置
eyeOffset: new Cesium.ConstantProperty(new Cesium.Cartesian3(-1000,0,0)),
},
});
var billboard9 = viewer.entities.add({
name: '厦门/高崎',
position: Cesium.Cartesian3.fromDegrees(118.11783109396191,24.53852070726468, 0),
billboard: {
image: '/Public/img/icon04.png',
scale: 0.5,
width: 36,
height: 36,
},
label: {
text: "厦门/高崎",
font: "18px Helvetica",
fillColor: new Cesium.ConstantProperty(Cesium.Color.KEYBLUE),
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
horizontalOrigin: Cesium.HorizontalOrigin.RIGHT , //水平位置
eyeOffset: new Cesium.ConstantProperty(new Cesium.Cartesian3(-1000,0,0)),
},
});
var polyline01 = viewer.entities.add({
polyline: {
// fromDegrees返回给定的经度和纬度值数组以度为单位该数组由Cartesian3位置组成。
// Cesium.Cartesian3.fromDegreesArray([经度1, 纬度1, 经度2, 纬度2,])
// Cesium.Cartesian3.fromDegreesArrayHeights([经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2])
positions: Cesium.Cartesian3.fromDegreesArray([
117.5002778, 24.13416667,
118.0166667,24.56666667
]),
// 宽度
width: 2,
// 线的颜色
material: Cesium.Color.fromCssColorString('#244975'),
// 线的顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
zIndex: 10,
// 显示在距相机的距离处的属性,多少区间内是可以显示的
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
// 是否显示
show: true
}
});
var polyline02 = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
117.5002778, 24.13416667,
116.8019444, 24.56916667
]),
width: 2,
material: Cesium.Color.fromCssColorString('#244975'),
zIndex: 10,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
show: true
}
});
var polyline03 = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
117.5002778, 24.13416667,
117.6191667, 24.05055556
]),
width: 2,
material: Cesium.Color.fromCssColorString('#244975'),
zIndex: 10,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
show: true
}
});
var polyline04 = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
117.5002778, 24.13416667,
116.8519444,24.135
]),
width: 2,
material: Cesium.Color.fromCssColorString('#244975'),
zIndex: 10,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
show: true
}
});
var polyline05 = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
117.5002778, 24.13416667,
117.0333333,23.90111111
]),
width: 2,
material: Cesium.Color.fromCssColorString('#244975'),
zIndex: 10,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
show: true
}
});
var polyline06 = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
117.5002778, 24.13416667,
117.1338889,23.7525
]),
width: 2,
material: Cesium.Color.fromCssColorString('#244975'),
zIndex: 10,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
show: true
}
});
var polyline07 = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
117.6191667, 24.05055556,
117.4005556,23.83472222
]),
width: 2,
material: Cesium.Color.fromCssColorString('#244975'),
zIndex: 10,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
show: true
}
});
var polyline08 = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
117.4005556,23.83472222,
117.1338889,23.7525
]),
width: 2,
material: Cesium.Color.fromCssColorString('#244975'),
zIndex: 10,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
show: true
}
});
var polyline09 = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
117.1338889,23.7525,
117.0333333,23.90111111
]),
width: 2,
material: Cesium.Color.fromCssColorString('#244975'),
zIndex: 10,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
show: true
}
});
var polyline10 = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
117.0333333,23.90111111,
116.8519444,24.135
]),
width: 2,
material: Cesium.Color.fromCssColorString('#244975'),
zIndex: 10,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
show: true
}
});
var polyline10 = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
116.8519444,24.135,
116.8019444, 24.56916667
]),
width: 2,
material: Cesium.Color.fromCssColorString('#244975'),
zIndex: 10,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
show: true
}
});
// 如果需要可以通过以下代码将Entity置于最顶层
viewer.zoomTo(billboard);
viewer.zoomTo(polyline01);
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>
</body>
</html>