MapGIS Client for JavaScript之开源cesium快速扩展

最新推荐文章于 2025-12-11 16:09:33 发布

原创最新推荐文章于 2025-12-11 16:09:33 发布 · 294 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #MapGIS #制图 #WebGIS #JS #前端

MapGIS Client for JavaScript 专栏收录该内容

41 篇文章

订阅专栏

开源cesium快速扩展

一、介绍

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

本篇内容将介绍开源cesium如何使用MapGIS Client for JavaScript插件进行快速扩展。

二、开发步骤

1.下载

首先从cesium官方网站和MapGIS司马云官方网站分别下载cesium和MapGIS Client for JavaScript。

软件	下载地址
cesium	https://cesium.com/downloads/
MapGIS Client for JavaScript	http://developpackage.oss-cn-hangzhou.aliyuncs.com/MapGIS10/ mapgis-client-for-javascript/mapgis-client-for-javascript-dist-v10.7.4.10.rar

2.拷贝插件

从mapgis-client-for-javascript-dist-v10.7.4.10\cdn\zondyclient路径下拷贝webclient-common.min.js和webclient-cesium-plugin.min.js两个js库。

在这里插入图片描述

从mapgis-client-for-javascript-dist-v10.7.4.10\css路径下拷贝style.css样式文件。
在这里插入图片描述

将下载的cesium库和MapGIS插件放在同一路径下即可进行开发。

在这里插入图片描述

3.初始化cesium球体

cesium原生接口可以正常使用，若需使用插件中的接口可参考MapGIS的开发示例和API文档,其中开发示例标题中带有原生接口的示例代码可供参考。

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

      // 全局变量
      let viewer, wmtsLayer

       // 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
        })
      }

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

 = 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(pro