customBasePicker.html

﻿<!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/googlemaps.js" data-main="./js/main"></script>
</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 = createGoogleMaps(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 viewer = new Cesium.Viewer('cesiumContainer',{imageryProviderViewModels:providerViewModels});
    }
</script>
</body>