美文网首页Cesium开源GIS相关
Cesium加载Geoserver发布的WMS、WMTS、TMS

Cesium加载Geoserver发布的WMS、WMTS、TMS

作者: WebGiser | 来源:发表于2019-03-16 13:50 被阅读4次

    Geoserver发布地图服务比较简单,这里不做赘述。

    1、Cesium加载Geoserver发布的WMS服务

    (1)登录Geoserver,点击Layer Preview按钮,在右侧某个图层点击OpenLayers按钮。


    image.png

    (2)在打开的页面中查看wms服务需要的参数


    image.png
    (3)cesium加载wms服务
                var viewer = new Cesium.Viewer('cesiumContainer');
                var wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
                    url : 'http://localhost:8080/geoserver/shp/wms',
                    layers : 'shp:wafangdianshi_0',
                    parameters : {
                        transparent : true,     //是否透明
                        format : 'image/png',
                        srs: 'EPSG:4326',
                        styles:''
                    }
                });
                viewer.imageryLayers.addImageryProvider(wmsImageryProvider);
    

    (4)效果


    image.png

    2、Cesium加载Geoserver发布的WMTS服务

    (1)登录Geoserver,点击GeoServer图标按钮,在右侧WMTS下点击1.0.0按钮。


    image.png

    (2)搜索想要加载的wmts服务名称,找到我们需要的几个Identifier,分别是layerID、styleID、TileMatrixSetID,另外需要位于当前layer标签尾部的ResourceUrl。


    image.png image.png

    (3)查看wmts服务


    image.png image.png

    (4)选择获取tile对象的ResourceURL,style是图层样式,TileMatrixSet是采用瓦片数据集格式,TileMatrix(url需要将{TileMatrix}改为{TileMatrixSet}:{TileMatrix})代表缩放级别,TileRow和TileCol代表着瓦片坐标。
    (5)cesium加载wmts服务

                var viewer = new Cesium.Viewer('cesiumContainer');
                var wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
                    url : 'http://localhost:8080/geoserver/gwc/rest/wmts/wzf:wafangdianshi_0/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
                    layer : 'wzf:wafangdianshi_0',
                    style : '',
                    format : 'image/png',
                    tileMatrixSetID:'EPSG:900913'
                });
                viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);
    

    (6)效果


    image.png

    3、Cesium加载Geoserver发布的TMS服务

    相关文章

      网友评论

        本文标题:Cesium加载Geoserver发布的WMS、WMTS、TMS

        本文链接:https://www.haomeiwen.com/subject/tuvjmqtx.html