dikongshuju
/
cesium
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

飞行情报区 航线

Browse Source
main
wengxinlei 10 months ago
parent ff76854313
commit 5b43568627
9 changed files with 1411 additions and 419 deletions
Show Stats Download Patch File Download Diff File

BIN
Public/img/icon01.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 521 B

BIN
Public/img/icon02.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 418 B

BIN
Public/img/icon03.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 527 B

BIN
Public/img/icon04.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 955 B

531
ZGZU/index - 副本.html
Unescape Escape View File

@ -0,0 +1,531 @@
<!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>

409
ZGZU/index.html
Unescape Escape View File

@ -6,14 +6,13 @@
<!-- 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"
/>
<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 {
@ -23,22 +22,23 @@
padding: 0;
overflow: hidden;
}
.cesium-viewer-geocoderContainer,
.cesium-home-button,
.cesium-sceneModePicker-wrapper,
.cesium-navigationHelpButton-wrapper{
display:none !important;
.cesium-navigationHelpButton-wrapper {
display: none !important;
}
.cesium-viewer-bottom{
display:none
.cesium-viewer-bottom {
display: none
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
const czml = [
{
const czml = [{
id: "document",
name: "CZML Point",
version: "1.0",
@ -47,21 +47,27 @@
id: "Point 1",
name: "各达山",
position: {
cartographicDegrees: [105.541667, 23.195833, 0],
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.SKYBLUE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
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,
},
},
{
@ -359,6 +365,9 @@
label: {
text: "Point 24",
font: "24px Helvetica",
color: {
rgba: [0, 0, 0, 255],
},
fillColor: Cesium.Color.SKYBLUE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
@ -371,13 +380,16 @@
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",
name: "广州飞行情报区ZGZU",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
105.541667, 23.195833,
@ -407,9 +419,370 @@
105.541667, 23.195833,
]),
width: 4,
material: Cesium.Color.fromCssColorString('#ccc')
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);

2
cesiumjs.html
Unescape Escape View File

@ -12,7 +12,7 @@
<script type="module">
// Your access token can be found at: https://ion.cesium.com/tokens.
// Replace `your_access_token` with your Cesium ion access token.
// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4YjJhMDI5MC0zZTI1LTQ4OTgtYWUzYi1mMThmMzE3NWVkNWQiLCJpZCI6MjI5ODY2LCJpYXQiOjE3MjE2MzI4MjZ9.Bn-EkViB8xQCaq5aO2Kgg-UF0bqrrwBs6B9idWmc3Mc';
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4YjJhMDI5MC0zZTI1LTQ4OTgtYWUzYi1mMThmMzE3NWVkNWQiLCJpZCI6MjI5ODY2LCJpYXQiOjE3MjE2MzI4MjZ9.Bn-EkViB8xQCaq5aO2Kgg-UF0bqrrwBs6B9idWmc3Mc';
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Cesium.Viewer('cesiumContainer', {
terrain: Cesium.Terrain.fromWorldTerrain(),

85
dadian.html
Unescape Escape View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/Cesium/Widgets/widgets.css">
<style>
#map3d{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map3d"></div>
</body>
<script src="/Cesium/Cesium.js"></script>
<script>
viewer = new Cesium.Viewer('map3d', {
selectionIndicator: false,
animation: false,
baseLayerPicker: false,
timeline: false,
sceneModePicker: false,
navigationHelpButton: false,
useDefaultRenderLoop: true,
showRenderLoopErrors: false,
fullscreenButton: false,
infoBox: false,
});
viewer._cesiumWidget._creditContainer.style.display = "none";
viewer.camera.setView({
destination:Cesium.Cartesian3.fromDegrees(116.46,39.92,10000000.0),
}); // 设置初始位置
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(event) {
var earthPosition = viewer.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);
if (Cesium.defined(earthPosition)) {
let ellipsoid = viewer.scene.globe.ellipsoid;
let cartographic = ellipsoid.cartesianToCartographic(earthPosition);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let lon = Cesium.Math.toDegrees(cartographic.longitude);
let params = {
id:'测试'+lon,
name:'text',
lon:lon,
lat:lat
};
alert = AddPoint(params);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
</script>
<script>
let AddPoint = function (params) {
if(params.lon === undefined || params.lat === undefined){
alert('请提供经纬度!');
return;
}
// alert(params.lon+','+params.lat);
console.log(params.lon,params.lat);
let entity = new Cesium.Entity({
id: params.id || `${params.lon}点`,
name:params.name || '点',
show:true,
position:Cesium.Cartesian3.fromDegrees(params.lon, params.lat),
point:new Cesium.PointGraphics ( {
show : true,
pixelSize : params.pixelSize || 5,
heightReference : params.pixelSize || Cesium.HeightReference.NONE,
color : params.color || new Cesium.Color ( 255 , 255 , 0 , 1 ),
outlineColor : params.color || new Cesium.Color ( 0 , 0 , 0 , 0 ),
outlineWidth : params.outlineWidth || 0,
scaleByDistance : params.scaleByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
translucencyByDistance : params.translucencyByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
distanceDisplayCondition : params.translucencyByDistance || new Cesium.DistanceDisplayCondition(0, 4.8e10),
} )
});
viewer.entities.add(entity);
return entity;
}
</script>
</html>

3
index.html
Unescape Escape View File

@ -32,6 +32,9 @@
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer("cesiumContainer");
viewer.camera.setView({
destination:Cesium.Cartesian3.fromDegrees(116.46,39.92,10000000.0),
}); // 设置初始位置
viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[12];
</script>
</body>

Write Preview
Loading…
Cancel
Save