在刚开始的入门篇中，我们讲过 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部分。
