Cesium|xt3d加载ArcGIS底图
效果
代码
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cesium|xt3d</title> <!-- 引入Cesium --> <script src="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Widgets/widgets.css"> <!-- 引入xt3d --> <script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script> <style> html, body, #map3d { width: 100%; height: 100%; margin: 0px; padding: 0px; }
.btn-container { position: absolute; left: 10px; top: 90px; padding: 10px 15px; border-radius: 4px; border: 1px solid rgba(128, 128, 128, 0.5); color: #ffffff; background: rgba(0, 0, 0, 0.4); box-shadow: 0 3px 14px rgb(128 128 128 / 50%); }
button { background: transparent; border: 1px solid #00d0ffb8; color: white; padding: 7px 9px; border-radius: 2px; margin: 3px; cursor: pointer
} </style></head><body> <div id="map3d"></div> <div class="btn-container"> <button onclick="changeMap(0)">卫星底图</button> <button onclick="changeMap(1)">电子街道</button> <button onclick="changeMap(2)">蓝色底图</button> <button onclick="changeMap(3)">灰色底图</button> </div> <script> let xt3dInit = { init(el) { this.initViewer(el); }, //初始化viewer initViewer(el) { this.viewer = new Cesium.Viewer(el, { infoBox: false, selectionIndicator: false, navigation: false, animation: false, shouldAnimate: false, timeline: false, baseLayerPicker: false, geocoder: false, homeButton: false, sceneModePicker: false, navigationHelpButton: false, imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' }) }); }, //改变底图 changeMap(mapIndex) { this.viewer.imageryLayers.removeAll(true); //删除所有底图 let imageryProvider; switch (mapIndex) { case 0: //影像 imageryProvider = new Cesium.ArcGisMapServerImageryProvider({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' }); break; case 1: //电子街道 imageryProvider = new Cesium.ArcGisMapServerImageryProvider({ url: ' https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer' }) break; case 2: //蓝色底图 imageryProvider = new Cesium.ArcGisMapServerImageryProvider({ url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer' }) break; case 3: //灰色底图 imageryProvider = new Cesium.ArcGisMapServerImageryProvider({ url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer' }) break; } this.viewer.imageryLayers.addImageryProvider(imageryProvider); }, destroy() { this.viewer.entities.removeAll(); this.viewer.imageryLayers.removeAll(true); this.viewer.destroy(); } } xt3dInit.init("map3d"); function changeMap(mapIndex) { xt3dInit.changeMap(mapIndex); } </script></body></html>
