Cesium加载几种离线和在线地图服务

Cesium加载在线天地图服务，arcgis地图服务，Cesium地图服务，加载arcgis离线地图服务，高德离线地图服务
参考资料
1.加载各种地图服务
2.离线高德地图数据采集和加载过程
代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Cesium加载各种地图服务</title>

        <link rel="stylesheet" href="../Build/Cesium/Widgets/widgets.css" />
        <script src="../Build/Cesium/Cesium.js"></script>
    </head>
    <body>
        <div  id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div>
    </body>
    <script>
        var url='http://localhost:8080/geoserver/wms'; //Geoserver URL   
        var viewer = new Cesium.Viewer('cesiumContainer',{ 
            //需要进行可视化的数据源的集合
           animation: false, //是否显示动画控件
            shouldAnimate : true,
            homeButton: false, //是否显示Home按钮
            fullscreenButton: false, //是否显示全屏按钮
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: false, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: true, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: false, //是否显示点击要素之后显示的信息
            requestRenderMode: true, //启用请求渲染模式
            scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
            sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
            fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
            imageryProvider:new Cesium.WebMapServiceImageryProvider({   
                url : url,         
                layers: 'nurc:Arc_Sample'// Here just give layer name   
            })
        });
        var layers = viewer.imageryLayers;  
        /**
         * 加载本地离线高德地图
         * gaodeTitle为加载的tomcat下面的相对路径
         */
        layers.addImageryProvider(createGaodeTileMapServiceImageryProvider());
        function createGaodeTileMapServiceImageryProvider(){
            var gaodeLayer = new Cesium.createTileMapServiceImageryProvider({  
             url : 'http://localhost:8087/gaodeTitle',
             credit:"gaodeTitle"
            }); 
            return gaodeLayer;
        }

        /**
        * 叠合arcgis的离线动态服务
        * @param url ()
        */
        //layers.addImageryProvider(createArcGisImageryProvider());
        function createArcGisImageryProvider(){
            var url="http://localhost:6080/arcgis/rest/services/world/MapServer";
            var slgylayer =  new Cesium.ArcGisMapServerImageryProvider({  
               url : url
            }); 
            slgylayer.alpha = 0.1; //透明度
            //设置图层的亮度  
            slgylayer.brightness = 2.0;  //设置亮度
            return slgylayer;
        }

        /**
         * 加载天地图在线地图
         */
        //layers.addImageryProvider(createTdtiImageryProvider());
        function createTdtiImageryProvider(){
            var tdtImageryProvider=new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.com/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",
            layer: "tdtBasicLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: true
            });
            return tdtImageryProvider;
        }

        /**
         * 加载arcgis在线地图
         */
        //layers.addImageryProvider(createEsriImageryProvider());
        function createEsriImageryProvider(){
            var esriImageryProvider = new Cesium.ArcGisMapServerImageryProvider({
               url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
            });
            return esriImageryProvider;
        }

        /**
         * 加载cesium黑色炫酷地图（地图资源问题未成功）
         */
        //layers.addImageryProvider(createCesiumLayer());
        function createCesiumLayer(){
            var balckMarble = new Cesium.createTileMapServiceImageryProvider({
                url : 'https://cesiumjs.org/blackmarble',
                credit : 'Black Marble imagery courtesy NASA Earth Observatory',
                flipXY : true
            });
            balckMarble.splitDirection = Cesium.ImagerySplitDirection.LEFT;
            return balckMarble;
        }

    </script>
</html>
Cesium加载几种离线和在线地图

Cesium加载几种离线和在线地图服务

猜你喜欢
