cesium-examples/3dmap/examples/10_customBasePicker.html

165 lines
6.9 KiB
HTML

<!--
Custom BasePicker Control: ImageryProviders and TerrainProviders
-->
<!DOCTYPE html>
<head>
<title>Base Picker</title>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script type="text/javascript" src="./js/require.min.js" data-main="./js/main"></script>
<script type="text/javascript" src="./js/imageryproviders/googlemaps.js"></script>
<script type="text/javascript" src="./cesium_ext/ArcGisImageServerTerrainProvider.js"></script>
<style>
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
function onload(Cesium) {
var providerViewModels = [];
var bingMapModel = new Cesium.ProviderViewModel({
name : 'Bing Maps Aerial',
iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/bingAerial.png'),
tooltip : 'Bing Maps aerial imagery \nhttp://www.bing.com/maps',
creationFunction : function() {
return new Cesium.BingMapsImageryProvider({
url : 'https://dev.virtualearth.net',
mapStyle : Cesium.BingMapsStyle.AERIAL
});
}
});
providerViewModels.push(bingMapModel);
var googlemap = createGoogleMapsByAPI(Cesium,{key:"AIzaSyBV9Ir9skml9c2i4iORl_Sa6OwspWtBwbk"});
var googlemapModel = new Cesium.ProviderViewModel({
name : 'Google Maps Aerial',
iconUrl : "./images/googlemaps.png",
tooltip : 'Google Maps Provider',
creationFunction : function() {
return googlemap;
}
});
providerViewModels.push(googlemapModel);
var localModel = new Cesium.ProviderViewModel({
name : 'Local Image',
iconUrl : "./images/local.png",
tooltip : 'Local Image Provider',
creationFunction : function() {
return new Cesium.SingleTileImageryProvider({
url : './images/globe.jpg'
});
}
});
providerViewModels.push(localModel);
var mapBoxModel = new Cesium.ProviderViewModel({
name : 'MapBox Image',
iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/mapboxTerrain.png'),
tooltip : 'MapBox Provider',
creationFunction : function() {
return new Cesium.MapboxImageryProvider({
mapId: 'mapbox.satellite'
});
}
});
providerViewModels.push(mapBoxModel);
providerViewModels.push(new Cesium.ProviderViewModel({
name : 'Open\u00adStreet\u00adMap',
iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png'),
tooltip : 'OpenStreetMap (OSM) is a collaborative project to create a free editable map \
of the world.\nhttp://www.openstreetmap.org',
creationFunction : function() {
return Cesium.createOpenStreetMapImageryProvider({
url : 'https://a.tile.openstreetmap.org/'
});
}
}));
var tdtModel = new Cesium.ProviderViewModel({
name : '天地图',
iconUrl : "./images/tdt.jpg",
tooltip : 'TianDiTu Provider',
creationFunction : function() {
return new Cesium.WebMapTileServiceImageryProvider({
url : 'http://t0.tianditu.com/img_c/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={TileMatrix}&layer=img&style={style}&tilerow={TileRow}&tilecol={TileCol}&tilematrixset={TileMatrixSet}&format=tiles',
layer : 'img',
style : 'default',
format : 'tiles',
tileMatrixSetID : 'c',
credit : new Cesium.Credit('天地图全球影像服务'),
subdomains : ['t0','t1','t2','t3','t4','t5','t6','t7'],
maximumLevel : 15,
tilingScheme : new Cesium.GeographicTilingScheme(),
tileMatrixLabels:['1','2','3','4','5','6','7']
});
}
});
providerViewModels.push(tdtModel);
var tilingScheme = new Cesium.WebMercatorTilingScheme();
var rectangle = tilingScheme.rectangle;
var url = "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"
var arcgis = new Cesium.UrlTemplateImageryProvider({
url: url,
tilingScheme: tilingScheme,
tileWidth: 256,
tileHeight: 256,
minimumLevel: 0,
rectangle: rectangle
});
var arcgisModel = new Cesium.ProviderViewModel({
name : 'ArcGIS',
iconUrl : "./images/arcgis.png",
tooltip : 'ArcGIS Online',
creationFunction : function() {
return arcgis;
}
});
providerViewModels.push(arcgisModel);
var providerTerrainViewModels = [];
providerTerrainViewModels.push(new Cesium.ProviderViewModel({
name : 'WGS84 Ellipsoid',
iconUrl : Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/Ellipsoid.png'),
tooltip : 'WGS84 standard ellipsoid, also known as EPSG:4326',
creationFunction : function() {
return new Cesium.EllipsoidTerrainProvider();
}
}));
providerTerrainViewModels.push(new Cesium.ProviderViewModel({
name : 'STK World Terrain meshes',
iconUrl : Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/STK.png'),
tooltip : 'High-resolution, mesh-based terrain for the entire globe. Free for use on the Internet. Closed-network options are available.\nhttp://www.agi.com',
creationFunction : function() {
return new Cesium.CesiumTerrainProvider({
url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
requestWaterMask : true,
requestVertexNormals : true
});
}
}));
providerTerrainViewModels.push(new Cesium.ProviderViewModel({
name : 'ArcGIS World Terrain meshes',
iconUrl : "./images/arcgis.png",
tooltip : 'High-resolution, mesh-based terrain for the entire globe. Free for use on the Internet. Closed-network options are available.\nhttp://www.agi.com',
creationFunction : function() {
return createArcGisElevation3DTerrainProvider(Cesium);
}
}));
var viewer = new Cesium.Viewer('cesiumContainer',{imageryProviderViewModels:providerViewModels,
terrainProviderViewModels:providerTerrainViewModels
});
}
</script>
</body>