已被阅读 3301 次 | 文章分类:cesium | 2018-09-28 23:11
Cesium针对天地图、ArcGIS、BingMap、MapBox等来源的影像地图服务提供了各自的接口,加载使用非常方便
一:加载原理:
1.天地图影像服务
var layerT=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",
show: false
});
2.天地图影像注记服务
var layerTZ=new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.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",
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
show: false
});
3.Arcgis在线地图服务
esriImageryProvider = new Cesium.ArcGisMapServerImageryProvider({
url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
});
4.cesiumblack
var balckMarble = new Cesium.createTileMapServiceImageryProvider({
url : 'https://cesiumjs.org/blackmarble',
credit : 'Black Marble imagery courtesy NASA Earth Observatory',
flipXY : true
});
5.GoogleMap
var GoogleMap = new Cesium.UrlTemplateImageryProvider({
url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
});
6.OSM
var osm = Cesium.createOpenStreetMapImageryProvider({
url : 'https://stamen-tiles.a.ssl.fastly.net/toner/' //https://stamen-tiles.a.ssl.fastly.net/watercolor/、https://stamen-tiles.a.ssl.fastly.net/toner/
});
7.MapBox:Mapbox需要去官网注册账号,添加一个Token才可以访问地图服务
var mapbox =new Cesium.MapboxImageryProvider({
mapId: 'mapbox.streets', //mapbox提供了三种类型 mapbox.streets mapbox.satellite mapbox.streets-basic
accessToken: 'sk.eyJ1IjoicG9wc3RhciIsImEiOiJjam1rZXc4cXQwYW5vM3BwOWJ3MHd5eXVtIn0.QFM5ceDQ17WwBXVssyVJYA'
});
二:全部代码
1、代码实例
var viewer = new Cesium.CesiumWidget("cesiumContainer");
var layers=viewer.imageryLayers;
document.getElementById('mapserverselect').onchange=function(){
var dom=document.getElementById('mapserverselect');
var value=dom.value;
switch(value){
case 'TDT':
var layerT=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",
show: false
});
layers.addImageryProvider(layerT);
break;
case'TDTZJ':
var layerTZ=new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.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",
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
show: false
});
layers.addImageryProvider(layerTZ);
break;
case 'ArcGIS':
esriImageryProvider = new Cesium.ArcGisMapServerImageryProvider({
url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
});
layers.addImageryProvider(esriImageryProvider);
break;
case 'cesiumBlack':
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;
layers.addImageryProvider(balckMarble);
break;
case 'GoogleMap':
var GoogleMap = new Cesium.UrlTemplateImageryProvider({
url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
});
layers.addImageryProvider(GoogleMap);
break;
case 'osm':
var osm = Cesium.createOpenStreetMapImageryProvider({
url : 'https://stamen-tiles.a.ssl.fastly.net/toner/' //https://stamen-tiles.a.ssl.fastly.net/watercolor/、https://stamen-tiles.a.ssl.fastly.net/toner/
});
layers.addImageryProvider(osm);
break;
case 'mapbox':
var mapbox =new Cesium.MapboxImageryProvider({
mapId: 'mapbox.streets', //mapbox提供了三种类型 mapbox.streets mapbox.satellite mapbox.streets-basic
accessToken: 'sk.eyJ1IjoicG9wc3RhciIsImEiOiJjam1rZXc4cXQwYW5vM3BwOWJ3MHd5eXVtIn0.QFM5ceDQ17WwBXVssyVJYA'
});
layers.addImageryProvider(mapbox);
break;
}
}
3.效果图
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号