cesium快速掌握教程 Cesium开发工具篇01组件重写

在刚开始的入门篇中，我们讲过 Cesium 小组件的显隐，感兴趣的小伙伴可以查看我前面写过的文章 Cesium初始化界面介绍及相关小组件显隐 。那问题来了，这些组件除了能控制显隐，是否能在不修改源码的基础上对其进行扩展重写呢？答案是当然可以！但并不是所有的组件都能重写，本节主要讲解在不修改源码的基础上，如何对以下三个常用的控件进行修改，以达到快速实现实际中业务需求的功能。当然，如果您对 Cesium 源码研究得比较深入，也可以通过修改源码的方式实现。

homeButton 功能在实际的应用场景中很常见而且功能也很实用，该组件的主要功能是返回到系统初始化时的位置。默认是整个球的位置，如下图：

但是在实际的业务场景中，一般初始化范围都是某一个城市或园区的位置，如果使用 Cesium 自带的 homeButton 组件，就需要对其进行修改，使我们在点击homeButton时，相机不是定位到Cesium自带的默认位置，而是定位到我们想要的位置。我们该如何修改呢？

1）修改相机的默认矩形范围

Cesium.Camera.DEFAULT_VIEW_RECTANGLE=Cesium.Rectangle.fromDegrees( 110.15, 34.54, 110.25, 34.56 );//Rectangle(west,south,east,north)

2）在 homeButton 的 viewModel 中添加监听事件

if(viewer.homeButton){ viewer.homeButton.viewModel.command.beforeExecute.addEventListener( function(e){ e.cancel=true; //你要飞的位置 viewer.camera.flyTo({ destination:Cesium.Cartesian3.fromDegrees(117.16,32.71,15000.0), }); } ); }

Geocoder 是地理编码的意思，我们常用的 POI 搜索就是就是 Geocoder 的功劳。通过查看 Cesium 源码（Source/Widgets/Geocoder/GeocoderViewModel.js 第73行），我们发现Cesium 默认采用的是 Bing 地图服务来实现地理编码的功能，并且是通过 geocode 方法实现的。那么我们就可以通过覆写 geocoder 方法的方式来实现自定义的地理编码服务，下面我们重写geocode方法，将 Cesium 默认的 Bing 地图服务改为OSM地图服务。

functionOpenStreetMapNominatimGeocoder(){} OpenStreetMapNominatimGeocoder.prototype.geocode=function(input){ varurl="https://nominatim.openstreetmap.org/search"; varresource=newCesium.Resource({ url:url, queryParameters:{ format:"json", q:input, }, }); returnresource.fetchJson().then(function(results){ varbboxDegrees; returnresults.map(function(resultObject){ bboxDegrees=resultObject.boundingbox; return{ displayName:resultObject.display_name, destination:Cesium.Rectangle.fromDegrees( bboxDegrees[2], bboxDegrees[0], bboxDegrees[3], bboxDegrees[1] ), }; }); }); }; varviewer=newCesium.Viewer("cesiumContainer",{ geocoder:newOpenStreetMapNominatimGeocoder(), });

Cesium为我们提供了默认的底图、地形图的选择面板，通过修改baseLayerPicker的属性ture或false来控制显隐，通过选择面板中的底图或地形图来实现对应图层的切换与显示。Cesum 提供的默认选择面板如下图所：

这些图层都是在线的资源，如果是离线环境，或者是只显示客户提供的几个图层数据，我们该如何实现呢。要实现这个功能，首先，我们看一下 BaseLayerPicker 的主要逻辑关系图，如下图。

从上图我们可以看出，对于开发者而言，要实现不同的ImageryProvider，只需要提供不同的ProviderViewModel，比如BingMap、OSM、ArcGIS、GoogleMaps的，这样在BaseLayerPicker的UI中，就会有多个Provider供用户选择，而交互则由BaseLayerPickerViewModel类负责，用户并不需要关心内部的实现，BaseLayerPickerViewModel类已经帮我们都实现了。下面我们利用 BaseLayerPicker 的逻辑关系，实现自定义的 ImageryProvider（高德矢量图）和 TerrainPovider（ArcGIS地形），并将其显示在选择器面板中。下面为核心代码和结果截图。

//自定义影像图层 varimageProviderVMs=[]; letgaodeImageProvider=newCesium.UrlTemplateImageryProvider({ url: "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", subdomains:["1","2","3","4"], }); vargaodeVM=newCesium.ProviderViewModel({ name:"高德矢量", iconUrl:Cesium.buildModuleUrl( "Widgets/Images/ImageryProviders/openStreetMap.png" ), tooltip:"高德矢量地图服务", creationFunction:function(){ returngaodeImageProvider; }, }); imageProviderVMs.push(gaodeVM); viewer.baseLayerPicker.viewModel.imageryProviderViewModels=imageProviderVMs;

//自定义地形图层 varterrainProviderVMs=[]; varterrainProvider=newCesium.ArcGISTiledElevationTerrainProvider({ url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer", token: "KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg..", }); vararcgisVM=newCesium.ProviderViewModel({ name:"ArcGIS地形", iconUrl:Cesium.buildModuleUrl( "Widgets/Images/TerrainProviders/Ellipsoid.png" ), tooltip:"ArcGIS地形服务", creationFunction:function(){ returnterrainProvider; }, }); terrainProviderVMs.push(arcgisVM); viewer.baseLayerPicker.viewModel.terrainProviderViewModels=terrainProviderVMs;

获取完整代码，可查看本人 GitHub 地址https://github.com/ls870061011/cesium_training/tree/main/examples 中的3_1部分。