cesium/Cesium-Examples
1
0
Fork 0
mirror of https://github.com/jiawanlong/Cesium-Examples.git synced 2025-07-04 15:17:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

新增：坡度、坡向、实时云图等

Browse Source
This commit is contained in:
jiawanlong 2025-03-29 09:30:00 +08:00
parent 11fd999a4a
commit 2eee4fa370
8 changed files with 207 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
examples/cesiumEx/1.22、根据点获取高度.html Normal file
View File

@ -0,0 +1,62 @@
<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
<script type="text/javascript">
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
const viewer = new Cesium.Viewer('map', {});
// 加载地形
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
url: 'http://data.mars3d.cn/terrain'
});
// 监听地形提供者的ready事件
viewer.terrainProvider.readyPromise.then(function (terrainProvider) {
console.log('地形已加载完成.');
getHeight()
})
function getHeight() {
var positions = [
Cesium.Cartographic.fromDegrees(120.925145, 27.988257),
Cesium.Cartographic.fromDegrees(87.0, 28.0)
];
// 粗略获取高度
var promise = Cesium.sampleTerrain(viewer.terrainProvider, 11, positions);
promise.then(function (updatedPositions) {
console.log('sampleTerrain')
console.log(updatedPositions)
});
// 精确获取高度
var promise2 = Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, positions);
promise2.then(function (updatedPositions) {
console.log('sampleTerrainMostDetailed')
console.log(updatedPositions)
});
// 另外一种获取高度方式（非常不准确！！！）
var cartographic = Cesium.Cartographic.fromDegrees(120.925145, 27.988257);
var posi = new Cesium.Cartographic(cartographic.longitude, cartographic.latitude)
var height = viewer.scene.globe.getHeight(posi)
console.log(height)
}
</script>
</body>
</html>

25
examples/cesiumEx/config.js
View File

@ -86,6 +86,12 @@ var exampleConfig = {
thumbnail: "楼栋分层.jpg", thumbnail: "楼栋分层.jpg",
fileName: "楼栋分层" fileName: "楼栋分层"
}, },
{
name: "实时在线云图",
name_en: "实时在线云图",
thumbnail: "实时在线云图.jpg",
fileName: "实时在线云图"
},
// { // {
// name: "韩国空难", // name: "韩国空难",
// name_en: "韩国空难", // name_en: "韩国空难",
@ -247,6 +253,13 @@ var exampleConfig = {
thumbnail: "1.20、echarts配置.jpg", thumbnail: "1.20、echarts配置.jpg",
fileName: "1.20、echarts配置" fileName: "1.20、echarts配置"
}, },
{
name: "1.22、根据点获取高度",
name_en: "1.22、根据点获取高度",
thumbnail: "1.22、根据点获取高度.jpg",
fileName: "1.22、根据点获取高度"
},
// { // {
// name: "相机", // name: "相机",
// name_en: "相机", // name_en: "相机",
@ -721,6 +734,18 @@ var exampleConfig = {
thumbnail: "4.1.11、单体化.jpg", thumbnail: "4.1.11、单体化.jpg",
fileName: "4.1.11、单体化" fileName: "4.1.11、单体化"
}, },
{
name: "4.1.12、坡度分析",
name_en: "4.1.12、坡度分析",
thumbnail: "4.1.12、坡度分析.jpg",
fileName: "4.1.12、坡度分析"
},
{
name: "4.1.13、坡向分析",
name_en: "4.1.13、坡向分析",
thumbnail: "4.1.13、坡向分析.jpg",
fileName: "4.1.13、坡向分析"
},
] ]
}, },
"ma870o98p6": { "ma870o98p6": {

BIN
examples/cesiumEx/img/1.22、根据点获取高度.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
examples/cesiumEx/img/2.1.16、mapbox底图.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
examples/cesiumEx/img/4.1.12、坡度分析.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
examples/cesiumEx/img/4.1.13、坡向分析.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
examples/cesiumEx/img/实时在线云图.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

120
examples/cesiumEx/实时在线云图.html Normal file
View File

@ -0,0 +1,120 @@
<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
<script src="./echarts/5.4.3/echarts.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
<div style=" position: absolute;bottom: 150px; width: 100%; left: 0%; z-index: 1000;">
<div id="timelines" style="width: 100%;height:50px;"></div>
</div>
<div style=" position: absolute;
right: 0;
bottom: 32px;
z-index: 100;
background: #373434fa;
color: white;
padding: 0 10px;
">
<p id="times" style=" font-size: 24px;"></p>
<p>注：数据来源于中央气象台与国家气象信息中心，中国天气网制图</p>
</div>
<script type="text/javascript">
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
const viewer = new Cesium.Viewer('map', {});
axios.get('https://gswarn.weather.com.cn/app/api/cn_scw_radar_cloud?type=satellite')
.then((response) => {
init(response.data.l);
})
function init(ddd) {
let arr1 = []
let arr2 = []
ddd.forEach((k)=>{
arr1.push(k.l1)
arr2.push(k.l2)
})
arr1 = arr1.reverse()
arr2 = arr2.reverse()
let arrTileLayer = [];
const urlArr = arr2;
for (let i = 0, len = urlArr.length; i < len; i++) {
var imageryProvider = new Cesium.SingleTileImageryProvider({
url: urlArr[i],
rectangle: Cesium.Rectangle.fromDegrees(63.05754, 4.432541, 136.963346, 54.174859),
});
let options = {
alpha: 0
}
var imageryLayer = new Cesium.ImageryLayer(imageryProvider, options);
viewer.imageryLayers.add(imageryLayer)
arrTileLayer.push(imageryLayer);
}
var myChart = echarts.init(document.getElementById('timelines'));
// echarts时间轴，超级强大！
var option = {
baseOption: {
timeline: {
axisType: 'category',
autoPlay: true,
playInterval: 1000,
data: arr1,
label: {
formatter: function (s) {
return new Date(s).getHours() + "-" + new Date(s).getSeconds()
}
}
}
}
};
myChart.setOption(option);
myChart.on('timelinechanged', function (event) {
// console.log('当前:', event);
// console.log('当前索引:', event.currentIndex);
document.getElementById('times').innerHTML = "当前时间: "+ arr1 [event.currentIndex]
closeAll();
arrTileLayer[event.currentIndex].alpha = 1;
});
function closeAll() {
arrTileLayer.forEach((k, i) => {
arrTileLayer[i].alpha = 0;
})
}
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(110.511154, 29.362943, 5531517.4),
duration: 2,
orientation: {
heading: Cesium.Math.toRadians(348.3), // 水平旋转，围绕Y轴，0为正北方向
pitch: Cesium.Math.toRadians(-89.8), // 上下旋转，围绕X轴，-90为俯视地面
roll: 0.0 // 视口的翻滚角度，围绕Z轴，0为不翻转
},
complete: () => {
}
});
}
</script>
</body>
</html>