参考文章地址：Cesium调用 ArcGIS Sever 以及 GeoSever 发布的地图服务
cesium测试示例(包括官方的示例)中 arcgis服务都无法访问了
根据原文找到一个在线的可访问服务地址：https://basemap.nationalmap.gov/arcgis/rest/services 使用arcgis server 发布的，点击某一个服务名，在服务页面可以访问其 WMS 、WMTS 格式
把如下代码粘贴到 地址 https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Imagery%20Layers%20Manipulation.html 中页面左侧 JS 代码区域（将其中代码全部替换）
不用害怕代码这么多 这个只是在原案例上增加了 // 添加 WMTS 和 // 添加 WMS 两小段代码
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker : false
});
var imageryLayers = viewer.imageryLayers;
var viewModel = {
layers : [],
baseLayers : [],
upLayer : null,
downLayer : null,
selectedLayer : null,
isSelectableLayer : function(layer) {
return this.baseLayers.indexOf(layer) >= 0;
},
raise : function(layer, index) {
imageryLayers.raise(layer);
viewModel.upLayer = layer;
viewModel.downLayer = viewModel.layers[Math.max(0, index - 1)];
updateLayerList();
window.setTimeout(function() { viewModel.upLayer = viewModel.downLayer = null; }, 10);
},
lower : function(layer, index) {
imageryLayers.lower(layer);
viewModel.upLayer = viewModel.layers[Math.min(viewModel.layers.length - 1, index + 1)];
viewModel.downLayer = layer;
updateLayerList();
window.setTimeout(function() { viewModel.upLayer = viewModel.downLayer = null; }, 10);
},
canRaise : function(layerIndex) {
return layerIndex > 0;
},
canLower : function(layerIndex) {
return layerIndex >= 0 && layerIndex < imageryLayers.length - 1;
}
};
var baseLayers = viewModel.baseLayers;
Cesium.knockout.track(viewModel);
function setupLayers() {
// Create all the base layers that this example will support.
// These base layers aren't really special. It's possible to have multiple of them
// enabled at once, just like the other layers, but it doesn't make much sense because
// all of these layers cover the entire globe and are opaque.
// 添加 WMTS
addBaseLayerOption(
'USGS Shaded Relief (via WMTS)',
new Cesium.WebMapTileServiceImageryProvider({
url : 'http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS',
layer : 'USGSShadedReliefOnly',
style : 'default',
format : 'image/jpeg',
tileMatrixSetID : 'default028mm',
maximumLevel: 19,
credit : 'U. S. Geological Survey'
}));
// 添加 WMS
addBaseLayerOption(
'USGS Shaded Relief (via WMS)',
new Cesium.WebMapServiceImageryProvider({
url : 'https://basemap.nationalmap.gov/arcgis/services/USGSHydroCached/MapServer/WMSServer',
layers : '0',
}));
addBaseLayerOption(
'Bing Maps Aerial',
undefined); // the current base layer
addBaseLayerOption(
'Bing Maps Road',
new Cesium.BingMapsImageryProvider({
url : 'https://dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.ROAD
}));
addBaseLayerOption(
'ArcGIS World Street Maps',
new Cesium.ArcGisMapServerImageryProvider({
url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}));
addBaseLayerOption(
'OpenStreetMaps',
Cesium.createOpenStreetMapImageryProvider());
addBaseLayerOption(
'MapQuest OpenStreetMaps',
Cesium.createOpenStreetMapImageryProvider({
url : 'https://otile1-s.mqcdn.com/tiles/1.0.0/osm/'
}));
addBaseLayerOption(
'Stamen Maps',
Cesium.createOpenStreetMapImageryProvider({
url : 'https://stamen-tiles.a.ssl.fastly.net/watercolor/',
fileExtension: 'jpg',
credit: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
}));
addBaseLayerOption(
'Natural Earth II (local)',
Cesium.createTileMapServiceImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
}));
// Create the additional layers
addAdditionalLayerOption(
'United States GOES Infrared',
new Cesium.WebMapServiceImageryProvider({
url : 'https://mesonet.agron.iastate.edu/cgi-bin/wms/goes/conus_ir.cgi?',
layers : 'goes_conus_ir',
credit : 'Infrared data courtesy Iowa Environmental Mesonet',
parameters : {
transparent : 'true',
format : 'image/png'
}
}));
addAdditionalLayerOption(
'United States Weather Radar',
new Cesium.WebMapServiceImageryProvider({
url : 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?',
layers : 'nexrad-n0r',
credit : 'Radar data courtesy Iowa Environmental Mesonet',
parameters : {
transparent : 'true',
format : 'image/png'
}
}));
addAdditionalLayerOption(
'TileMapService Image',
Cesium.createTileMapServiceImageryProvider({
url : '../images/cesium_maptiler/Cesium_Logo_Color'
}),
0.2);
addAdditionalLayerOption(
'Single Image',
new Cesium.SingleTileImageryProvider({
url : '../images/Cesium_Logo_overlay.png',
rectangle : Cesium.Rectangle.fromDegrees(-115.0, 38.0, -107, 39.75)
}),
1.0);
addAdditionalLayerOption(
'Grid',
new Cesium.GridImageryProvider(), 1.0, false);
addAdditionalLayerOption(
'Tile Coordinates',
new Cesium.TileCoordinatesImageryProvider(), 1.0, false);
}
function addBaseLayerOption(name, imageryProvider) {
var layer;
if (typeof imageryProvider === 'undefined') {
layer = imageryLayers.get(0);
viewModel.selectedLayer = layer;
} else {
layer = new Cesium.ImageryLayer(imageryProvider);
}
layer.name = name;
baseLayers.push(layer);
}
function addAdditionalLayerOption(name, imageryProvider, alpha, show) {
var layer = imageryLayers.addImageryProvider(imageryProvider);
layer.alpha = Cesium.defaultValue(alpha, 0.5);
layer.show = Cesium.defaultValue(show, true);
layer.name = name;
Cesium.knockout.track(layer, ['alpha', 'show', 'name']);
}
function updateLayerList() {
var numLayers = imageryLayers.length;
viewModel.layers.splice(0, viewModel.layers.length);
for (var i = numLayers - 1; i >= 0; --i) {
viewModel.layers.push(imageryLayers.get(i));
}
}
setupLayers();
updateLayerList();
//Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);
Cesium.knockout.getObservable(viewModel, 'selectedLayer').subscribe(function(baseLayer) {
// Handle changes to the drop-down base layer selector.
var activeLayerIndex = 0;
var numLayers = viewModel.layers.length;
for (var i = 0; i < numLayers; ++i) {
if (viewModel.isSelectableLayer(viewModel.layers[i])) {
activeLayerIndex = i;
break;
}
}
var activeLayer = viewModel.layers[activeLayerIndex];
var show = activeLayer.show;
var alpha = activeLayer.alpha;
imageryLayers.remove(activeLayer, false);
imageryLayers.add(baseLayer, numLayers - activeLayerIndex - 1);
baseLayer.show = show;
baseLayer.alpha = alpha;
updateLayerList();
});