cesium教程1-加载显示地图
作者：互联网
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 类包含的类型
- ArcGisMapServerImageryProvider
- ArcGIS Online和Server的相关服务
- BinaMapsImageryProvider
- Bing地图影像，可以指定mapStyle，详见BingMapsStyle类
- GoogleEarthEnterpriselmageryProvider
- 企业级服务
- GridImageryProvider
- 渲染每一个瓦片内部的格网，了解每个瓦片的精细度
- IonImageryProvider
- Cesium ion REST API提供的影像服务
- MapboxImageryProvider
- Mapbox影像服务，根据 mapId 指定地图风格
- MapboxStyleImageryProvider
- Mapbox影像服务，根据 styleId 指定地图风格
- createOpenStreetMapImageryProvider
- OpenStreetMap提供的影像服务
- SingleTilelmageryProvider
- 单张图片的影像服务，适合离线数据或对影像数据要求并不高的场景下
- TileCoordinatesImageryProvider
- 渲染每一个瓦片的围，方便调试
- TileMapServicelmageryProvider
- 根据MapTiler规范，可自己下载瓦片，发布服务，类似ArcGIS影像服务的过程
- UrlTemplateImageryProvider
- 指定url的format模版，方便用户实现自己的Provider，比如国内的高德，腾讯等影像服务，url都是一个固定的规范，都可以通过该Provider轻松实现。而OSM也是通过该类实现的
- WebMapServiceImageryProvider
- 符合WMS规范的影像服务都可以通过该类封装，指定具体参数实现
- WebMapTileServicelmageryProvider
- 服务WMTS1.0.0规范的影像服务，都可以通过该类实现，比如国内的天地图
//影像地图
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'
}));
标签：教程,imageryLayers,viewer,地图,Cesium,cesium,new,影像,加载 来源： https://www.cnblogs.com/tiandi/p/16589594.html