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

写在前面：

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

1. 实现路线

基础实现步骤脑图

2.项目搭建运行

2.1 基础环境搭建

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

2.2 项目工程结构

项目工程结构

2.3 index.html

content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

三维地形展示融合项目

开始

暂停

经度：

纬度：

视角高：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 : '-12-31T00:12:00.00Z/-01-01T00:00:00.00Z',

isStartIncluded : true,

isStopIncluded : false,

data : "time=1"

}));

time_interval_property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({

iso8601 : '-01-01T00:00:01.00Z/-01-01T12:00:00.00Z',

isStartIncluded : true,

isStopIncluded : false,

data : "time=2"

}));

time_interval_property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({

iso8601 : '-01-01T12:00:01.00Z/-01-02T00:00:00.00Z',

isStartIncluded : true,

isStopIncluded : false,

data : "time=3"

}));

time_interval_property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({

iso8601 : '-01-02T00:00:01.00Z/-01-02T12:00:00.00Z',

isStartIncluded : true,

isStopIncluded : false,

data : "time=4"

}));

time_interval_property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({

iso8601 : '-01-02T12:00:01.00Z/-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