1、完整示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cesium示例</title> <!-- 引用cesium的js和css,天地图的扩展js --> <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script> <script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script> <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css"/> <style type="text/css"> html, body, #tiandituContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body onl oad="loadData()"> <div id="tiandituContainer"> </div> <script> //Cesium官网注册后的授权token,没有token也能使用js库 Cesium.Ion.defaultAccessToken = ""; var viewer; function loadData() { //默认会调用微软virtualearth地图 viewer = new Cesium.Viewer('tiandituContainer',{ animation:false, //是否显示动画控件 homeButton:true, //是否显示home键 geocoder:true, //是否显示地名查找控件,如果设置为true,则无法查询 baseLayerPicker:true, //是否显示图层选择控件 timeline:false, //是否显示时间线控件 fullscreenButton:true, //是否全屏显示 infoBox:true, //是否显示点击要素之后显示的信息 sceneModePicker:true, //是否显示投影方式控件 三维/二维 navigationInstructionsInitiallyVisible:false, //导航指令 navigationHelpButton:false, //是否显示帮助信息控件 selectionIndicator:false, //是否显示指示器组件 }); //隐藏cesium的logo viewer._cesiumWidget._creditContainer.style.display = "none"; //默认的Cesium会加载一个bingMap底图,这个地图网络不太好,一般要先去掉这个默认的 viewer.imageryLayers.remove(viewer.imageryLayers.get(0)); //arcgis在线影像地图 viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({ name:"img_arcgis", url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" })); //天地图注册用户的授权key // var tiandituTk='***'; //天地图-服务负载子域 // var subdomains=['0','1','2','3','4','5','6','7']; //天地图-影像底图 // viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ // url: "http://t{s}.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&tk="+tiandituTk, // subdomains: subdomains, // layer: "tdtImgLayer", // style: "default", // format: "image/jpeg", // tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式 // show: true, // maximumLevel: 18//天地图放大超过18级就会404变灰了 // })); //天地图-影像注记 // viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ // url: "http://t{s}.tianditu.com/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="+tiandituTk, // subdomains: subdomains, // layer: "tdtCiaLayer", // style: "default", // format: "image/jpeg", // tileMatrixSetID: "GoogleMapsCompatible", // show: true, // maximumLevel: 18//天地图放大超过18级就会404变灰了 // })); //将三维球定位到指定位置,camera是相机,是当前视野范围相机 //destination是相机的目标位置,参数是经度、纬度、高度 //orientation是相机朝向 // heading-代表镜头左右方向,正值为右,负值为左 // pitch-代表镜头上下方向,正值为上,负值为下. // roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(114.47004, 37.0904, 20000000), orientation: { heading : Cesium.Math.toRadians(348.4202942851978), pitch : Cesium.Math.toRadians(-89.74026687972041), roll : Cesium.Math.toRadians(0) }, complete:function callback() { // 定位完成之后的回调函数 } }); } </script> </body> </html>
2、cesium的orientation解释
heading-代表镜头左右方向,正值为右,负值为左,360度和0度是一样的
pitch-代表镜头上下方向,正值为上,负值为下.
roll-代表镜头左右倾斜.正值,向右倾斜,负值向左倾斜
3、加载国内其他地图
ImageryProvider
类包含的类型
//影像地图 viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({ url:"http://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}" })); //矢量地图 viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({ url:"http://webst02.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}" }));
加载百度地图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css"/> <script type="text/javascript" src="js/custom/imageryProvider/BaiDuImageryProvider.js"></script> </head> <body> <div id="cesiumContainer"></div> <script> var initCesium=new InitCesium(); var viewer =initCesium.initViewer('cesiumContainer', { }); var img_baidu=new BaiDuImageryProvider({ layer:"vec" }); var layers= viewer.scene.imageryLayers; layers.addImageryProvider(img_baidu); </script> </body> </html>
加载腾讯地图
viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({ url: 'https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229', customTags: { sx: function (imageryProvider, x, y, level) { return x >> 4; }, sy: function (imageryProvider, x, y, level) { return ((1 << level) - y) >> 4; } } })); viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({ url : 'https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=2&version=297' }));