Cesium加载天地图（含源代码）

Cesium自带的影像没有注记而且影像较老，虽然可以选择加载诸如mapbox这种底图，但是也存在着一定问题，所以选择加载天地图。

1、首先去天地图官网申请key码，http://lbs.tianditu.gov.cn/server/MapService.html，天地图列出了所能提供的服务以及求求示例，我们只需简单修改即可。

天地图服务列表与请求示例

网络上的调取方法：

//天地图URL配置

//在线天地图影像服务地址(墨卡托投影)

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=自己的申请的tk" ;

//在线天地图矢量地图服务(墨卡托投影)

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=自己的申请的tk";

//在线天地图影像中文标记服务(墨卡托投影) 

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=自己的申请的tk"

//在线天地图矢量中文标记服务(墨卡托投影)           

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=自己的申请的tk";

//在线天地图影像服务地址(经纬度)         

var TDT_IMG_C="http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +

    "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +

    "&style=default&format=tiles&tk=自己的申请的tk";

//在线天地图矢量地图服务(经纬度) 

var TDT_VEC_C="http://{s}.tianditu.gov.cn/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0" +

    "&LAYER=vec&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +

    "&style=default&format=tiles&tk=自己的申请的tk";

//在线天地图影像中文标记服务(经纬度) 

var TDT_CIA_C="http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +

    "&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +

    "&style=default&format=tiles&tk=自己的申请的tk"

//在线天地图矢量中文标记服务(经纬度)   

var TDT_CVA_C="http://{s}.tianditu.gov.cn/cva_c/wmts?service=wmts&request=GetTile&version=1.0.0" +

    "&LAYER=cva&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +

    "&style=default&format=tiles&tk=自己的申请的tk"     

2.在Cesium中初始换一个viewer，并加入影像与注记，全部代码如下，引入widgets.css与Cesium.js并添加自己的Ion即可

 

   

   

   

      name="viewport"

      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

    />