写在前面：
本次工程主要实现的是cesium基础三维地形加载、视角控制、经纬度显示；重点是实现cesium加载wms图层，并对wms图层进行参数更新，实现动态控制，进一步实现时间地图的展示目的。为时间地图可视化提供了三维显示的思路。中间进行参数控制的时候，需要销毁provider，目前没找到比这个更好的方式，希望能抛砖引玉，共同探讨是否有更高性能的实现方式。
1. 实现路线
基础实现步骤脑图
2.项目搭建运行
2.1 基础环境搭建
在此处不再赘述，请自行百度“NodeJS安装部署”；cesium的文件包可下可不下，如果下载不方便的话，可以直接使用在线的。
2.2 项目工程结构
项目工程结构
2.3 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
<!-- 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 app 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>三维地形展示融合项目</title>
<!-- The Cesium library. -->
<script src="ThirdParty/require.js" defer async="true" ></script>
<script src="ThirdParty/jquery-3.3.1.js"></script>
<script src="ThirdParty/Cesium/Cesium.js"></script>
<!-- Style our app. -->
<link rel="stylesheet" href="index.css" media="screen">
<link rel="stylesheet" href="layui.css">
<!--<link rel="stylesheet" href="./layui/css/layui.css">-->
</head>
<body>
<!-- A container for the Cesium Viewer to live in. -->
<div id="cesiumContainer"></div>
<div id="btn_show" style="width:450px;height:30px;position:absolute;bottom:40px;right:300px;z-index:1;font-size:15px;">
<button class="layui-btn" id="btn_onStarted" >开始</button>
<button class="layui-btn" id="btn_onPaused">暂停</button>
</div>
<!--显示的标注-->
<div id="latlng_show" style="width:450px;height:30px;position:absolute;bottom:40px;right:100px;z-index:1;font-size:15px;">
<div style="width:140px;height:30px;float:left;">
<font size="3" color="white">经度：<span id="longitude_show"></span></font>
</div>
<div style="width:140px;height:30px;float:left;">
<font size="3" color="white">纬度：<span id="latitude_show"></span></font>
</div>
<div style="width:160px;height:30px;float:left;">
<font size="3" color="white">视角高：<span id="altitude_show"></span>km</font>
</div>
</div>
<!--引用的js组件-->
<script src="ThirdParty/layui.js"></script>
<!-- Our app code. -->
<script src="Source/App.js"></script>
</body>
</html>
2.4 App.js
//cesium使用的token
Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNmM1YmJlZS02Mzg3LTQ2MjAtYjRiMi00MDAwOTFkZmZlODgiLCJpZCI6OTA5NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MzQ3OTQ4OX0.HFtKvqdsytW2oyXelYtUwrlfH07BXCJJ_hU0BRj-WUo';
//时间显示间隔为1s
var timeValue=1;
var animationId=null;
var ip="127.0.0.1";
//cesium容器
var viewer=new Cesium.Viewer('cesiumContainer',{
scene3DOnly:true,
selectionIndicator:false,
baseLayerPicker: false
});
//cesium三维地形显示
var terrainProvider=new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(3957),
requestVertexNormals:true,
requestWaterMask : true,
})
viewer.terrainProvider=terrainProvider;
viewer.scene.globe.enableLighting=true;
viewer.scene.globe.depthTestAgainstTerrain = true;
//cesium加载wms底图
var raster_provider = new Cesium.WebMapServiceImageryProvider({
url: 'http://'+ip+':8080/geoserver/main_TS_defo/wms',
layers: 'main_TS_defo:AvgNorResult3_1',
parameters: {
service : 'WMS',
format: 'image/png',
transparent: true,
}
});
viewer.imageryLayers.addImageryProvider(raster_provider);
//添加时间控制属性
var time_interval_property = new Cesium.TimeIntervalCollectionProperty();
time_interval_property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
iso8601 : '2018-12-31T00:12:00.00Z/2019-01-01T00:00:00.00Z',
isStartIncluded : true,
isStopIncluded : false,
data : "time=1"
}));
time_interval_property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
iso8601 : '2019-01-01T00:00:01.00Z/2019-01-01T12:00:00.00Z',
isStartIncluded : true,
isStopIncluded : false,
data : "time=2"
}));
time_interval_property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
iso8601 : '2019-01-01T12:00:01.00Z/2019-01-02T00:00:00.00Z',
isStartIncluded : true,
isStopIncluded : false,
data : "time=3"
}));
time_interval_property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
iso8601 : '2019-01-02T00:00:01.00Z/2019-01-02T12:00:00.00Z',
isStartIncluded : true,
isStopIncluded : false,
data : "time=4"
}));
time_interval_property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
iso8601 : '2019-01-02T12:00:01.00Z/2019-01-03T00:00:00.00Z',
isStartIncluded : true,
isStopIncluded : true,
data : "time=5"
}));
//wms地图参数
var wmsParameters={
service : 'WMS',
format: 'image/png',
transparent: true,
cql_filter:'time=2'
}
//加载具有指定参数的wms图层
var vector_provider = new Cesium.WebMapServiceImageryProvider({
url: 'http://'+ip+':8080/geoserver/main_TS_defo/wms',
layers: 'main_TS_defo:contourline_total',
parameters: wmsParameters
});
//将图层加载到容器中
viewer.imageryLayers.addImageryProvider(vector_provider);
//更新时间地图显示
function updateLayerList() {
if(timeValue<5){
var deleteLayer=viewer.imageryLayers.get(2);
viewer.imageryLayers.remove(deleteLayer);
wmsParameters.cql_filter='time='+timeValue;
console.log(wmsParameters.cql_filter)
vector_provider = new Cesium.WebMapServiceImageryProvider({
url: 'http://'+ip+':8080/geoserver/main_TS_defo/wms',
layers: 'main_TS_defo:contourline_total',
parameters: wmsParameters
});
viewer.imageryLayers.addImageryProvider(vector_provider);
timeValue=timeValue+1;
}else{
var deleteLayer=viewer.imageryLayers.get(2);
viewer.imageryLayers.remove(deleteLayer);
timeValue=1
}
}
//开始按钮控制逻辑
$('#btn_onStarted').click(function(){
stop();
animationId=window.setInterval(
function(){
updateLayerList()
},
2000);
})
//停止按钮控制逻辑
function stop(){
window.clearInterval(animationId);
animationId=null;
}
$('#btn_onPaused').click(function(){
stop();
})
//添加经纬度显示
var longitude_show=document.getElementById('longitude_show');
var latitude_show=document.getElementById('latitude_show');
var altitude_show=document.getElementById('altitude_show');
var canvas=viewer.scene.canvas;
//具体事件的实现
var ellipsoid=viewer.scene.globe.ellipsoid;
var handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction(function(movement){
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
var cartesian=viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
if(cartesian){
//将笛卡尔三维坐标转为地图坐标（弧度）
var cartographic=viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
//将地图坐标（弧度）转为十进制的度数
var lat_String=Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
var log_String=Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
var alti_String=(viewer.camera.positionCartographic.height/1000).toFixed(2);
longitude_show.innerHTML=log_String;
latitude_show.innerHTML=lat_String;
altitude_show.innerHTML=alti_String;
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
3. 项目运行展示
三维时间地图.gif
网友评论