加载中…Cesium学习笔记7--Cesium影像服务--BaseLayerPicker使用
(2018-05-10 16:11:26)
标签：
cesium影像服务baselayerpicker使用 |
分类： Cesium |
前几篇博客我们主要学习了cesium内置接口如何操作地图图层，由于图层操作是最基本的操作，cesium自己封装了现成的组件：BaseLayerPicker。本篇博客我们就学习下内置BaseLayerPicker的使用以及如何自定义实现BaseLayerPicker。
var esriMap = new
Cesium.ArcGisMapServerImageryProvider({
url:
'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
enablePickFeatures: false
});
var providerViewModels = [];
var esriMapModel = new
Cesium.ProviderViewModel({
name:
'esri Maps',
iconUrl:
Cesium.buildModuleUrl('./Widgets/Images/ImageryProviders/esriWorldImagery.png'),
tooltip:
'ArcGIS 地图服务
\nhttps://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
creationFunction: function () {
return esriMap;
}
});
providerViewModels.push(esriMapModel);
一
内置BaseLayerPicker
我们在初始化Viewer时，将baseLayerPicker设置为true即可显示BaseLayerPicker控件。我们可以通过 viewer.baseLayerPicker.viewModel.imageryProviderViewModels[6];来设置 BaseLayerPicker的默认数据源。
http://s7/mw690/006pZnPwzy7km29yCzQ06&690
//一：使用cesium内置数据源选择工具： BaseLayerPicker
var viewer = new
Cesium.Viewer('cesiumContainer', {
creditContainer: "creditContainer",
TerrainProvider: null,
selectionIndicator: false,
animation:
false, //是否显示动画控件
baseLayerPicker: true, //是否显示图层选择控件
geocoder:
false, //是否显示地名查找控件
timeline:
false, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox:
false, //是否显示点击要素之后显示的信息
fullscreenButton: true
});
//取消双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//设置homebutton的位置
Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25,
34.56);//Rectangle(west, south, east, north)
//设置初始位置
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55,
3000000)
});
//设置默认地图源
viewer.baseLayerPicker.viewModel.selectedImagery
=
viewer.baseLayerPicker.viewModel.imageryProviderViewModels[6];
二
自定义BaseLayerPicker
除了使用baseLayerPicker中默认的地图数据源，我们可以使用cesium提供的ProviderViewModel接口自己扩展数据源。在初始化viewer时设置imageryProviderViewModels为自定义的providerViewModels。例如我们添加一个esri自定义数据源过程：
1定义ImageryProvider：
2设置ProviderViewModel：
特别注意就是里面的creationFunction，创建关联的ImageryProvider。
下面是最终添加了几种自定义的数据源的baseLayerPicker控件：
http://s8/mw690/006pZnPwzy7km3gkT3117&690
//二：使用自定义数据源
//ArcGisMapServerImageryProvider
var esriMap = new
Cesium.ArcGisMapServerImageryProvider({
url:
'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
enablePickFeatures: false
});
//createOpenStreetMapImageryProvider
var osmMap =
Cesium.createOpenStreetMapImageryProvider({
url:
'https://a.tile.openstreetmap.org/'
});
//MapboxImageryProvider
提供了mapbox.satellite、mapbox.streets、mapbox.streets-basic 三种风格
basic不行
var mboxMap = new
Cesium.MapboxImageryProvider({
mapId:
'mapbox.satellite'
});
//WebMapTileServiceImageryProvider--天地图
tdtMap = new
Cesium.WebMapTileServiceImageryProvider({
url:
'http://t0.tianditu.com/img_w/wmts?',
layer:
'img',
style:
'default',
format:
'tiles',
tileMatrixSetID: 'w',
credit:
new Cesium.Credit('天地图全球影像服务'),
maximumLevel: 18
});
//天地图注记
var tdtVectormap = 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:
"tiandituImgMarker",
style:
"default",
format:
"image/jpeg",
tileMatrixSetID: "tiandituImgMarker",
show:
true,
maximumLevel: 18 //不能超过18
});
//全球1 2级
var globeLocalmap =
Cesium.createTileMapServiceImageryProvider({
url:
'./sampledata/imagery/globe/tiles' //
});
//--------------------------------设置ProviderViewModel-----------------------
var providerViewModels = [];
var esriMapModel = new
Cesium.ProviderViewModel({
name:
'esri Maps',
iconUrl:
Cesium.buildModuleUrl('./Widgets/Images/ImageryProviders/esriWorldImagery.png'),
tooltip:
'ArcGIS 地图服务
\nhttps://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
creationFunction: function () {
return esriMap;
}
});
providerViewModels.push(esriMapModel);
var osmMapModel = new
Cesium.ProviderViewModel({
name: 'osm
Maps',
iconUrl:
Cesium.buildModuleUrl('./Widgets/Images/ImageryProviders/openStreetMap.png'),
tooltip:
'openstreetmap 地图服务 \nhttps://a.tile.openstreetmap.org/',
creationFunction: function () {
return osmMap;
}
});
providerViewModels.push(osmMapModel);
var mboxMapModel = new
Cesium.ProviderViewModel({
name:
'mapbox Maps',
iconUrl:
Cesium.buildModuleUrl('./Widgets/Images/ImageryProviders/mapboxSatellite.png'),
tooltip:
'mapbox 地图服务',
creationFunction: function () {
return mboxMap;
}
});
providerViewModels.push(mboxMapModel);
var tdtMapModel = new
Cesium.ProviderViewModel({
name:
'天地图影像',//tdt Maps
iconUrl:
"sampledata/images/tdt.jpg",//Cesium.buildModuleUrl('./Widgets/Images/ImageryProviders/tdt.jpg'),
tooltip:
'天地图 地图服务\nhttp://t0.tianditu.com/img_w/wmts',
creationFunction: function () {
return tdtMap;
}
});
providerViewModels.push(tdtMapModel);
var tdtvMapModel = new
Cesium.ProviderViewModel({
name:
'天地图注记',//tdtv Maps
iconUrl:
"sampledata/images/tdt.jpg",//Cesium.buildModuleUrl('./Widgets/Images/ImageryProviders/tdt.jpg'),
tooltip:
'天地图注记 地图服务\nhttp://t0.tianditu.com/img_w/wmts',
creationFunction: function () {
return tdtVectormap;
}
});
providerViewModels.push(tdtvMapModel);
var globeLocalMapModel = new
Cesium.ProviderViewModel({
name:
'本地影像',//globelocal Maps
iconUrl:
"sampledata/images/tdt.jpg",//
Cesium.buildModuleUrl('./Widgets/Images/ImageryProviders/tdt.jpg'),
tooltip:
'本地全球 地图服务',
creationFunction: function () {
return globeLocalmap;
}
});
providerViewModels.push(globeLocalMapModel);
var viewer = new
Cesium.Viewer('cesiumContainer', {
//
imageryProvider:globemap, //指定此项 则必须设置：
baseLayerPicker: false
contextOptions: {
webgl: {
alpha: true
}
},
creditContainer: "creditContainer",
selectionIndicator: false,
animation:
false, //是否显示动画控件
//
baseLayerPicker: false, //是否显示图层选择控件
imageryProviderViewModels: providerViewModels,//自定义扩展
geocoder:
false, //是否显示地名查找控件
timeline:
false, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox:
false, //是否显示点击要素之后显示的信息
fullscreenButton: true
});
viewer.scene.backgroundColor =
Cesium.Color.TRANSPARENT;
viewer.scene.globe.baseColor =
Cesium.Color.TRANSPARENT;
//取消双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//设置homebutton的位置
Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25,
34.56);//Rectangle(west, south, east, north)
//设置初始位置
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55,
3000000)
});
工程代码连接：示例源码
我的学习公众号也开通，感兴趣的小伙伴们可以加关注：giserYZ2SS，代码交流小伙伴在公众号发消息，我会一一回复的。
喜欢
0
赠金笔