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部分。