cesium初始化及加载地图

概述

Cesium是一个基于JavaScript的开源框架，可用于在浏览器中绘制3D的地球，并在其上绘制地图（支持多种格式的瓦片服务），该框架不需要任何插件支持，但是浏览器必须支持WebGL。

Cesium支持多种数据可视化方式，可以绘制各种几何图形、导入图片，甚至3D模型。同时，Cesium还支持基于时间轴的动态数据展示，例如，我们可以用它绘制卫星运行轨迹。

cesium初始化参数

var viewer = new Cesium.Viewer('cesiumContainer',{
animation:true, //是否显示动画控制
baseLayerPicker:false,//底图背景选择框
geocoder:false,//右上角查找放大镜
timeline:true,//时间线是否显示
sceneModePicker:false,//二维三维投影方式显示 
navigationHelpButton:false, //取消右上角的问号 
homeButton:false, //首页按钮 
 sceneMode: Cesium.SceneMode.SCENE3D, //2D、3D模式： SCENE2D |MORPHING  
 });

cesium加载地图

1. ArcGIS在线影像底图

var viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false,  //是否显示动画控件
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: true, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: true, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: true,  //是否显示点击要素之后显示的信息
            imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
                url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
            })
        });

2. ArcGIS在线街道底图

var viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false,  //是否显示动画控件
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: true, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: true, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: true,  //是否显示点击要素之后显示的信息
            imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
                url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
            })
        });

3. 高德影像底图

var viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false,  //是否显示动画控件
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: true, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: true, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: true,  //是否显示点击要素之后显示的信息
            imageryProvider : new Cesium.UrlTemplateImageryProvider({
                url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            })
        });

4. 高德街道底图

var viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false,  //是否显示动画控件
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: true, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: true, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: true,  //是否显示点击要素之后显示的信息
            imageryProvider : new Cesium.UrlTemplateImageryProvider({
                url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
//                layer: "tdtVecBasicLayer",
//                style: "default",
//                format: "image/png",
//                tileMatrixSetID: "GoogleMapsCompatible",
//                show: false
            })
        });

5. 加载本地离线地图

var viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false,  //是否显示动画控件
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: true, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: true, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: true,  //是否显示点击要素之后显示的信息
            imageryProvider : new Cesium.UrlTemplateImageryProvider({
                url: "../static/map/{z}/{x}/{y}.jpg",//本地地图路劲,地图可用地图下载器下载
            })
        });

修改场景天空盒

var viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false,  //是否显示动画控件
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: true, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: true, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: true,  //是否显示点击要素之后显示的信息
            imageryProvider : new Cesium.UrlTemplateImageryProvider({
                url: "../static/map/{z}/{x}/{y}.jpg",//本地地图路劲,地图可用地图下载器下载
            }),
            skyBox:new Cesium.SkyBox({
           sources : {
				    positiveX : 'skybox_px.png',//左
				    negativeX : 'skybox_nx.png',//右
				    positiveY : 'skybox_py.png',//下
				    negativeY : 'skybox_ny.png',//上
				    positiveZ : 'skybox_pz.png',//前
				    negativeZ : 'skybox_nz.png'//后
				  }
             })
        });

问题交流群:973849006