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

先看效果

1.准备工作

申请天地图密钥(注册天地图账号-选择控制台)
cesium-2.加载天地图服务(影像和标注)_第1张图片

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

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

2.上代码


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载天地图domtitle>
    <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

欢迎各位大佬点星星

你可能感兴趣的:(cesium)