cesium等高线_Cesium几个案例介绍

前言

本文为大家介绍几个Cesium的Demo，通过这几个Demo能够对如何使用Cesium有进一步的了解，并能充分理解Cesium的强大之处和新功能。其他的无需多言，如果还不太了解什么是Cesium，可以参见我的另外两篇关于Cesium的博客，下面直接进入正题。

一、 监听HTML控件

在Cesium中可以很方便的监听前台HTML控件，类似C#等语言中的MVVM。

1.1 前台控件

前台控件效果如下：

代码如下：

SRTM

SLOPE

Type

首先创建一个div，js监测此div中的控件，重要的是id。

在此div中创建input，一个或多个input对应js中的一个变量，当然此多个input之间也是相互绑定的关系。如：

此二者均对应js端的srtm变量，第一个是range类型，代表一个slide控件，第二个是一个文本框，二者相互联动，只选择其中一个控件也是可以的。重要的是data-bind属性中value后的变量名称需与js中对应。

当然也可以绑定一个下拉列表框：

这里就对应了js中的两个变量：types和selectedType。前者代表所有的可选列表及其值，后者代表选择的结果。

1.2 后台

首先创建一个viewModel对象，里面包含上述创建的各个变量，如下：

var viewModel = {

srtm: 10,

slope: 5,

types: [{

name: 'type1',

values: '100'

}, {

name: 'type2',

values: '200'

}

],

selectedType: undefined

};

而后对此变量进行监控并绑定到前台的相应控件：

Cesium.knockout.track(viewModel); // 跟踪此Model

var toolbar = document.getElementById('toolbar'); // 获取前端监控div

Cesium.knockout.applyBindings(viewModel, toolbar); // 绑定监控

这样就可以监听控件的变化事件：

Cesium.knockout.getObservable(viewModel, 'srtm').subscribe(function(value) {

...

});

可以对此值进行处理比如发送到后台或者请求相应的瓦片图层等等。不过下拉列表框的情况稍微复杂点：

Cesium.knockout.getObservable(viewModel, 'selectedType').subscribe(function(options) {

var values = options.values;

...

});

其实也就是多了一步，在定义types的时候除了name变量我们还定义了values变量，此处就需要通过options.values来取出此值，其他不变。

二、 根据地形瓦片直接绘制高程、坡度及等高线

这是Cesium 1.4.0版新添加的功能，所以一定要更新到此版本。只需要正确加载地形瓦片，Cesium可以自动算出高程设色瓦片、坡