cesium添加天地图,从环境配置到加载天地图

配置过程分为四个部分:

1.配置JDK环境

首先是用cmd检查你的机子有没有java的环境,没有就下载安装。具体方式如下:
JDK下载安装及环境变量配置的图文教程(详解)
亲测可用

2.下载安装Tomcat

Tomcat8安装及配置步骤

3.加载Cesium的helloworld

在启动了Tomcat并能成功进入localhost:8080之后,你需要将cesium的文件夹放在tomcat的websapp里面,8080之后的文件就是从这里开始的,所以Helloworld的地址应该是这样的

http://localhost:8080/cesium/Apps/HelloWorld.html

当能看见地球,就算是成功了。

4.加载天地图

天地图自从今年的一月份开始就需要用key才能获取服务,不过也就是需要注册申请一下就行,地址如下:
申请key
点击这个
cesium添加天地图,从环境配置到加载天地图_第1张图片
应用类型选择浏览器端。
生产key之后,开始cv(方法来自某位大佬,但是找不到文章了,本着分享的态度):

      var TDTURL_CONFIG={
    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=你的key"   //在线天地图影像服务地址(墨卡托投影)
    ,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=你的key"   //在线天地图矢量地图服务(墨卡托投影)
    ,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=你的key"            //在线天地图影像中文标记服务(墨卡托投影)
    ,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=你的key"            //在线天地图矢量中文标记服务(墨卡托投影)
    ,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=你的key"  //在线天地图影像服务地址(经纬度)
    ,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=你的key"   //在线天地图矢量地图服务(经纬度)
    ,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=你的key"      //在线天地图影像中文标记服务(经纬度)
    ,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=你的key"       //在线天地图矢量中文标记服务(经纬度)
};

加入天地图影像:

var viewerObj = new Cesium.Viewer('cesiumContainer',  {
                selectionIndicator: false,
                animation: false,  //是否显示动画控件
                baseLayerPicker: false, //是否显示图层选择控件
                geocoder: false, //是否显示地名查找控件
                timeline: false, //是否显示时间线控件
                sceneModePicker: true, //是否显示投影方式控件
                navigationHelpButton: false, //是否显示帮助信息控件
                infoBox: false,  //是否显示点击要素之后显示的信息
                fullscreenButton:true,
                //天地图影像服务(经纬度)
                imageryProvider:new Cesium.WebMapTileServiceImageryProvider({
                   // url: TDTURL_CONFIG.TDT_VEC_C, //矢量地图
                     url: TDTURL_CONFIG.TDT_IMG_C,
                    layer: "tdtImg_c",
                    style: "default",
                    format: "tiles",
                    tileMatrixSetID: "c",
                    subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"],
                    tilingScheme:new Cesium.GeographicTilingScheme(),
                   tileMatrixLabels:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"],
                    maximumLevel:18,
                    show: false
                })
            });

里面包括了对控件的开关。
中文注记

            //天地图影像中文标记服务(经纬度)
    var tdtCva=new Cesium.WebMapTileServiceImageryProvider({
        url: TDTURL_CONFIG.TDT_CIA_C,
        layer: "tdtCva",
        style: "default",
        format:  "tiles",
        tileMatrixSetID: "c",
        subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"],
        tilingScheme:new Cesium.GeographicTilingScheme(),
       	tileMatrixLabels:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"],
      	maximumLevel:18,
        show: false
    });
    var layers = viewerObj.imageryLayers;
    layers.addImageryProvider(tdtCva);

            //设置初始位置
            viewerObj.camera.setView( {
                destination: Cesium.Cartesian3.fromDegrees(108.961727,34.246506)
            } );

至此,天地图的影像和注记就加载出来了。

你可能感兴趣的:(JavaScript,Cesium,天地图)