Cesium使用WebMapTileServiceImageryProvider

14 篇文章 0 订阅
12 篇文章 18 订阅

项目上要搞一个切换底图的功能,想着直接在cesium原生的BaseLayerPicker里面去添加。但是有一张底图不是免费的,是要使用第三方token的地质云。于是在此记录一下解决的方法。

直接给到我的是一个带token值的网址链接,格式差不多是这样:

https://网址:端口/xx/xxx/xxx//WMTSServer/1.0.0/xxxxx.xml?参数名=token值

把这个网址放到浏览器里面,返回了一个xml数据的格式。无从下手,刚开始甚至都没有想到使用WebMapTileServiceImageryProvider这个方法。

但是有一张截图,在其他项目上截图的,应该是配置文件的某一部分。它有一个类型指定“OGCWMTS”。于是,我在这篇文章中找到了灵感:

https://blog.csdn.net/thor027/article/details/112236685icon-default.png?t=M4ADhttps://blog.csdn.net/thor027/article/details/112236685获得到的知识点就是,我需要使用WebMapTileServiceImageryProvider去获取,然后它有两种坐标系需要注意。

于是,我又去看了cesium的官方文档对这个方法的解释。于是我找到了示例,并且访问链接地址,同样的返回了一个xml数据。

 我逐一对比,将文档示例中的参数,对照xml文件相应的位置去填。然后试了下,还是没有地图出来。带着疑问我找到了这篇文章:

https://www.freesion.com/article/8229929604/icon-default.png?t=M4ADhttps://www.freesion.com/article/8229929604/然后我瞬间明白了,官网示例为什么会给两个类似地址的服务了。因为xml内容文件里面就有指定的信息。以官网的xml示例举例:

<ResourceURL format="image/jpgpng" resourceType="tile" template="https://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS/tile/1.0.0/USGSShadedReliefOnly/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}"/>

 在xml文件中找到ResourceURL这个标签,然后直接把template的内容,复制到WebMapTileServiceImageryProvider配置项的url里面。format的内容复制到对应的format里面。

找到xml文件中Layer标签里面的<ows:Identifier></ows:Identifier>标签,把里面的内容填入layer里面。

找到xml文件中,layer标签里面的<TileMatrixSet>,把内容填入到tileMatrixSetID

然后新建一个数组,把你找到的EPSG:开头,冒号:加数字结束的字符都放入数组中。填入到tileMatrixLabels里面。

然后看EPSG后面的数字是多少,根据上面的文章,更改tilingScheme对应的方法。

maximumLevel就填入数组的长度。

于是地质云地图就可以出现了。

完整代码:

const dizhiyun_tileMatrix = ['EPSG:4326:0','EPSG:4326:1','EPSG:4326:2','EPSG:4326:3','EPSG:4326:4','EPSG:4326:5','EPSG:4326:6','EPSG:4326:7','EPSG:4326:8','EPSG:4326:9','EPSG:4326:10','EPSG:4326:11','EPSG:4326:12','EPSG:4326:13']
let dizhiyun = new Cesium.WebMapTileServiceImageryProvider({'https://igss.cgs.gov.cn:6160/xxxxxxxxxxxxxxxxx/WMTSServer/1.0.0/xxxxxxxxx/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png?tk=申请的token',

                style: "default",
                format: "PNG",
                layer: "找到的layer内容",
                tileMatrixSetID:"EPSG:    找到的完整内容",
                tileMatrixLabels: dizhiyun_tileMatrix,
                tilingScheme: new Cesium.GeographicTilingScheme({    // 我是4326类型的
                    numberOfLevelZeroTilesX: 2,
                    numberOfLevelZeroTilesY: 1
                }),
                maximumLevel:14    // 我的数组长度是14
        });

总结方法步骤:

1.访问网址是否可以返回数据结果。

2.在xml中找到带有大括号的url地址

3.找到对应的值填入进去

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
除了使用`UrlTemplateImageryProvider`接口加载本地瓦片数据之外,你还可以使用`WebMapTileServiceImageryProvider`接口来加载远程的瓦片数据。这个接口可以通过WMTS服务提供商提供的URL来加载瓦片数据。以下是一个使用`WebMapTileServiceImageryProvider`接口渲染瓦片的示例代码: ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var imageryProvider = new Cesium.WebMapTileServiceImageryProvider({ url : 'http://your.server.com/wmts', layer : 'layerName', style : 'default', format : 'image/jpeg', tileMatrixSetID : 'EPSG:3857', maximumLevel: 19 }); viewer.imageryLayers.addImageryProvider(imageryProvider); ``` 在这个示例中,我们创建了一个`WebMapTileServiceImageryProvider`对象,并将其URL设置为`http://your.server.com/wmts`,这个URL应该指向WMTS服务的地址。我们还指定了一些其他属性,包括瓦片图层的名称(`layer`)、样式(`style`)、格式(`format`)、瓦片矩阵集(`tileMatrixSetID`)和最大级别(`maximumLevel`)等。这些属性的具体取值要根据你所使用的WMTS服务提供商而定。最后,我们将`imageryProvider`对象添加到地图的图层列表中,这样Cesium就会使用这个图层来渲染地球表面。 运行代码,在浏览器中查看结果。此时,Cesium应该会加载远程的瓦片数据,并将其渲染到地球表面。你可以通过调整视角来查看地图的不同部分,以确认瓦片数据是否正确加载并渲染。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值