前言
本文为大家介绍几个Cesium的Demo&＃xff0c;通过这几个Demo能够对如何使用Cesium有进一步的了解&＃xff0c;并能充分理解Cesium的强大之处和新功能。其他的无需多言&＃xff0c;如果还不太了解什么是Cesium&＃xff0c;可以参见我的另外两篇关于Cesium的博客&＃xff0c;下面直接进入正题。
一、 监听HTML控件
在Cesium中可以很方便的监听前台HTML控件&＃xff0c;类似C#等语言中的MVVM。
1.1 前台控件
前台控件效果如下&＃xff1a;
![]()
代码如下&＃xff1a;
首先创建一个div&＃xff0c;js监测此div中的控件&＃xff0c;重要的是id。
在此div中创建input&＃xff0c;一个或多个input对应js中的一个变量&＃xff0c;当然此多个input之间也是相互绑定的关系。如&＃xff1a;
此二者均对应js端的srtm变量&＃xff0c;第一个是range类型&＃xff0c;代表一个slide控件&＃xff0c;第二个是一个文本框&＃xff0c;二者相互联动&＃xff0c;只选择其中一个控件也是可以的。重要的是data-bind属性中value后的变量名称需与js中对应。
当然也可以绑定一个下拉列表框&＃xff1a;
这里就对应了js中的两个变量&＃xff1a;types和selectedType。前者代表所有的可选列表及其值&＃xff0c;后者代表选择的结果。
1.2 后台
首先创建一个viewModel对象&＃xff0c;里面包含上述创建的各个变量&＃xff0c;如下&＃xff1a;
var viewModel &＃61; {
srtm: 10,
slope: 5,
types: [{
name: &＃39;type1&＃39;,
values: &＃39;100&＃39;
}, {
name: &＃39;type2&＃39;,
values: &＃39;200&＃39;
}
],
selectedType: undefined
};
而后对此变量进行监控并绑定到前台的相应控件&＃xff1a;
Cesium.knockout.track(viewModel); // 跟踪此Model
var toolbar &＃61; document.getElementById(&＃39;toolbar&＃39;); // 获取前端监控div
Cesium.knockout.applyBindings(viewModel, toolbar); // 绑定监控
这样就可以监听控件的变化事件&＃xff1a;
Cesium.knockout.getObservable(viewModel, &＃39;srtm&＃39;).subscribe(function(value) {
...
});
可以对此值进行处理比如发送到后台或者请求相应的瓦片图层等等。不过下拉列表框的情况稍微复杂点&＃xff1a;
Cesium.knockout.getObservable(viewModel, &＃39;selectedType&＃39;).subscribe(function(options) {
var values &＃61; options.values;
...
});
其实也就是多了一步&＃xff0c;在定义types的时候除了name变量我们还定义了values变量&＃xff0c;此处就需要通过options.values来取出此值&＃xff0c;其他不变。
二、 根据地形瓦片直接绘制高程、坡度及等高线
这是Cesium 1.4.0版新添加的功能&＃xff0c;所以一定要更新到此版本。只需要正确加载地形瓦片&＃xff0c;Cesium可以自动算出高程设色瓦片、坡度设色瓦片以及等高线。其实也不难理解&＃xff0c;地形瓦片中包含了空三等信息&＃xff0c;根据这些信息自然能够计算出高度图、坡度图以及等高线&＃xff0c;先来看效果&＃xff1a;
![]()
![]()
加载地形瓦片图层无需多言&＃xff0c;前面已经有过介绍&＃xff1a;
viewer.terrainProvider &＃61; new Cesium.CesiumTerrainProvider({
url : &＃39;https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles&＃39;,
requestWaterMask : true,
requestVertexNormals : true
});
然后就可以开始计算高程设色瓦片和坡度设色瓦片以及等高线&＃xff0c;当然此块涉及到的东西太多&＃xff0c;我只能凭借我粗浅的理解简单介绍&＃xff0c;如有错误&＃xff0c;望批评指正&＃xff1a;
首先来看一下生成等高线&＃xff1a;
var contourUniforms &＃61; {};
material &＃61; Cesium.Material.fromType(&＃39;ElevationContour&＃39;);
contourUniforms &＃61; material.uniforms;
contourUniforms.width &＃61; 1;
contourUniforms.spacing &＃61; 500;
contourUniforms.color &＃61; Cesium.Color.RED;
很简单的几行代码&＃xff0c;其中Cesium.Material.fromType函数定义如下&＃xff1a;
Material.fromType &＃61; function(type, uniforms) {
if (!defined(Material._materialCache.getMaterial(type))) {
throw new DeveloperError(&＃39;material with type \&＃39;&＃39; &＃43; type &＃43; &＃39;\&＃39; does not exist.&＃39;);
}
var material &＃61; new Material({
fabric : {
type : type
}
});
if (defined(uniforms)) {
for (var name in uniforms) {
if (uniforms.hasOwnProperty(name)) {
material.uniforms[name] &＃61; uniforms[name];
}
}
}
return material;
};
此函数返回一个Material对象&＃xff0c;根据ElevationContour可以知道这是一个等高线类型的材质。uniforms是glsl着色器语言中的变量&＃xff0c;用于控制对象颜色、位置等等。所以此处可以简单理解为得到ElevationContour类型的unifrom值并将此值作用于场景。Cesium根据此uniform生成相应类型的等高线。
理解了这一点&＃xff0c;高程设色和坡度设色也就明白了。
高程设色如下&＃xff1a;
var shadingUniforms &＃61; {};
material &＃61; Cesium.Material.fromType(&＃39;ElevationRamp&＃39;);
shadingUniforms &＃61; material.uniforms;
shadingUniforms.minHeight &＃61; -414.0;
shadingUniforms.maxHeight &＃61; 8777;
坡度设色如下&＃xff1a;
var shadingUniforms &＃61; {};
material &＃61; Cesium.Material.fromType(&＃39;SlopeRamp&＃39;);
shadingUniforms &＃61; material.uniforms;
二者都需要为shadingUniforms变量添加一个色表&＃xff1a;
shadingUniforms.image &＃61; getColorRamp(selectedShading);
var elevationRamp &＃61; [0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0];
var slopeRamp &＃61; [0.0, 0.29, 0.5, Math.sqrt(2)/2, 0.87, 0.91, 1.0];
function getColorRamp(selectedShading) {
var ramp &＃61; document.createElement(&＃39;canvas&＃39;);
ramp.width &＃61; 100;
ramp.height &＃61; 1;
var ctx &＃61; ramp.getContext(&＃39;2d&＃39;);
var values &＃61; selectedShading &＃61;&＃61;&＃61; &＃39;elevation&＃39; ? elevationRamp : slopeRamp;
var grd &＃61; ctx.createLinearGradient(0, 0, 100, 0);
grd.addColorStop(values[0], &＃39;#000000&＃39;); //black
grd.addColorStop(values[1], &＃39;#2747E0&＃39;); //blue
grd.addColorStop(values[2], &＃39;#D33B7D&＃39;); //pink
grd.addColorStop(values[3], &＃39;#D33038&＃39;); //red
grd.addColorStop(values[4], &＃39;#FF9742&＃39;); //orange
grd.addColorStop(values[5], &＃39;#ffd700&＃39;); //yellow
grd.addColorStop(values[6], &＃39;#ffffff&＃39;); //white
ctx.fillStyle &＃61; grd;
ctx.fillRect(0, 0, 100, 1);
return ramp;
}
对高程和坡度归一化后的值设置颜色。这样就可以正常显示高程设色和坡度设色。
三、 同一场景下显示两个不同的瓦片图层
不是简单的两个图层叠加&＃xff0c;而是真实的分割整个地图&＃xff0c;左右显示两个不同的瓦片图层。效果如下&＃xff1a;
![]()
首先添加两个图层&＃xff0c;第一个创建Viewer的时候设置基础图层&＃xff0c;第二个采用layers.addImageryProvider的方式添加(当然也可以两个都采用此种方式添加)&＃xff0c;具体添加图层的方式参考前面的博客。
layer1 &＃61; layers.addImageryProvider(...);
layer2 &＃61; layers.addImageryProvider(...);
只需要设置layer1或则layer2的splitDirection属性即可&＃xff1a;
layer2.splitDirection &＃61; Cesium.ImagerySplitDirection.LEFT;
当然还需要设置图层分割的位置&＃xff1a;
viewer.scene.imagerySplitPosition &＃61; 0.5;
可以改变此值来改变左右图层的分割位置&＃xff0c;0.5表示在中间。如果需要动态调整分割位置则需要加一个分割器&＃xff0c;监听位置变化事件。整体代码如下&＃xff1a;
前台&＃xff1a;
#slider {
position: absolute;
left: 50%;
top: 0px;
background-color: #D3D3D3;
width: 5px;
height: 100%;
z-index: 9999;
}
#slider:hover {
cursor: ew-resize;
}
后台&＃xff1a;
var viewer &＃61; new Cesium.Viewer(&＃39;cesiumContainer&＃39;, {
baseLayerPicker: false,
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
url : &＃39;https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer&＃39;
})
});
var layers &＃61; viewer.imageryLayers;
var balckMarble &＃61; layers.addImageryProvider(Cesium.createTileMapServiceImageryProvider({
url : &＃39;https://cesiumjs.org/blackmarble&＃39;,
credit : &＃39;Black Marble imagery courtesy NASA Earth Observatory&＃39;,
flipXY : true
}));
balckMarble.splitDirection &＃61; Cesium.ImagerySplitDirection.LEFT;
var slider &＃61; document.getElementById(&＃39;slider&＃39;);
viewer.scene.imagerySplitPosition &＃61; (slider.offsetLeft) / slider.parentElement.offsetWidth;
var handler &＃61; new Cesium.ScreenSpaceEventHandler(slider);
var moveActive &＃61; false;
function move(movement) {
if(!moveActive) {
return;
}
var relativeOffset &＃61; movement.endPosition.x ;
var splitPosition &＃61; (slider.offsetLeft &＃43; relativeOffset) / slider.parentElement.offsetWidth;
slider.style.left &＃61; 100.0 * splitPosition &＃43; &＃39;%&＃39;;
viewer.scene.imagerySplitPosition &＃61; splitPosition;
}
handler.setInputAction(function() {
moveActive &＃61; true;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function() {
moveActive &＃61; true;
}, Cesium.ScreenSpaceEventType.PINCH_START);
handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
handler.setInputAction(function() {
moveActive &＃61; false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function() {
moveActive &＃61; false;
}, Cesium.ScreenSpaceEventType.PINCH_END);
四、 改造geocoder控件
Cesium自带了geocoder控件&＃xff0c;可以检索并定位到某个地址&＃xff0c;原理很简单&＃xff0c;就是后台解析此地址&＃xff0c;根据解析结果将地图切换到该位置。Cesium默认采用的是微软Bing地址解析引擎&＃xff0c;如果我们想要换成其他的如OSM或者我们自己的&＃xff0c;只需要对此控件简单改造即可。示例代码如下&＃xff1a;
/**
* This class is an example of a custom geocoder. It provides geocoding through the OpenStreetMap Nominatim service.
* &＃64;alias OpenStreetMapNominatimGeocoder
* &＃64;constructor
*/
function OpenStreetMapNominatimGeocoder() {
}
/**
* The function called to geocode using this geocoder service.
*
* &＃64;param {String} input The query to be sent to the geocoder service
* &＃64;returns {Promise}
*/
OpenStreetMapNominatimGeocoder.prototype.geocode &＃61; function (input) {
var endpoint &＃61; &＃39;https://nominatim.openstreetmap.org/search?&＃39;;
var query &＃61; &＃39;format&＃61;json&q&＃61;&＃39; &＃43; input;
var requestString &＃61; endpoint &＃43; query;
return Cesium.loadJson(requestString) //请求url获取json数据
.then(function (results) {
var bboxDegrees;
return results.map(function (resultObject) {
bboxDegrees &＃61; resultObject.boundingbox;
return {
displayName: resultObject.display_name,
destination: Cesium.Rectangle.fromDegrees(
bboxDegrees[2],
bboxDegrees[0],
bboxDegrees[3],
bboxDegrees[1]
)
};
});
});
};
var viewer &＃61; new Cesium.Viewer(&＃39;cesiumContainer&＃39;, {
geocoder: new OpenStreetMapNominatimGeocoder()
});
首先创建了一个OpenStreetMapNominatimGeocoder类&＃xff0c;并为其添加了geocode方法&＃xff0c;在此方法中根据输入拼接请求url&＃xff0c;解析结果取出经纬度、名称等内容。这样就实现了我们自己的地名解析器&＃xff0c;其实这就是C#等语言中的父类和继承的关系。
五、 总结
本文介绍了几个Cesium的案例&＃xff0c;都是一些比较有意思和好玩的功能&＃xff0c;后续如果搜集到其他好玩的使用案例&＃xff0c;同样也会总结放出。
京公网安备 11010802041100号