cesiumjs

demos

基本步骤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var viewer = new Cesium.Viewer('cesiumContainer', {
sceneMode : Cesium.SceneMode.SCENE3D,
baseLayerPicker:false,
selectionIndicator:false,
navigationHelpButton:false,
homeButton:false,
geocoder:false,
vrButton:true,
timeline : false,
animation : false
});

viewer.scene.imageryLayers.removeAll(); //移除所有底图
viewer.scene.globe.baseColor = Cesium.Color.BLACK; // 设置图片背景颜色为黑色

// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(116.30,
40.0368234863305,
1631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
destination : initialPosition,
orientation : {
heading : initialOrientation.heading,
pitch : initialOrientation.pitch,
roll : initialOrientation.roll
}
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);

//添加geojson文件
var dataSource1 = new Cesium.GeoJsonDataSource();
viewer.dataSources.add(dataSource1);
dataSource1.load('../map_static_files/hdmap_wgs84_road_keypoint.geojson').then(function() {
var entities = dataSource1.entities.values; //获取所有图形元素的值

for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
setStyle(entity);

}
});

api文档

http://cesium.marsgis.cn/forcesium/Build/Documentation/

获取鼠标点击的经纬度值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.canvas.addEventListener('click', function(e){
var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY);
var ellipsoid = viewer.scene.globe.ellipsoid;
var cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
alert(longitudeString + ', ' + latitudeString);
} else {
alert('Globe was not picked');
}

}, false);

获取视界内经纬值

具体见帖子

无地平线的情况

1
2
var posUL = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(0, 0), Cesium.Ellipsoid.WGS84); 
var posLR = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.width, viewer.canvas.height), Cesium.Ellipsoid.WGS84);

视线内有地平线的情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
var viewer = new Cesium.Viewer('cesiumContainer');
var CC3=Cesium.Cartesian3;
var camera = viewer.scene.camera;
var ellipsoid = viewer.scene.globe.ellipsoid;
var rad = 6371000; //Earth average radius
var entityN = viewer.entities.add({
label : {
show : false
}
});
var entityW = viewer.entities.add({
label : {
show : false
}
});
var entityS = viewer.entities.add({
label : {
show : false
}
});
var entityE = viewer.entities.add({
label : {
show : false
}
});
Sandcastle.addToolbarButton('horizon points', function() {

//h 大专栏  cesiumjsorizon basics
var dist=CC3.magnitude(camera.position);
var angle=Math.asin(rad/dist);
var toSurf=Math.sqrt(Math.pow(dist,2)-Math.pow(rad,2));

//'horizon arm'
var rotatee = camera.position.clone();
rotatee = CC3.negate(rotatee,new CC3());
CC3.normalize(rotatee,rotatee);
var rotater = new CC3(0,0,1);
CC3.cross(rotatee,rotater,rotater);
var rotated = new CC3();var cartesian = new CC3();
rotated = rotate(rotatee,rotater,angle);
cartesian = scaleVector(toSurf,rotated);
CC3.add(cartesian,camera.position,cartesian);

//north
dropOne(entityN,cartesian);

//east
cartesian = rotate(cartesian,rotatee,Math.PI/2); //rotatee now rotater
dropOne(entityE,cartesian);

//south
cartesian = rotate(cartesian,rotatee,Math.PI/2); //rotatee now rotater
dropOne(entityS,cartesian);

//west
cartesian = rotate(cartesian,rotatee,Math.PI/2); //rotatee now rotater
dropOne(entityW,cartesian);
});
function dropOne(entity,cartesian)
{
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);

entity.position = cartesian;
entity.label.show = true;
entity.label.text = '(' + longitudeString + ', ' + latitudeString + ')';
} else {
entity.label.show = false;
}
}
function rotate(rotatee,rotater,angle)
{
//rotater: unit vector, angle:radians
//CCW looking from vector tip to vector base
var CC3=Cesium.Cartesian3;var rotated=new CC3();
var c = Math.cos(angle);var s = Math.sin(angle);
var dotScale = CC3.dot(rotatee,rotater,new CC3());
var rotaterScaled = scaleVector(dotScale,rotater);
var vPerpAxis = CC3.subtract(rotatee,rotaterScaled,new CC3()); //using Pythagoras theorem
var comp1 = scaleVector(c,vPerpAxis);
var vPerpPerpAxis = CC3.cross(rotater,vPerpAxis,new CC3()); //perp to both of these
var comp2 = scaleVector(s,vPerpPerpAxis);
return addVectors([rotaterScaled,comp1,comp2]);
}
function scaleVector(scale,vector)
{
var temp = new Cesium.Cartesian3();
temp.x=scale*vector.x;temp.y=scale*vector.y;temp.z=scale*vector.z;
return temp;
}
function addVectors(vectors)
{
var resultant=new Cesium.Cartesian3(0,0,0);
var i=0;while(i<vectors.length)
{
resultant.x+=vectors[i].x;
resultant.y+=vectors[i].y;
resultant.z+=vectors[i].z;
i+=1;
}
return resultant;
}

获取当前地图中心点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
getPosition(){
if (viewer.scene.mode == 3) {
var windowPosition = new Cesium.Cartesian2(viewer.container.clientWidth / 2, viewer.container.clientHeight / 2);
var pickRay = viewer.scene.camera.getPickRay(windowPosition);
var pickPosition = viewer.scene.globe.pick(pickRay, viewer.scene);
var pickPositionCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
console.log(pickPositionCartographic.longitude * (180 / Math.PI));
console.log(pickPositionCartographic.latitude * (180 / Math.PI));
} else if (viewer.scene.mode == 2) {
var camPos = viewer.camera.positionCartographic;
console.log(camPos.longitude * (180 / Math.PI));
console.log(camPos.latitude * (180 / Math.PI));
}
};

显示/隐藏entities

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var entities = viewer.entities;
//Create Entity "folders" to allow us to turn on/off entities as a group.
var spheres = entities.add(new Cesium.Entity());
var boxes = entities.add(new Cesium.Entity());
var ellipsoids = entities.add(new Cesium.Entity());
//Create the entities and assign each entity's parent to the group to which it belongs.
for (var i = 0; i < 5; ++i) {
var height = 100000.0 + (200000.0 * i);
entities.add({
parent : boxes,
position : Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),
box : {
dimensions : new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
material : Cesium.Color.fromRandom({alpha : 1.0})
}
});
entities.add({
parent : ellipsoids,
position : Cesium.Cartesian3.fromDegrees(-102.0, 45.0, height),
ellipsoid : {
radii : new Cesium.Cartesian3(45000.0, 45000.0, 90000.0),
material : Cesium.Color.fromRandom({alpha : 1.0})
}
});
entities.add({
parent : spheres,
position : Cesium.Cartesian3.fromDegrees(-98.0, 45.0, height),
ellipsoid : {
radii : new Cesium.Cartesian3(67500.0, 67500.0, 67500.0),
material : Cesium.Color.fromRandom({alpha : 1.0})
}
});
}
spheres.show = true; //显示
spheres.show = false; //隐藏

info

1
2
3
4
5
6
7
8
9
10
11
12
//设置自己的info box
var a= 5;
var b =6;
var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
'<tr><th>' + "Longitude" + '</th><td>' + a + '</td></tr>' +
'<tr><th>' + "Latitude" + '</th><td>' + b + '</td></tr>' +
'</tbody></table>';
entity.description = description;

// 关闭沙箱安全权限
var iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
原文地址:https://www.cnblogs.com/lijianming180/p/12366487.html