09 Cesium—影像服务-2

WorkLee

已于 2022-03-25 17:10:04 修改

阅读量3.9k

点赞数 1

分类专栏： Cesium 文章标签： GIS cesium

于 2022-03-23 15:38:10 首次发布

本文链接：https://blog.csdn.net/lili40342/article/details/123687850

版权

Cesium 专栏收录该内容

22 篇文章 28 订阅

订阅专栏

文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配

影像服务 2

相关介绍请移步影像服务介绍，这里介绍学习使用 WebMapTileServiceImageryProvider、WebMapServiceImageryProvider 和 UrlTemplateImageryProvider 的使用。

WebMapTileServiceImageryProvider

服务 WMTS 规范的影像服务，都可以通过该类实现。比如国内的天地图，天地图影像服务在2020年的时候，需要进行官网注册并获取应用的 key 才能调取服务，请自行注册。

代码片段：

const viewer = new Cesium.Viewer("cesiumContainer");

var td_ken = "天地图申请到的key";

//影像地图
var td_img_w = "http://{s}.tianditu.gov.cn/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=" + td_ken;

viewer.imageryLayers.addImageryProvider(
    new window.Cesium.WebMapTileServiceImageryProvider({
        url: td_img_w,
        layer: "img_w",     //WMTS请求的层名称
        style: "default",   //WMTS请求的样式名称
        format: "tiles",    //MIME类型，用于从服务器检索图像
        tileMatrixSetID: "GoogleMapsCompatible", //用于WMTS请求的TileMatrixSet的标识符
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], //天地图8个服务器
        minimumLevel: 0,    //最小层级
        maximumLevel: 18,   //最大层级
        show: true
    })
);

//影像注记
var td_cia_w = "http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
            "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
            "&style=default&format=tiles&tk=" + td_ken;

viewer.imageryLayers.addImageryProvider(
    new window.Cesium.WebMapTileServiceImageryProvider({
        url: td_cia_w,
        layer: "cia_w",     //WMTS请求的层名称
        style: "default",   //WMTS请求的样式名称
        format: "tiles",    //MIME类型，用于从服务器检索图像
        tileMatrixSetID: "GoogleMapsCompatible", //用于WMTS请求的TileMatrixSet的标识符
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], //天地图8个服务器
        minimumLevel: 0,    //最小层级
        maximumLevel: 18,   //最大层级
        show: true
    })
);

viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.75199, 36.55358, 20000000)
});

效果如下：

WebMapServiceImageryProvider

符合 WMS 规范的影像服务都可以通过该类封装，指定具体参数实现。

实在找不到 WMS 服务，就从网上抄了一段代码，仅供参考。

代码片段：

const viewer = new Cesium.Viewer("cesiumContainer");

var wmsProvider = new Cesium.WebMapServiceImageryProvider({
    url: "https://nationalmap.gov.au/proxy/http://geoserver.nationalmap.nicta.com.au/geotopo_250k/ows",
    layers: "Hydrography:bores",
    parameters: {
        transparent: true,
        format: "image/png",
    }
});

viewer.imageryLayers.addImageryProvider(wmsProvider);

//设置初始位置
viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.75199, 36.55358, 20000000)
});

效果如下：

UrlTemplateImageryProvider

指定 url 的 format 模版，方便用户实现自己的 Provider。比如腾讯、高德等地图影像服务，它们都有固定的 url 规范，都可以通过该 Provider 轻松实现想要的功能。

代码片段：

const viewer = new Cesium.Viewer("cesiumContainer");

var utProvider = new Cesium.UrlTemplateImageryProvider({
    url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=4&version=297" // 腾讯影像
});

viewer.imageryLayers.addImageryProvider(utProvider);

viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.75199, 36.55358, 20000000)
});