cesium-2.加载天地图服务（影像和标注）

最新推荐文章于 2024-07-08 11:50:59 发布

前端小孟

最新推荐文章于 2024-07-08 11:50:59 发布

阅读量6.8k

点赞数 6

分类专栏： Cesium 文章标签： javascript cesium 天地图服务 cesium加载天地图

本文链接：https://blog.csdn.net/qq_27118895/article/details/105849974

版权

Cesium 专栏收录该内容

7 篇文章 17 订阅

订阅专栏

先看效果

在这里插入图片描述

1.准备工作

申请天地图密钥（注册天地图账号-选择控制台）
在这里插入图片描述

天地图地图服务采用OGC WMTS标准，服务列表见
http://lbs.tianditu.gov.cn/server/MapService.html

WMTS服务接口说明见： http://tdt.fuzhou.gov.cn/help/apipfs/3.htm

2.上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载天地图dom</title>
    <link rel="stylesheet" href="../Cesium/Widgets/widgets.css">
    <script src="../Cesium/Cesium.js"></script>
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>

        let viewer = new Cesium.Viewer("cesiumContainer", {
            terrainProvider: Cesium.createWorldTerrain()
        });



        var TDU_Key = "a89df02c93e5474e9ebeb81a32fcb487"//天地图申请的密钥

        //在线天地图影像服务地址(墨卡托投影)
        var TDT_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=" + TDU_Key;
        //在线天地图矢量地图服务(墨卡托投影) 
        var TDT_VEC_W = "http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
            "&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
            "&style=default&format=tiles&tk=" + TDU_Key;
        //在线天地图影像中文标记服务(墨卡托投影)  
        var TDT_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.jpg&tk=" + TDU_Key
        //在线天地图矢量中文标记服务(墨卡托投影)            
        var TDT_CVA_W = "http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
            "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
            "&style=default.jpg&tk=" + TDU_Key;



        let Img = new Cesium.WebMapTileServiceImageryProvider({   //调用影响中文服务
            url: TDT_IMG_W,//url地址
            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,//最大层级
        })

        viewer.imageryLayers.addImageryProvider(Img)//添加到cesium图层上


        let cia = new Cesium.WebMapTileServiceImageryProvider({   //调用影响中文注记服务
            url: TDT_CIA_W,
            layer: "cia_w",
            style: "default",
            format: "tiles",
            tileMatrixSetID: "GoogleMapsCompatible",
            subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地图8个服务器
            minimumLevel: 0,
            maximumLevel: 18,
        })

        viewer.imageryLayers.addImageryProvider(cia)//添加到cesium图层上

        
    </script>
</body>

</html>

代码放在：https://github.com/weshmily/cesiumPDG

欢迎各位大佬点星星

前端小孟

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
5
评论
cesium-2.加载天地图服务（影像和标注）

先看效果1.准备工作申请天地图密钥（注册天地图账号-选择控制台）天地图地图服务采用OGC WMTS标准，服务列表见http://lbs.tianditu.gov.cn/server/MapService.htmlWMTS服务接口说明见： http://tdt.fuzhou.gov.cn/help/apipfs/3.htm2.上代码<!DOCTYPE html>&...
复制链接

扫一扫