开源cesium快速扩展示例-加载自定义参考系和自定义裁图方案WMTS服务

一、介绍

官方开源cesium库提供标准基础的三维GIS功能，实际项目应用中各类复杂情况如自定义参考系、自定义裁图方案、各类特殊参数、空间分析等均需开发者对开源库进行扩展。为解决此类问题MapGIS Client for JavaScript提供了基础接口、空间分析等各种扩展和优化，能够支持全空间的数据融合、大体量数据承载及渲染、空间数据三维查询和分析等能力。

本篇内容将介绍开源cesium如何使用MapGIS Client for JavaScript插件进行快速扩展加载自定义参考系和自定义裁图方案WMTS服务。

二、开发步骤

1.初始化cesium球体

cesium原生接口可以正常使用，若需使用插件中的接口可参考MapGIS的开发示例和API文档,其中开发示例标题中带有原生接口的示例代码可供参考，该示例详细请参考：http://webclient.smaryun.com/#/modules/cesium/layer/OGCLayer/wmts-mapgis-native。

以下为扩展后调用服务的关键代码，初始化球体和跳转均使用cesium原生接口，调用特殊参数服务的接口为MapGIS扩展接口。

      // 全局变量
      let viewer, wmtsLayer
      //初始化球体
      function initViewer() {
        //初始化地图视图对象
        viewer = new Cesium.Viewer('mapgis-3d-viewer')
      }

2.加载自定义参考系和自定义裁图方案WMTS服务

       // MapGIS函数类
      const { WebMapTileServiceImageryProvider } = zondy.cesium

      // 定义WMTS图层服务的基地址
      const url = 'http://webclient.smaryun.com:8089/igs/rest/services/Tile/HuBei_4326/WMTSServer'

      // 添加WMTS图层
      async function addWMTSLayer() {
        // 参考API: http://webclient.smaryun.com/static/modules/cesium/api/cesium-mapgis/WebMapTileServiceImageryProvider.html
        const provider = await WebMapTileServiceImageryProvider.fromUrl(url)
        viewer.imageryLayers.addImageryProvider(provider)
      }

      // 飞到指定视角
      function flyTo() {
        // 跳转到指定范围
        viewer.camera.flyTo({
          destination: Cesium.Rectangle.fromDegrees(
            -2.778023144855979e-9,
            -89.99999999722198,
            179.99999999444395,
            90
          ),
          duration: 2
        })
      }

    

# 2.加载自定义参考系和自定义裁图方案WMTS服务
```javascript
       // MapGIS函数类
      const { WebMapTileServiceImageryProvider } = zondy.cesium

      // 定义WMTS图层服务的基地址
      const url = 'http://webclient.smaryun.com:8089/igs/rest/services/Tile/HuBei_4326/WMTSS