Cesium加载三维地形及WMS地图，并实现动态控制显示

写在前面：
本次工程主要实现的是cesium基础三维地形加载、视角控制、经纬度显示；重点是实现cesium加载wms图层，并对wms图层进行参数更新，实现动态控制，进一步实现时间地图的展示目的。为时间地图可视化提供了三维显示的思路。中间进行参数控制的时候，需要销毁provider，目前没找到比这个更好的方式，希望能抛砖引玉，共同探讨是否有更高性能的实现方式。

1. 实现路线

基础实现步骤脑图

2.项目搭建运行

2.1 基础环境搭建

在此处不再赘述，请自行百度“NodeJS安装部署”；cesium的文件包可下可不下，如果下载不方便的话，可以直接使用在线的。

2.2 项目工程结构

项目工程结构

2.3 index.html

    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
    
        
        

        


            开始
            暂停

        
        
        

            

                经度：
            
            

                纬度：
            
            

                视角高：km
            
        
        
        
        
        
    

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