Skip to content

Commit 2eee4fa

Browse files
jiawanlongjiawanlong
committed
新增：坡度、坡向、实时云图等
1 parent 11fd999 commit 2eee4fa

8 files changed

Lines changed: 207 additions & 0 deletions

‎examples/cesiumEx/1.22、根据点获取高度.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!--********************************************************************
2+
* by jiawanlong
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
7+
<head>
8+
<meta charset="UTF-8" />
9+
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
10+
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
11+
</head>
12+
13+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
14+
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
15+
<script type="text/javascript">
16+
17+
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
18+
const viewer = new Cesium.Viewer('map', {});
19+
20+
// 加载地形
21+
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
22+
url: 'http://data.mars3d.cn/terrain'
23+
});
24+
25+
// 监听地形提供者的ready事件
26+
viewer.terrainProvider.readyPromise.then(function (terrainProvider) {
27+
console.log('地形已加载完成.');
28+
getHeight()
29+
})
30+
31+
32+
function getHeight() {
33+
var positions = [
34+
Cesium.Cartographic.fromDegrees(120.925145, 27.988257),
35+
Cesium.Cartographic.fromDegrees(87.0, 28.0)
36+
];
37+
38+
// 粗略获取高度
39+
var promise = Cesium.sampleTerrain(viewer.terrainProvider, 11, positions);
40+
promise.then(function (updatedPositions) {
41+
console.log('sampleTerrain')
42+
console.log(updatedPositions)
43+
});
44+
45+
// 精确获取高度
46+
var promise2 = Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, positions);
47+
promise2.then(function (updatedPositions) {
48+
console.log('sampleTerrainMostDetailed')
49+
console.log(updatedPositions)
50+
});
51+
52+
// 另外一种获取高度方式（非常不准确！！！）
53+
var cartographic = Cesium.Cartographic.fromDegrees(120.925145, 27.988257);
54+
var posi = new Cesium.Cartographic(cartographic.longitude, cartographic.latitude)
55+
var height = viewer.scene.globe.getHeight(posi)
56+
console.log(height)
57+
58+
}
59+
</script>
60+
</body>
61+
62+
</html>

‎examples/cesiumEx/config.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,12 @@ var exampleConfig = {
8686
thumbnail: "楼栋分层.jpg",
8787
fileName: "楼栋分层"
8888
},
89+
{
90+
name: "实时在线云图",
91+
name_en: "实时在线云图",
92+
thumbnail: "实时在线云图.jpg",
93+
fileName: "实时在线云图"
94+
},
8995
// {
9096
// name: "韩国空难",
9197
// name_en: "韩国空难",
@@ -247,6 +253,13 @@ var exampleConfig = {
247253
thumbnail: "1.20、echarts配置.jpg",
248254
fileName: "1.20、echarts配置"
249255
},
256+
{
257+
name: "1.22、根据点获取高度",
258+
name_en: "1.22、根据点获取高度",
259+
thumbnail: "1.22、根据点获取高度.jpg",
260+
fileName: "1.22、根据点获取高度"
261+
},
262+
250263
// {
251264
// name: "相机",
252265
// name_en: "相机",
@@ -721,6 +734,18 @@ var exampleConfig = {
721734
thumbnail: "4.1.11、单体化.jpg",
722735
fileName: "4.1.11、单体化"
723736
},
737+
{
738+
name: "4.1.12、坡度分析",
739+
name_en: "4.1.12、坡度分析",
740+
thumbnail: "4.1.12、坡度分析.jpg",
741+
fileName: "4.1.12、坡度分析"
742+
},
743+
{
744+
name: "4.1.13、坡向分析",
745+
name_en: "4.1.13、坡向分析",
746+
thumbnail: "4.1.13、坡向分析.jpg",
747+
fileName: "4.1.13、坡向分析"
748+
},
724749
]
725750
},
726751
"ma870o98p6": {

‎examples/cesiumEx/img/1.22、根据点获取高度.jpg‎

5.52 KB
Loading

‎examples/cesiumEx/img/2.1.16、mapbox底图.jpg‎

4.36 KB
Loading

‎examples/cesiumEx/img/4.1.12、坡度分析.jpg‎

3.38 KB
Loading

‎examples/cesiumEx/img/4.1.13、坡向分析.jpg‎

3.95 KB
Loading

‎examples/cesiumEx/img/实时在线云图.jpg‎

4.89 KB
Loading

‎examples/cesiumEx/实时在线云图.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!--********************************************************************
2+
* by jiawanlong
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
7+
<head>
8+
<meta charset="UTF-8" />
9+
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
10+
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
11+
<script src="./echarts/5.4.3/echarts.min.js"></script>
12+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
13+
</head>
14+
15+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
16+
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
17+
<div style=" position: absolute;bottom: 150px; width: 100%; left: 0%; z-index: 1000;">
18+
<div id="timelines" style="width: 100%;height:50px;"></div>
19+
</div>
20+
<div style=" position: absolute;
21+
right: 0;
22+
bottom: 32px;
23+
z-index: 100;
24+
background: #373434fa;
25+
color: white;
26+
padding: 0 10px;
27+
">
28+
<p id="times" style=" font-size: 24px;"></p>
29+
<p>注：数据来源于中央气象台与国家气象信息中心，中国天气网制图</p>
30+
</div>
31+
<script type="text/javascript">
32+
33+
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
34+
const viewer = new Cesium.Viewer('map', {});
35+
36+
axios.get('https://gswarn.weather.com.cn/app/api/cn_scw_radar_cloud?type=satellite')
37+
.then((response) => {
38+
init(response.data.l);
39+
})
40+
function init(ddd) {
41+
let arr1 = []
42+
let arr2 = []
43+
ddd.forEach((k)=>{
44+
arr1.push(k.l1)
45+
arr2.push(k.l2)
46+
})
47+
arr1 = arr1.reverse()
48+
arr2 = arr2.reverse()
49+
50+
let arrTileLayer = [];
51+
const urlArr = arr2;
52+
for (let i = 0, len = urlArr.length; i < len; i++) {
53+
var imageryProvider = new Cesium.SingleTileImageryProvider({
54+
url: urlArr[i],
55+
rectangle: Cesium.Rectangle.fromDegrees(63.05754, 4.432541, 136.963346, 54.174859),
56+
});
57+
58+
let options = {
59+
alpha: 0
60+
}
61+
var imageryLayer = new Cesium.ImageryLayer(imageryProvider, options);
62+
viewer.imageryLayers.add(imageryLayer)
63+
64+
arrTileLayer.push(imageryLayer);
65+
}
66+
67+
var myChart = echarts.init(document.getElementById('timelines'));
68+
69+
// echarts时间轴，超级强大！
70+
var option = {
71+
baseOption: {
72+
timeline: {
73+
axisType: 'category',
74+
autoPlay: true,
75+
playInterval: 1000,
76+
data: arr1,
77+
label: {
78+
formatter: function (s) {
79+
return new Date(s).getHours() + "-" + new Date(s).getSeconds()
80+
}
81+
}
82+
}
83+
}
84+
};
85+
86+
myChart.setOption(option);
87+
88+
myChart.on('timelinechanged', function (event) {
89+
// console.log('当前:', event);
90+
// console.log('当前索引:', event.currentIndex);
91+
document.getElementById('times').innerHTML = "当前时间: "+ arr1 [event.currentIndex]
92+
closeAll();
93+
arrTileLayer[event.currentIndex].alpha = 1;
94+
});
95+
96+
function closeAll() {
97+
arrTileLayer.forEach((k, i) => {
98+
arrTileLayer[i].alpha = 0;
99+
})
100+
}
101+
102+
viewer.camera.flyTo({
103+
destination: Cesium.Cartesian3.fromDegrees(110.511154, 29.362943, 5531517.4),
104+
duration: 2,
105+
orientation: {
106+
heading: Cesium.Math.toRadians(348.3), // 水平旋转，围绕Y轴，0为正北方向
107+
pitch: Cesium.Math.toRadians(-89.8), // 上下旋转，围绕X轴，-90为俯视地面
108+
roll: 0.0 // 视口的翻滚角度，围绕Z轴，0为不翻转
109+
},
110+
complete: () => {
111+
112+
}
113+
});
114+
}
115+
116+
117+
</script>
118+
</body>
119+
120+
</html>

0 commit comments

Comments
 (0)