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" > <!-- 引入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)">衛(wèi)星底圖</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>
