最近有需求，Cesium 叠加 Geoserver 缓存瓦片，也就是 WMTS 瓦片，本来想直接使用 Tomcat 之类的容器发布瓦片服务再叠加。

后来发现 Geoserver 的瓦片规则有点不太常规，因此还是使用 Geoserver 的服务来叠加缓存图层。

按老规矩，肯定要试一大堆错的，大概试了小半天，终于搞好了，这里放上成功代码，提供广大 GISer 借鉴参考。

PS：百度搜索的一大堆博客大哥，估计试都没试，直接互相复制的，出现问题几乎都差不多！！！

本示例介绍两种叠加方式，Geoserver Rest 方式和标准 WMTS 方式，推荐使用 标准 WMTS 方式 加载。

另外，介绍加载 WMS、WFS、KML 资源图层，因加载容易，不做过多介绍，详见代码及示例。

再次强调一下：地址必须设置正确，尤其是{TileMatrixSet}:{TileMatrix}！很多博客都错误，导致加载失败！！！

再次强调一下：style : ‘raster’ 是必填的！很多博客都没设置参数，导致加载失败！！！

Cesium 使用 Geoserver Rest 方式叠加 WMTS 缓存图层

这里强调一下，注意看注释说明，style : ‘raster’ 是 必填的必填的必填的 ！

Rest 方式叠加，需要放开权限，否则访问瓦片 需要填写用户密码，这里不做详细介绍，感兴趣的可以研究一下。

这里放上核心代码：

let layerWMTSRest = new Cesium.WebMapTileServiceImageryProvider({
    // 注意：gwc/rest/wmts 很多博客这里提供的是错的
    // 注意：{TileMatrixSet}/{TileMatrixSet}:{TileMatrix} 中间有冒号
    url : 'http://openlayers.vip/geoserver/gwc/rest/wmts/cite:xintai18/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
    // 注意：这里的样式参数必须有
    style : 'raster',
    // 图层不传也可以
    layer:'cite:xintai18',
    // 必填
    format: "image/png",
    // 选填
    maximumLevel: 21,
    // 必填
    tileMatrixSetID : 'EPSG:900913'
});

Cesium 使用标准方式叠加 WMTS 缓存图层

推荐使用标准方式加载 WMTS 图层。

核心代码：

let layerWMTS = new Cesium.WebMapTileServiceImageryProvider({
    url: 'http://openlayers.vip/geoserver/gwc/service/wmts',
    layer: layerName || 'cite:xintai18',
    // 强调一下，参数必填，很多博客忽略，导致不能加载成功！
    style: 'raster',
    format: 'image/png',
    tileMatrixSetID: 'EPSG:900913',
    tileMatrixLabels: TileMatrixLabels
});

Cesium 使用标准方式叠加 WMS 图层

cesium 加载 WMS 还是很常见的，这里就不多赘述了，见代码：

// 添加geoserver发布的wms数据
let layerWMS = new Cesium.WebMapServiceImageryProvider({
    url: "http://openlayers.vip/geoserver/cite/wms",
    // 必填
    layers: "cite:xintai18",
    parameters: {
        transparent: true,
        format: "image/png",
        srs: "EPSG:4326",
        // 非必填
        styles: "",
    },
});

Cesium 使用标准方式叠加 WFS 图层

cesium 加载 WFS 还是很常见的，这里就不多赘述了，见代码：

// 这里使用 cesium加载也可以
// 因为本身数据为 4490，cesium不识别，因此使用 ajax 请求之后再渲染
$.ajax({
    //点  坐标：曼哈顿
    url: "http://openlayers.vip/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3At_county_new&maxFeatures=50&outputFormat=application%2Fjson",
    cache: false,
    async: true,
    success: function (data) {
        // 原数据是 4490，这里替换为4326，否则 cesium 不识别4490，会报错
        data.crs.properties.name = data.crs.properties.name.replace("EPSG::4490", "EPSG::4326")
        var datasource = Cesium.GeoJsonDataSource.load(data);
        viewer.dataSources.add(datasource);
    },
    error: function (data) {
        alert("error");
    }
});

Cesium 使用标准方式叠加 KML 数据

cesium 加载 KML 还是很常见的，这里就不多赘述了，见代码：

// 添加geoserver发布的kml数据
var options = {
   camera : viewer.scene.camera,
   canvas : viewer.scene.canvas,
   clampToGround: true //开启贴地
};
viewer.dataSources.add(Cesium.KmlDataSource.load('http://openlayers.vip/geoserver/cite/ows?' +
   'service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3At_county_new&maxFeatures=50&' +
   'outputFormat=application%2Fvnd.google-earth.kml%2Bxml', options)).then(function(dataSource){

   // Get the array of entities
   var neighborhoodEntities = dataSource.entities.values;
   for (var i = 0; i < neighborhoodEntities.length; i++) {
       var entity = neighborhoodEntities[i];

       if (Cesium.defined(entity.polygon)) {

           // 设置颜色
           entity.polygon.material = Cesium.Color.fromRandom({
               red : 0.1,
               maximumGreen : 0.5,
               minimumBlue : 0.5,
               alpha : 0.6
           });
       }
   }

Cesium 叠加 WMTS 缓存图层完整代码

注意：示例代码的资源需要换成自己的。




    
    
    
    
    
    
    Cesium 加载天地图示例
    <script src="./Cesium.js"></script>
    <script src="http://www.openlayers.vip/examples/resources/jquery-3.5.1.min.js"></script>
    
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>













<script>
    // 这个 tk 只能在本域名下使用
    var token = '2b7cbf61123cbe4e9ec6267a87e7442f';
    // 服务域名
    var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
    // 服务负载子域
    var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
    var viewer = new Cesium.Viewer('cesiumContainer', {
        shouldAnimate: true,
        selectionIndicator: true,
        animation: false,       //动画
        homeButton: false,       //home键
        geocoder: false,         //地址编码
        baseLayerPicker: false, //图层选择控件
        timeline: false,        //时间轴
        fullscreenButton: false, //全屏显示
        infoBox: false,         //点击要素之后浮窗
        sceneModePicker: false,  //投影方式  三维/二维
        navigationInstructionsInitiallyVisible: false, //导航指令
        navigationHelpButton: false,     //帮助信息
        selectionIndicator: false, // 选择
        imageryProvider: new window.Cesium.WebMapTileServiceImageryProvider({
            //影像底图
            url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + token,
            subdomains: subdomains,
            layer: "tdtImgLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
            show: true
        })
    });

    viewer.imageryLayers.addImageryProvider(new window.Cesium.WebMapTileServiceImageryProvider({
        //影像注记
        url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + token,
        subdomains: subdomains,
        layer: "tdtCiaLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        show: true
    }));

    // // 叠加国界服务
    var iboMap = new window.Cesium.UrlTemplateImageryProvider({
        url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
        subdomains: subdomains,
        tilingScheme: new window.Cesium.WebMercatorTilingScheme(),
        maximumLevel: 10
    });

    viewer.imageryLayers.addImageryProvider(iboMap);

    // geoserver叠加参数，EPSG码+图层等级
    const TileMatrixLabels = ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2',
        'EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6',
        'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10',
        'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14',
        'EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18'];

    // WMTS图层对象
    let layerWMTS;

    // 标准 WMTS 方式叠加
    function WMTS(layerName) {

        // cesium加载
        // 注意：所有参数必填
        layerWMTS = layerWMTS || viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
            url: 'http://openlayers.vip/geoserver/gwc/service/wmts',
            layer: layerName || 'cite:xintai18',
            // 强调一下，参数必填，很多博客忽略，导致不能加载成功！
            style: 'raster',
            format: 'image/png',
            tileMatrixSetID: 'EPSG:900913',
            tileMatrixLabels: TileMatrixLabels
        }));

        // 调节图层显隐
        layerWMTSRest && (layerWMTSRest.show = false);
        layerWMTS && (layerWMTS.show = true);

        // 定位
        flyToRectangle();
    }

    // WMTSRest图层
    let layerWMTSRest;

    // Rest 方式叠加图层
    function restWMTS() {

        //cesium加载
        layerWMTSRest = layerWMTSRest || viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
            // 注意：gwc/rest/wmts 很多博客这里提供的是错的
            // 注意：{TileMatrixSet}/{TileMatrixSet}:{TileMatrix} 中间有冒号
            url: 'http://openlayers.vip/geoserver/gwc/rest/wmts/cite:xintai18/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
            // 注意：这里的样式参数必须有
            style: 'raster',
            // 图层不传也可以
            layer: 'cite:xintai18',
            // 必填
            format: "image/png",
            // 选填
            maximumLevel: 21,
            // 必填
            tileMatrixSetID: 'EPSG:900913'
        }));

        layerWMTSRest && (layerWMTSRest.show = true);
        layerWMTS && (layerWMTS.show = false);

        flyToRectangle();
    }

    let layerWMS;

    // WMS 图层
    function WMS() {

        // 添加geoserver发布的wms数据
        layerWMS = layerWMS || viewer.imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
            url: "http://openlayers.vip/geoserver/cite/wms",
            // 必填
            layers: "cite:xintai18",
            parameters: {
                transparent: true,
                format: "image/png",
                srs: "EPSG:4326",
                // 非必填
                styles: "",
            },
        }));

        layerWMS && (layerWMS.show = true);
        layerWMTS && (layerWMTS.show = false);
        layerWMTSRest && (layerWMTSRest.show = false);

        flyToRectangle();
    }

    // WFS 图层
    // 这里演示北京区县数据
    function WFS() {

        // 这里使用 cesium加载也可以
        // 因为本身数据为 4490，cesium不识别，因此使用 ajax 请求之后再渲染
        $.ajax({
            //点  坐标：曼哈顿
            url: "http://openlayers.vip/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3At_county_new&maxFeatures=50&outputFormat=application%2Fjson",
            cache: false,
            async: true,
            success: function (data) {
                // 原数据是 4490，这里替换为4326，否则 cesium 不识别4490，会报错
                data.crs.properties.name = data.crs.properties.name.replace("EPSG::4490", "EPSG::4326")
                var datasource = Cesium.GeoJsonDataSource.load(data);
                viewer.dataSources.add(datasource);
            },
            error: function (data) {
                alert("error");
            }
        });

        layerWMS && (layerWMS.show = false);
        layerWMTS && (layerWMTS.show = false);
        layerWMTSRest && (layerWMTSRest.show = false);

        // 定位到北京
        flyToRectangle([
            Cesium.Cartesian3.fromDegrees(
                115.44302181271966,
                39.251141782491445,
                0
            ),
            Cesium.Cartesian3.fromDegrees(
                117.34365657834466,
                40.997967954366445,
                0
            ),
        ]);
    }

    // KML 图层
    // 这里演示北京区县数据
    function KML() {

        var options = {
            camera : viewer.scene.camera,
            canvas : viewer.scene.canvas,
            clampToGround: true //开启贴地
        };
        viewer.dataSources.add(Cesium.KmlDataSource.load('http://openlayers.vip/geoserver/cite/ows?' +
            'service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3At_county_new&maxFeatures=50&' +
            'outputFormat=application%2Fvnd.google-earth.kml%2Bxml', options)).then(function(dataSource){

            // Get the array of entities
            var neighborhoodEntities = dataSource.entities.values;
            for (var i = 0; i < neighborhoodEntities.length; i++) {
                var entity = neighborhoodEntities[i];

                if (Cesium.defined(entity.polygon)) {

                    // 设置颜色
                    entity.polygon.material = Cesium.Color.fromRandom({
                        red : 0.1,
                        maximumGreen : 0.5,
                        minimumBlue : 0.5,
                        alpha : 0.6
                    });
                }
            }

            // 定位到北京
            flyToRectangle([
                Cesium.Cartesian3.fromDegrees(
                    115.44302181271966,
                    39.251141782491445,
                    0
                ),
                Cesium.Cartesian3.fromDegrees(
                    117.34365657834466,
                    40.997967954366445,
                    0
                ),
            ]);
        });

        layerWMS && (layerWMS.show = false);
        layerWMTS && (layerWMTS.show = false);
        layerWMTSRest && (layerWMTSRest.show = false);

        // 定位到北京
        flyToRectangle([
            Cesium.Cartesian3.fromDegrees(
                115.44302181271966,
                39.251141782491445,
                0
            ),
            Cesium.Cartesian3.fromDegrees(
                117.34365657834466,
                40.997967954366445,
                0
            ),
        ]);
    }

    /**
     * @description: 飞行定位到一个矩形
     * @return {*}
     */
    function flyToRectangle(RectangleCD) {

        // 添加定位信息
        RectangleCD = RectangleCD || [
            Cesium.Cartesian3.fromDegrees(
                104.15528644354428,
                30.752166584535513,
                0
            ),
            Cesium.Cartesian3.fromDegrees(
                104.27206271917905,
                30.827572468324576,
                0
            ),
        ];

        var rec = Cesium.Rectangle.fromCartesianArray(RectangleCD);
        var boundingSphere = Cesium.BoundingSphere.fromRectangle3D(rec);
        viewer.camera.flyToBoundingSphere(boundingSphere, {
            duration: 5,
            complete: function () {
            },
            offset: {
                heading: Cesium.Math.toRadians(0.0),
                pitch: Cesium.Math.toRadians(-90),
                range: 0.0,
            },
        });
    }

</script>

在线示例

Cesium 加载 Geoserver 服务资源：Cesium Geoserver

参考博客：

Cesium 加载GeoServer WMTS 服务（请求地址不对）
Cesium入门（五）：加载WMTS瓦片地图服务（没问题）
Cesium加载Geoserver发布的wmts服务（参数不对，有去除权限设置，未试验）
cesium 加载 geoserver wmts 服务（缺少地址，无法参考）
cesium加载geoserver的各种服务（地址不对）
cesium 加载geoserver 的 wms、wmts、wfs、wcs服务（没问题，版本旧）
Cesium入门9 - Loading and Styling Entities - 加载和样式化实体
Cesium中加载Geojson
Cesium中读取本地KML或KMZ文件

Cesium 两种方式加载 Geoserver服务 WMTS以及WMS、WFS、KML资源图层

Cesium 使用 Geoserver Rest 方式叠加 WMTS 缓存图层

Cesium 使用标准方式叠加 WMTS 缓存图层

Cesium 使用标准方式叠加 WMS 图层

Cesium 使用标准方式叠加 WFS 图层

Cesium 使用标准方式叠加 KML 数据

Cesium 叠加 WMTS 缓存图层完整代码

在线示例

相关推荐

取消回复欢迎你发表评论:

如何在安装前及安装后修改黑群晖的Mac地址和Sn系列号

爱折腾的特斯拉车主必看!手把手教你TESLAMATE的备份和恢复

[常用工具] OpenCV_contrib库在windows下编译使用指南

Ubuntu系统Daphne + Nginx + supervisor部署Django项目

WindowsServer2022|配置NTP服务器的命令

WIN11 安装配置 linux 子系统 Ubuntu 图形界面桌面系统

解决Linux终端中“-bash: nano: command not found”问题

NBA 2K25虚拟内存不足/爆内存/内存占用100% 一文速解

Linux 中的文件描述符是什么?（linux 打开文件表文件描述符）

K3s禁用Service Load Balancer，解决获取浏览器IP不正确问题

Cesium 两种方式加载 Geoserver服务 WMTS以及WMS、WFS、KML资源图层

Cesium 使用 Geoserver Rest 方式叠加 WMTS 缓存图层

Cesium 使用标准方式叠加 WMTS 缓存图层

Cesium 使用标准方式叠加 WMS 图层

Cesium 使用标准方式叠加 WFS 图层

Cesium 使用标准方式叠加 KML 数据

Cesium 叠加 WMTS 缓存图层完整代码

在线示例

相关推荐

取消回复欢迎 你 发表评论:

如何在安装前及安装后修改黑群晖的Mac地址和Sn系列号

爱折腾的特斯拉车主必看!手把手教你TESLAMATE的备份和恢复

[常用工具] OpenCV_contrib库在windows下编译使用指南

Ubuntu系统Daphne + Nginx + supervisor部署Django项目

WindowsServer2022|配置NTP服务器的命令

WIN11 安装配置 linux 子系统 Ubuntu 图形界面 桌面系统

解决Linux终端中“-bash: nano: command not found”问题

NBA 2K25虚拟内存不足/爆内存/内存占用100% 一文速解

Linux 中的文件描述符是什么?（linux 打开文件表 文件描述符）

K3s禁用Service Load Balancer，解决获取浏览器IP不正确问题

取消回复欢迎你发表评论:

WIN11 安装配置 linux 子系统 Ubuntu 图形界面桌面系统

Linux 中的文件描述符是什么?（linux 打开文件表文件描述符）