Cesium开发工具篇 | 01组件重写
在刚开始的入门篇中，我们讲过 Cesium 小组件的显隐，感兴趣的小伙伴可以查看我前面写过的文章 Cesium初始化界面介绍及相关小组件显隐 。那问题来了，这些组件除了能控制显隐，是否能在不修改源码的基础上对其进行扩展重写呢？答案是当然可以！但并不是所有的组件都能重写，本节主要讲解在不修改源码的基础上，如何对以下三个常用的控件进行修改，以达到快速实现实际中业务需求的功能。当然，如果您对 Cesium 源码研究的比较深入，也可以通过修改源码的方式实现。
homeButton组件
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组件
Geocoder 是地理编码的意思，我们常用的 POI 搜索就是就是 Geocoder 的功劳。通过查看 Cesium 源码（Source/Widgets/Geocoder/GeocoderViewModel.js 第73行），我们发现Cesium 默认采用的是 Bing 地图服务来实现地理编码的功能，并且是通过 geocode 方法实现的。那么我们就可以通过覆写 geocoder 方法的方式来实现自定义的地理编码服务，下面我们重写geocode方法，将 Cesium 默认的 Bing 地图服务改为OSM地图服务。
function OpenStreetMapNominatimGeocoder() {} OpenStreetMapNominatimGeocoder.prototype.geocode = function (input) { var url = "https://nominatim.openstreetmap.org/search"; var resource = new Cesium.Resource({ url: url, queryParameters: { format: "json", q: input, }, }); return resource.fetchJson().then(function (results) { var bboxDegrees; return results.map(function (resultObject) { bboxDegrees = resultObject.boundingbox; return { displayName: resultObject.display_name, destination: Cesium.Rectangle.fromDegrees( bboxDegrees[2], bboxDegrees[0], bboxDegrees[3], bboxDegrees[1] ), }; }); }); }; var viewer = new Cesium.Viewer("cesiumContainer", { geocoder: new OpenStreetMapNominatimGeocoder(), });BaseLayerPicker组件
Cesium为我们提供了默认的底图、地形图的选择面板，通过修改baseLayerPicker的属性ture或false来控制显隐，通过选择面板中的底图或地形图来实现对应图层的切换与显示。Cesum 提供的默认选择面板如下图所：
这些图层都是在线的资源，如果是离线环境，或者是只显示客户提供的几个图层数据，我们该如何实现呢。要实现这个功能，首先，我们看一下 BaseLayerPicker 的主要逻辑关系图，如下图。
从上图我们可以看出，对于开发者而言，要实现不同的ImageryProvider，只需要提供不同的ProviderViewModel，比如BingMap、OSM、ArcGIS、GoogleMaps的，这样在BaseLayerPicker的UI中，就会有多个Provider供用户选择，而交互则由BaseLayerPickerViewModel类负责，用户并不需要关心内部的实现，BaseLayerPickerViewModel类已经帮我们都实现了。下面我们利用 BaseLayerPicker 的逻辑关系，实现自定义的 ImageryProvider（高德矢量图）和 TerrainPovider（ArcGIS地形），并将其显示在选择器面板中。下面为核心代码和结果截图。
// 自定义影像图层 var imageProviderVMs = []; let gaodeImageProvider = new Cesium.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"], }); var gaodeVM = new Cesium.ProviderViewModel({ name: "高德矢量", iconUrl: Cesium.buildModuleUrl( "Widgets/Images/ImageryProviders/openStreetMap.png" ), tooltip: "高德矢量 地图服务", creationFunction: function () { return gaodeImageProvider; }, }); imageProviderVMs.push(gaodeVM); viewer.baseLayerPicker.viewModel.imageryProviderViewModels = imageProviderVMs; // 自定义地形图层 var terrainProviderVMs = []; var terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({ url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer", token: "KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg..", }); var arcgisVM = new Cesium.ProviderViewModel({ name: "ArcGIS地形", iconUrl: Cesium.buildModuleUrl( "Widgets/Images/TerrainProviders/Ellipsoid.png" ), tooltip: "ArcGIS地形服务", creationFunction: function () { return terrainProvider; }, }); terrainProviderVMs.push(arcgisVM); viewer.baseLayerPicker.viewModel.terrainProviderViewModels = terrainProviderVMs; 
获取完整代码，可查看本人 GitHub 地址https://github.com/ls870061011/cesium_training/tree/main/examples 中的3_1部分。
作者：GIS李胜
链接：https://www.jianshu.com/p/cc6344a6e12d