|
|
<!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>
|
|
|
<script src="/Public/js/jquery-1.10.2.min.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,
|
|
|
.cesium-viewer-bottom{
|
|
|
display: none !important;
|
|
|
}
|
|
|
/* .cesium-toolbar-button{
|
|
|
display: none
|
|
|
} */
|
|
|
.ol-popup {
|
|
|
position: absolute;
|
|
|
padding:0 15px 15px;
|
|
|
background-color: white;
|
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
|
|
border-radius: 5px;
|
|
|
border: 1px solid #cccccc;
|
|
|
top: -1000px;
|
|
|
min-width: 150px;
|
|
|
max-width: 300px;
|
|
|
z-index: 999;
|
|
|
}
|
|
|
|
|
|
.ol-popup:after,
|
|
|
.ol-popup:before {
|
|
|
top: 100%;
|
|
|
border: solid transparent;
|
|
|
content: " ";
|
|
|
height: 0;
|
|
|
width: 0;
|
|
|
position: absolute;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
.ol-popup:after {
|
|
|
border-top-color: white;
|
|
|
border-width: 10px;
|
|
|
left: 48px;
|
|
|
margin-left: -10px;
|
|
|
}
|
|
|
|
|
|
.ol-popup:before {
|
|
|
border-top-color: #cccccc;
|
|
|
border-width: 11px;
|
|
|
left: 48px;
|
|
|
margin-left: -11px;
|
|
|
}
|
|
|
.popup-title{
|
|
|
font-size: 18px;
|
|
|
padding:5px 0 ;
|
|
|
font-weight:border;
|
|
|
border-bottom:1px solid #5084c2;
|
|
|
}
|
|
|
.ol-popup-closer {
|
|
|
text-decoration: none;
|
|
|
position: absolute;
|
|
|
top: 2px;
|
|
|
right: 8px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.ol-popup-closer:hover {
|
|
|
color: orange;
|
|
|
}
|
|
|
|
|
|
.ol-popup-closer:after {
|
|
|
content: "✖";
|
|
|
}
|
|
|
.popup-list{
|
|
|
margin:7px 0;
|
|
|
}
|
|
|
.popup-label{
|
|
|
float:left;
|
|
|
color:#5084c2;
|
|
|
}
|
|
|
.popup-con p{
|
|
|
margin:0;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="cesiumContainer"></div>
|
|
|
<div id="popup" class="ol-popup">
|
|
|
<a id="popup-closer" class="ol-popup-closer"></a>
|
|
|
<div class="popup-title">漳州</div>
|
|
|
<div id="popup-content" class="popup-content">
|
|
|
<div class="popup-list">
|
|
|
<label class="popup-label">地理位置：</label>
|
|
|
<div class="popup-con">
|
|
|
<p>漳州市位于中国福建省的南部，介于东经116°50'至118°02'，北纬23°42'至25°03'之间</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="popup-list">
|
|
|
<label class="popup-label">行政区划：</label>
|
|
|
<div class="popup-con">
|
|
|
<p>漳州市下辖芗城区、龙文区、龙海市、云霄县、漳浦县、诏安县、长泰县、东山县、南靖县、平和县、华安县。行政区划较为复杂，市域范围广泛</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="popup-list">
|
|
|
<label class="popup-label">总 面 积：</label>
|
|
|
<div class="popup-con">
|
|
|
<p>12,600平方公里（12,688平方公里）</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="popup-list">
|
|
|
<label class="popup-label">常住人口：</label>
|
|
|
<div class="popup-con">
|
|
|
<p>约为4,812,700人</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="popup-list">
|
|
|
<label class="popup-label">户籍人口：</label>
|
|
|
<div class="popup-con">
|
|
|
<p>约为4,850,000人</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</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,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
id: "document",
|
|
|
name: "CZML Geometries: Polyline",
|
|
|
version: "1.0"
|
|
|
},
|
|
|
{
|
|
|
id: "polyline01",
|
|
|
name: "travel to and fro between TEBON and 杏林;",
|
|
|
polyline: {
|
|
|
positions: {
|
|
|
cartographicDegrees: [
|
|
|
117.5002778, 24.13416667, 0,
|
|
|
118.0166667,24.56666667, 0
|
|
|
]
|
|
|
},
|
|
|
width: 2,
|
|
|
material: {
|
|
|
solidColor: {
|
|
|
color: {
|
|
|
rgba: [36,73,117, 255],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
zIndex: 10,
|
|
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "polyline02",
|
|
|
name: "travel to and fro between TEBON and P51;",
|
|
|
polyline: {
|
|
|
positions: {
|
|
|
cartographicDegrees: [
|
|
|
117.5002778, 24.13416667, 0,
|
|
|
116.8019444, 24.56916667, 0
|
|
|
]
|
|
|
},
|
|
|
width: 2,
|
|
|
material: {
|
|
|
solidColor: {
|
|
|
color: {
|
|
|
rgba: [36,73,117, 255],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
zIndex: 10,
|
|
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "polyline03",
|
|
|
name: "travel to and fro between TEBON and NUSPA;",
|
|
|
polyline: {
|
|
|
positions: {
|
|
|
cartographicDegrees: [
|
|
|
117.5002778, 24.13416667, 0,
|
|
|
117.6191667, 24.05055556, 0
|
|
|
]
|
|
|
},
|
|
|
width: 2,
|
|
|
material: {
|
|
|
solidColor: {
|
|
|
color: {
|
|
|
rgba: [36,73,117, 255],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
zIndex: 10,
|
|
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "polyline04",
|
|
|
name: "travel to and fro between TEBON and DABER;",
|
|
|
polyline: {
|
|
|
positions: {
|
|
|
cartographicDegrees: [
|
|
|
117.5002778, 24.13416667, 0,
|
|
|
116.8519444, 24.135, 0
|
|
|
]
|
|
|
},
|
|
|
width: 2,
|
|
|
material: {
|
|
|
solidColor: {
|
|
|
color: {
|
|
|
rgba: [36,73,117, 255],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
zIndex: 10,
|
|
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "polyline05",
|
|
|
name: "travel to and fro between TEBON and SAPUT;",
|
|
|
polyline: {
|
|
|
positions: {
|
|
|
cartographicDegrees: [
|
|
|
117.5002778, 24.13416667, 0,
|
|
|
117.0333333, 23.90111111, 0
|
|
|
]
|
|
|
},
|
|
|
width: 2,
|
|
|
material: {
|
|
|
solidColor: {
|
|
|
color: {
|
|
|
rgba: [36,73,117, 255],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
zIndex: 10,
|
|
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "polyline06",
|
|
|
name: "travel to and fro between TEBON and IKATA;",
|
|
|
polyline: {
|
|
|
positions: {
|
|
|
cartographicDegrees: [
|
|
|
117.5002778, 24.13416667, 0,
|
|
|
117.1338889,23.7525, 0
|
|
|
]
|
|
|
},
|
|
|
width: 2,
|
|
|
material: {
|
|
|
solidColor: {
|
|
|
color: {
|
|
|
rgba: [36,73,117, 255],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
zIndex: 10,
|
|
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "polyline07",
|
|
|
name: "From NUSPA to BINUS;",
|
|
|
polyline: {
|
|
|
positions: {
|
|
|
cartographicDegrees: [
|
|
|
117.6191667, 24.05055556, 0,
|
|
|
117.4005556, 23.83472222, 0
|
|
|
]
|
|
|
},
|
|
|
width: 2,
|
|
|
material: {
|
|
|
solidColor: {
|
|
|
color: {
|
|
|
rgba: [36,73,117, 255],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
zIndex: 10,
|
|
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "polyline08",
|
|
|
name: "From BINUS to IKATA;",
|
|
|
polyline: {
|
|
|
positions: {
|
|
|
cartographicDegrees: [
|
|
|
117.4005556, 23.83472222, 0,
|
|
|
117.1338889, 23.7525, 0
|
|
|
]
|
|
|
},
|
|
|
width: 2,
|
|
|
material: {
|
|
|
solidColor: {
|
|
|
color: {
|
|
|
rgba: [36,73,117, 255],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
zIndex: 10,
|
|
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "polyline09",
|
|
|
name: "travel to and fro between IKATA and SAPUT;",
|
|
|
polyline: {
|
|
|
positions: {
|
|
|
cartographicDegrees: [
|
|
|
117.1338889, 23.7525, 0,
|
|
|
117.0333333, 23.90111111,0
|
|
|
]
|
|
|
},
|
|
|
width: 2,
|
|
|
material: {
|
|
|
solidColor: {
|
|
|
color: {
|
|
|
rgba: [36,73,117, 255],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
zIndex: 10,
|
|
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "polyline10",
|
|
|
name: "travel to and fro between SAPUT and DABER;",
|
|
|
polyline: {
|
|
|
positions: {
|
|
|
cartographicDegrees: [
|
|
|
117.0333333, 23.90111111,0,
|
|
|
116.8519444, 24.135, 0
|
|
|
]
|
|
|
},
|
|
|
width: 2,
|
|
|
material: {
|
|
|
solidColor: {
|
|
|
color: {
|
|
|
rgba: [36,73,117, 255],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
zIndex: 10,
|
|
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "polyline11",
|
|
|
name: "travel to and fro between DABER and P51;",
|
|
|
polyline: {
|
|
|
positions: {
|
|
|
cartographicDegrees: [
|
|
|
116.8519444, 24.135, 0,
|
|
|
116.8019444, 24.56916667, 0
|
|
|
]
|
|
|
},
|
|
|
width: 2,
|
|
|
material: {
|
|
|
solidColor: {
|
|
|
color: {
|
|
|
rgba: [36,73,117, 255],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
zIndex: 10,
|
|
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "polyline12",
|
|
|
name: "From NUSPA to DABER;",
|
|
|
description:
|
|
|
"<p>这是注释，从NUSPA 到 DABER单向航线</p>",
|
|
|
polyline: {
|
|
|
positions: {
|
|
|
cartographicDegrees: [
|
|
|
117.6191667, 24.05055556, 0,
|
|
|
116.8519444, 24.135, 0
|
|
|
]
|
|
|
},
|
|
|
width: 2,
|
|
|
material: {
|
|
|
solidColor: {
|
|
|
color: {
|
|
|
rgba: [36,73,117, 255],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
zIndex: 10,
|
|
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "billboard01",
|
|
|
name: "TEBON",
|
|
|
description:
|
|
|
"<p><a href='#' target='_blank'>注释可加链接跳转.</a> (AGI) 注释.</p>",
|
|
|
billboard: {
|
|
|
image:"../Public/img/icon01.png",
|
|
|
scale: 0.5,
|
|
|
width: 30,
|
|
|
height: 26
|
|
|
},
|
|
|
label: {
|
|
|
fillColor: {
|
|
|
rgba: [36, 73, 117, 255]
|
|
|
},
|
|
|
font: "18px Helvetica",
|
|
|
verticalOrigin: "BOTTOM",//垂直位置
|
|
|
horizontalOrigin: "CENTER",//水平位置
|
|
|
pixelOffset: {
|
|
|
cartesian2: [32, 0]
|
|
|
},
|
|
|
style: "FILL_AND_OUTLINE",
|
|
|
text: "TEBON",
|
|
|
showBackground: false,
|
|
|
backgroundColor: {
|
|
|
rgba: [112, 89, 57, 200]
|
|
|
}
|
|
|
},
|
|
|
position: {
|
|
|
cartographicDegrees: [117.5002778, 24.13416667, 0]
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "billboard02",
|
|
|
name: "杏林",
|
|
|
description:
|
|
|
"<p> 注释.</p>",
|
|
|
billboard: {
|
|
|
image:"../Public/img/icon02.png",
|
|
|
scale: 0.5,
|
|
|
width: 36,
|
|
|
height: 28
|
|
|
},
|
|
|
label: {
|
|
|
fillColor: {
|
|
|
rgba: [36, 73, 117, 255]
|
|
|
},
|
|
|
font: "18px Helvetica",
|
|
|
verticalOrigin: "CENTER",//垂直位置
|
|
|
horizontalOrigin: "RIGHT",//水平位置
|
|
|
pixelOffset: {
|
|
|
cartesian2: [-12, 0]
|
|
|
},
|
|
|
style: "FILL_AND_OUTLINE",
|
|
|
text: "杏林",
|
|
|
showBackground: false,
|
|
|
backgroundColor: {
|
|
|
rgba: [112, 89, 57, 200]
|
|
|
}
|
|
|
},
|
|
|
position: {
|
|
|
cartographicDegrees: [118.0166667, 24.56666667, 0]
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "billboard03",
|
|
|
name: "漳州机场",
|
|
|
description:
|
|
|
"<p>注释.</p>",
|
|
|
billboard: {
|
|
|
image:"../Public/img/icon03.png",
|
|
|
scale: 0.5,
|
|
|
width: 30,
|
|
|
height: 30,
|
|
|
},
|
|
|
label: {
|
|
|
fillColor: {
|
|
|
rgba: [36, 73, 117, 255]
|
|
|
},
|
|
|
font: "18px Helvetica",
|
|
|
verticalOrigin: "CENTER",//垂直位置
|
|
|
horizontalOrigin: "RIGHT",//水平位置
|
|
|
pixelOffset: {
|
|
|
cartesian2: [-10, 0]
|
|
|
},
|
|
|
style: "FILL_AND_OUTLINE",
|
|
|
text: "漳州",
|
|
|
showBackground: false,
|
|
|
backgroundColor: {
|
|
|
rgba: [112, 89, 57, 200]
|
|
|
}
|
|
|
},
|
|
|
position: {
|
|
|
cartographicDegrees: [117.65469408873497, 24.561665899584984, 0]
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: "billboard04",
|
|
|
name: "厦门/高崎",
|
|
|
description:
|
|
|
"<p>注释.</p>",
|
|
|
billboard: {
|
|
|
image:"../Public/img/icon04.png",
|
|
|
scale: 0.5,
|
|
|
width: 36,
|
|
|
height: 36
|
|
|
},
|
|
|
label: {
|
|
|
fillColor: {
|
|
|
rgba: [36, 73, 117, 255]
|
|
|
},
|
|
|
font: "18px Helvetica",
|
|
|
verticalOrigin: "CENTER",//垂直位置
|
|
|
horizontalOrigin: "RIGHT",//水平位置
|
|
|
pixelOffset: {
|
|
|
cartesian2: [-12, 0]
|
|
|
},
|
|
|
style: "FILL_AND_OUTLINE",
|
|
|
text: "厦门/高崎",
|
|
|
showBackground: false,
|
|
|
backgroundColor: {
|
|
|
rgba: [112, 89, 57, 200]
|
|
|
}
|
|
|
},
|
|
|
position: {
|
|
|
cartographicDegrees: [118.11783109396191, 24.53852070726468, 0]
|
|
|
}
|
|
|
},
|
|
|
];
|
|
|
var viewer = new Cesium.Viewer("cesiumContainer");
|
|
|
|
|
|
const container = document.getElementById("popup");
|
|
|
const content = document.getElementById("popup-content");
|
|
|
const closer = document.getElementById("popup-closer");
|
|
|
|
|
|
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
|
let cartesian = null;
|
|
|
handler.setInputAction(e => {
|
|
|
let pick = viewer.scene.pick(e.position);
|
|
|
if (Cesium.defined(pick)) {
|
|
|
// let { name, adcode } = pick.id.properties.getValue()
|
|
|
// content.innerHTML = `
|
|
|
// <div>name:${name}</div>
|
|
|
// <div>adcode:${adcode}</div>
|
|
|
// `
|
|
|
if(pick.id.name == "漳州机场"){
|
|
|
let ray = viewer.camera.getPickRay(e.position);
|
|
|
cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
|
|
|
|
|
container.style.visibility = "visible"
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
container.style.visibility = "hidden"
|
|
|
cartesian = null;
|
|
|
}
|
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
|
|
//1、实时更新位置。2、解决滚动不隐藏问题
|
|
|
viewer.scene.postRender.addEventListener(() => {
|
|
|
if (!cartesian) return
|
|
|
//保证弹窗可以随着地球的转动而转动
|
|
|
let windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian);
|
|
|
container.style.left = windowPosition.x - 48 + "px"
|
|
|
container.style.top = windowPosition.y - 88 + "px"
|
|
|
|
|
|
// 相机高度
|
|
|
let camera_height = viewer.camera.positionCartographic.height;
|
|
|
// 相机高度+地球最大半径
|
|
|
let height_total = camera_height + viewer.scene.globe.ellipsoid.maximumRadius
|
|
|
// 实体和相机之间的距离
|
|
|
let distance_camera_entity = Cesium.Cartesian3.distance(viewer.camera.position, cartesian)
|
|
|
|
|
|
if (((distance_camera_entity < height_total)) && camera_height < 50000000) {
|
|
|
container.style.visibility = "visible"
|
|
|
} else {
|
|
|
container.style.visibility = "hidden"
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
// 关闭弹窗
|
|
|
closer.onclick = () => {
|
|
|
container.style.visibility = "hidden"
|
|
|
cartesian = null;
|
|
|
}
|
|
|
|
|
|
// 改变鼠标样式
|
|
|
handler.setInputAction((e) => {
|
|
|
let pick = viewer.scene.pick(e.endPosition);
|
|
|
if (Cesium.defined(pick)) {
|
|
|
viewer._container.style.cursor = "pointer"
|
|
|
} else {
|
|
|
viewer._container.style.cursor = ""
|
|
|
}
|
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
// 天地图
|
|
|
var webKey = "72e2e7be836401af7e79c232285a552e";
|
|
|
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
|
|
|
url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+webKey,
|
|
|
layer: "tdtVecBasicLayer",
|
|
|
style: "default",
|
|
|
format: "image/jpeg",
|
|
|
tileMatrixSetID: "GoogleMapsCompatible",
|
|
|
show: false
|
|
|
}));
|
|
|
// 假设已经有一个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,
|
|
|
}
|
|
|
});
|
|
|
|
|
|
var billboard = 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 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)),
|
|
|
},
|
|
|
});
|
|
|
|
|
|
// 如果需要，可以通过以下代码将Entity置于最顶层
|
|
|
viewer.zoomTo(billboard);
|
|
|
|
|
|
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
|
|
|
viewer.dataSources.add(dataSourcePromise);
|
|
|
viewer.zoomTo(dataSourcePromise);
|
|
|
viewer.zoomTo(viewer.entities);
|
|
|
// viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[4];
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |