修改预览逻辑，更该为嵌入展示页面

public/config.js

@@ -3,7 +3,8 @@ var systemConfig = {
         lon: 112.52475547556074,
         lat: 37.86090299387082
     },
-    proxyUrl: 'http://121.43.55.7:10011/proxy?servertype={PROXYURL}&token='
+    proxyUrl: 'http://121.43.55.7:10011/proxy?servertype={PROXYURL}&token=',
+    single_map: "http://121.43.55.7:2107/"
 }
 
 // SkyScenery插件配置
@@ -11,4 +12,5 @@ var SkySceneryConfig = {
     userName: "user001",
     password: "1234567890",
     authUrl: '',// 留空
-}
+}
+

src/components/map copy/AllCesiumMap.vue

@@ -0,0 +1,285 @@
+<template>
+  <el-dialog v-if="isShow"
+             :model-value="isShow"
+             title="全部预览"
+             :width="1200"
+             :close-on-click-modal="false"
+             :before-close="handleClose"
+  >
+    <div id="AmapBox">
+      <div id="AmapContainer"></div>
+      <div id="AnavItem" >
+        <el-table :show-header="false"
+                  :cell-style="{'background-color': '#393939','color': 'whitesmoke'}"
+                  :data="data"
+                  style="width: 100%;background-color: #393939;margin-top: 10px;max-height: 100%">
+          <el-table-column prop="key" label="名称">
+            <template #default="scope">
+              <span :title="scope.row.content">{{ scope.row.key }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="id" label="显示" width="70" >
+            <template #default="scope">
+              <el-switch
+                  v-model="scope.row.show"
+                  @change="handleTileVisible(scope.row)"
+                  active-color="#13ce66">
+              </el-switch>
+            </template>
+          </el-table-column>
+
+        </el-table>
+
+      </div>
+    </div>
+
+  </el-dialog>
+</template>
+
+<script>
+
+let viewer = null;
+export default {
+  data() {
+    return {
+      viewer: '',
+      data: [],
+      currItem: {},
+      history: new Map(),
+      cesiumConfig: {
+        animation: false, //动画控制不显示
+        timeline: false, //时间线不显示
+        fullscreenButton: false, //全屏按钮不显示
+        imageryProvider: new SkyScenery.SingleTileImageryProvider({
+          url: (function createColorCanvas(color) {
+            let width = 1,
+                height = 1;
+            let canvas = document.createElement("canvas");
+            canvas.width = width;
+            canvas.height = height;
+            let ctx = canvas.getContext("2d");
+            ctx.fillStyle = color;
+            ctx.fillRect(0, 0, width, height);
+            return canvas.toDataURL();
+          })("#ffffff00"),
+          rectangle: SkyScenery.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
+        }),
+        infoBox: false,
+        baseLayerPicker: false, //地图切换不显示
+        geocoder: false,
+        homeButton: false,
+        selectionIndicator: false, // 去除绿色选择框
+        sceneModePicker: false,
+        navigationHelpButton: false,
+        navigationInstructionsInitiallyVisible: false,
+        scene3DOnly: true, // 仅以3D渲染以节省GPU内存
+        useBrowserRecommendedResolution: true, // 以浏览器建议的分辨率渲染
+      },
+    }
+  },
+  props: {
+    isShow: Boolean,
+    type: Number, // 0-GeoJson、1-3DTiles、2-gltf/glb、3-水面、4-地图
+    item: Object,
+    close: Function
+  },
+  watch: {
+    "isShow": function (val) {
+      this.initMap();
+    }
+  },
+  mounted() {
+    let app = this;
+    this.data = JSON.parse(JSON.stringify(this.item))
+    this.$nextTick(() => {
+      app.initMap();
+    })
+  },
+  methods: {
+    initMap() {
+      let app = this;
+      viewer = new SkyScenery.Viewer('AmapContainer', app.cesiumConfig);
+      // 加载底图
+      viewer.imageryLayers.addImageryProvider(
+          new SkyScenery.ArcGisMapServerImageryProvider({
+            url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
+          })
+      )
+      window.viewer = viewer
+    },
+    loadingEntities(type) {
+      let app = this;
+      let tile = undefined;
+      if (!type || type === '') {
+        return;
+      }
+      // 加载3DTiles
+      else if (type === 1) {
+        let url = app.currItem.url + '/tileset.json'
+        tile = app.add3DTiles(url)
+      }
+      // 加载gltf/glb
+      else if (type === 2) {
+        tile = app.addGltf(app.currItem.url)
+      }
+      // 加载底图
+      else if (type === 4) {
+        this.addMap(app.currItem.url, app.currItem.type)
+      }
+      if (tile) {
+        this.history.set(app.currItem.url, tile)
+      }
+    },
+    handleTileVisible(row) {
+      let flag = row.show;
+      let keys = this.history.keys();
+      if (this.type != 1) {
+        for (let i = 0; i < this.data.length; i++) {
+          this.data[i]['show'] = false;
+        }
+        for (let i = 0; i < keys.length; i++) {
+          this.history.get(keys[i]).show = false;
+        }
+      }
+      row.show = flag;
+      this.currItem = row;
+      if (this.history.has(row.url)) {
+        this.history.get(row.url).show = flag;
+      } else if (flag) {
+        this.loadingEntities(this.type)
+      }
+    },
+    addMap(url, type) {
+      viewer.imageryLayers.removeAll(true);
+      if(type==''){
+        viewer.imageryLayers.addImageryProvider(
+            new SkyScenery.ArcGisMapServerImageryProvider({
+              url: url,
+            })
+        )
+      } else if(type=='xyz'){
+        viewer.imageryLayers.addImageryProvider(
+            new SkyScenery.UrlTemplateImageryProvider({
+              url: url + '/{z}/{x}/{y}.png',
+              fileExtension:'png'
+            })
+        )
+      }
+    },
+    // 添加模型
+    add3DTiles(url) {
+      let app = this;
+      let tile = undefined;
+      if (!url || url=='') {
+        app.$message.warning('请检查模型地址');
+        //app.handleClose()
+        return;
+      }
+      tile = SkyScenery.add3DTilesData(url, viewer);
+      tile.tileFailed.addEventListener(function (err) {
+        app.$message({message: '模型加载失败', type: 'error'});
+        //app.handleClose()
+      })
+      tile.readyPromise.then(function () {
+        viewer.zoomTo(tile, {
+          heading: 2.718565,
+          pitch: -0.415366,
+          roll: 0.0,
+        });
+      }).catch(err => {
+        app.$message({
+          dangerouslyUseHTMLString: true,
+          message: '模型加载失败，' + err.statusCode + '：' + err.response,
+          type: 'error'
+        });
+        //app.handleClose()
+      });
+      return tile;
+    },
+    // 添加gltf
+    addGltf(url) {
+      let app = this;
+      if (!url || url=='') {
+        app.$message.warning('请检查模型地址');
+        //app.handleClose()
+        return;
+      }
+      let modelObj = new SkyScenery.singleModelBindClick(viewer, {
+        url: url,
+        lon: systemConfig.mapCenter.lon,
+        lat: systemConfig.mapCenter.lat,
+        height: 10,
+        heading: 0,
+        pitch: -90,
+        roll: 0,
+        info: {}
+      })
+      let origin = SkyScenery.Cartesian3.fromDegrees(systemConfig.mapCenter.lon, systemConfig.mapCenter.lat, 10);
+      viewer.camera.flyTo({
+        destination: origin,
+        orientation: {
+          heading: SkyScenery.Math.toRadians(0), // 方向
+          pitch: SkyScenery.Math.toRadians(-90), // 倾斜角度
+          roll: SkyScenery.Math.toRadians(0),
+        },
+      });
+      return modelObj;
+    },
+    flyToPrimitive(obj) {
+      let east = obj.geometryInstances.geometry.rectangle.east;
+      let north = obj.geometryInstances.geometry.rectangle.north;
+      let west = obj.geometryInstances.geometry.rectangle.west;
+      let south = obj.geometryInstances.geometry.rectangle.south;
+      let lon = (east+west)/2;
+      let lat = (north+south)/2;
+      viewer.camera.flyTo({
+        destination: SkyScenery.Cartesian3.fromDegrees(SkyScenery.Math.toDegrees(lon),SkyScenery.Math.toDegrees(lat), 338.8293456247198),
+        orientation: {
+          heading: SkyScenery.Math.toRadians(0),
+          pitch: SkyScenery.Math.toRadians(-90),
+          roll: 0,
+        }
+      })
+    },
+    handleClose() {
+      this.close(false)
+    }
+  }
+}
+</script>
+
+<style scoped>
+#AmapBox {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+#AmapContainer {
+  width: 100%;
+  height: 100%;
+}
+
+#AnavItem{
+  position: absolute;
+  top: 18%;
+  left: 1%;
+  width: 20%;
+  height: 65%;
+  color: white;
+  border: 1px solid grey;
+  border-radius: 10px;
+  background-color: #393939;
+}
+</style>
+
+<style>
+/*隐藏 cesium logo*/
+.cesium-widget-credits {
+  display: none !important;
+}
+
+.el-dialog__body {
+  padding-top: 10px;
+}
+</style>

src/components/map copy/CesiumMap.vue

@@ -0,0 +1,253 @@
+<template>
+  <el-dialog v-if="isShow"
+             :model-value="isShow"
+             title="地理信息"
+             :width="1200"
+             :close-on-click-modal="false"
+             :before-close="handleClose"
+
+  >
+    <div id="mapBox">
+      <div id="mapContainer"></div>
+    </div>
+
+  </el-dialog>
+</template>
+
+<script>
+
+let viewer = null;
+export default {
+  data() {
+    return {
+      viewer: '',
+      centerPoint: {},
+      cesiumConfig: {
+        animation: false, //动画控制不显示
+        timeline: false, //时间线不显示
+        fullscreenButton: false, //全屏按钮不显示
+        imageryProvider: new SkyScenery.SingleTileImageryProvider({
+          url: (function createColorCanvas(color) {
+            let width = 1,
+                height = 1;
+            let canvas = document.createElement("canvas");
+            canvas.width = width;
+            canvas.height = height;
+            let ctx = canvas.getContext("2d");
+            ctx.fillStyle = color;
+            ctx.fillRect(0, 0, width, height);
+            return canvas.toDataURL();
+          })("#ffffff00"),
+          rectangle: SkyScenery.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
+        }),
+        infoBox: false,
+        baseLayerPicker: false, //地图切换不显示
+        geocoder: false,
+        homeButton: false,
+        selectionIndicator: false, // 去除绿色选择框
+        sceneModePicker: false,
+        navigationHelpButton: false,
+        navigationInstructionsInitiallyVisible: false,
+        scene3DOnly: true, // 仅以3D渲染以节省GPU内存
+        useBrowserRecommendedResolution: true, // 以浏览器建议的分辨率渲染
+      },
+    }
+  },
+  props: {
+    isShow: Boolean,
+    type: Number, // 0-GeoJson、1-3DTiles、2-gltf、3-水面、4-地图
+    item: Object,
+    close: Function
+  },
+  watch: {
+    "isShow": function (val) {
+      this.initMap();
+    }
+  },
+  mounted() {
+    let app = this;
+    this.$nextTick(() => {
+      app.initMap();
+    })
+  },
+  methods: {
+    initMap() {
+      let app = this;
+      viewer = new SkyScenery.Viewer('mapContainer', app.cesiumConfig);
+      // 加载底图
+      if (app.type!==4) {
+        viewer.imageryLayers.addImageryProvider(
+            new SkyScenery.ArcGisMapServerImageryProvider({
+              url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
+            })
+        )
+      }
+      window.viewer = viewer
+      // 加载模型
+      app.loadingEntities(app.type);
+    },
+    loadingEntities(type) {
+      let app = this;
+      if (!type || type === '') {
+        return;
+      }
+      // 加载GeoJson
+      if (type === 0) {
+        let obj = {"type": "Feature", "geometry": JSON.parse(app.item), "properties": {}}
+        this.addGeoJson(obj);
+      }
+      // 加载3DTiles
+      else if (type === 1) {
+        let url = app.item.url+'/tileset.json'
+        app.add3DTiles(url)
+      }
+      // 加载gltf
+      else if (type === 2) {
+        app.addGltf(app.item.url)
+      }
+      // 加载底图
+      else if (type === 4) {
+        app.addMap(app.item.url, app.item.type);
+      }
+    },
+    // 加载GeoJson
+    addGeoJson(obj) {
+      let app = this;
+      let res = SkyScenery.GeoJsonDataSource.load(obj, {
+        stroke: SkyScenery.Color.fromCssColorString('#ff0000'),
+        fill: SkyScenery.Color.RED.withAlpha(0.3),
+        strokeWidth: 5,
+        clampToGround: true,
+      })
+      viewer.dataSources.add(res);
+      res.then(() => {
+        viewer.zoomTo(res, {heading: 2.718565, pitch: -0.415366, roll: 0.0,});
+      }).catch(() => {
+        app.$message({message: '加载失败', type: 'error'})
+      })
+    },
+    // 添加模型
+    add3DTiles(url) {
+      let app = this;
+      let tile = undefined;
+      if (!url || url=='') {
+        app.$message.warning('请检查模型地址');
+        app.handleClose()
+        return;
+      }
+      tile = SkyScenery.add3DTilesData(url, viewer);
+      tile.tileFailed.addEventListener(function (err) {
+        app.$message({message: '模型加载失败', type: 'error'});
+        app.handleClose()
+      })
+      tile.readyPromise.then(function () {
+        viewer.zoomTo(tile, {
+          heading: 2.718565,
+          pitch: -0.415366,
+          roll: 0.0,
+        });
+      }).catch(err => {
+        app.$message({
+          dangerouslyUseHTMLString: true,
+          message: '模型加载失败，' + err.statusCode + '：' + err.response,
+          type: 'error'
+        });
+        app.handleClose()
+      });
+      return tile;
+    },
+    // 添加gltf
+    addGltf(url) {
+      let app = this;
+      if (!url || url=='') {
+        app.$message.warning('请检查模型地址');
+        app.handleClose()
+        return;
+      }
+      let modelObj = new SkyScenery.singleModelBindClick(viewer, {
+        url: url,
+        lon: systemConfig.mapCenter.lon,
+        lat: systemConfig.mapCenter.lat,
+        height: 10,
+        heading: 0,
+        pitch: -90,
+        roll: 0,
+        info: {}
+      })
+      let origin = SkyScenery.Cartesian3.fromDegrees(systemConfig.mapCenter.lon, systemConfig.mapCenter.lat, 10);
+      viewer.camera.flyTo({
+        destination: origin,
+        orientation: {
+          heading: SkyScenery.Math.toRadians(0), // 方向
+          pitch: SkyScenery.Math.toRadians(-90), // 倾斜角度
+          roll: SkyScenery.Math.toRadians(0),
+        },
+      });
+    },
+    addMap(url, type) {
+      debugger
+      viewer.imageryLayers.removeAll(true);
+      if(type==''){
+        viewer.imageryLayers.addImageryProvider(
+            new SkyScenery.ArcGisMapServerImageryProvider({
+              url: url,
+            })
+        )
+      } else if(type=='xyz'){
+        viewer.imageryLayers.addImageryProvider(
+          new SkyScenery.UrlTemplateImageryProvider({
+              url: url + '/{z}/{x}/{y}.png',
+              fileExtension:'png'
+          })
+        )
+      }
+    },
+    flyToPrimitive(obj) {
+      let east = obj.geometryInstances.geometry.rectangle.east;
+      let north = obj.geometryInstances.geometry.rectangle.north;
+      let west = obj.geometryInstances.geometry.rectangle.west;
+      let south = obj.geometryInstances.geometry.rectangle.south;
+      let lon = (east+west)/2;
+      let lat = (north+south)/2;
+      viewer.camera.flyTo({
+        destination: SkyScenery.Cartesian3.fromDegrees(SkyScenery.Math.toDegrees(lon),SkyScenery.Math.toDegrees(lat), 338.8293456247198),
+        orientation: {
+          heading: SkyScenery.Math.toRadians(0),
+          pitch: SkyScenery.Math.toRadians(-90),
+          roll: 0,
+        }
+      })
+    },
+    handleClose() {
+      this.close(false)
+    }
+  }
+}
+</script>
+
+<style scoped>
+#mapBox {
+  width: 100%;
+  height: 100%;
+}
+
+#mapContainer {
+  width: 100%;
+  height: 100%;
+}
+
+#mapOperation {
+  margin-bottom: 10px;
+}
+</style>
+
+<style>
+/*隐藏 cesium logo*/
+.cesium-widget-credits {
+  display: none !important;
+}
+
+.el-dialog__body {
+  padding-top: 10px;
+}
+</style>

src/components/map/CesiumMap.vue

@@ -1,14 +1,9 @@
 <template>
-  <el-dialog v-if="isShow"
-             :model-value="isShow"
-             title="地理信息"
-             :width="1200"
-             :close-on-click-modal="false"
-             :before-close="handleClose"
-
-  >
+  <el-dialog v-if="isShow" :model-value="isShow" title="地理信息" :width="1200" :close-on-click-modal="false"
+    :before-close="handleClose">
     <div id="mapBox">
-      <div id="mapContainer"></div>
+      <!-- <div id="mapContainer"></div> -->
+      <iframe :src="src" frameborder="0"></iframe>
     </div>
 
   </el-dialog>
@@ -20,6 +15,7 @@ let viewer = null;
 export default {
   data() {
     return {
+      src: systemConfig.single_map,
       viewer: '',
       centerPoint: {},
       cesiumConfig: {
@@ -29,7 +25,7 @@ export default {
         imageryProvider: new SkyScenery.SingleTileImageryProvider({
           url: (function createColorCanvas(color) {
             let width = 1,
-                height = 1;
+              height = 1;
             let canvas = document.createElement("canvas");
             canvas.width = width;
             canvas.height = height;
@@ -73,16 +69,16 @@ export default {
   methods: {
     initMap() {
       let app = this;
-      viewer = new SkyScenery.Viewer('mapContainer', app.cesiumConfig);
-      // 加载底图
-      if (app.type!==4) {
-        viewer.imageryLayers.addImageryProvider(
-            new SkyScenery.ArcGisMapServerImageryProvider({
-              url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
-            })
-        )
-      }
-      window.viewer = viewer
+      // viewer = new SkyScenery.Viewer('mapContainer', app.cesiumConfig);
+      // // 加载底图
+      // if (app.type !== 4) {
+      //   viewer.imageryLayers.addImageryProvider(
+      //     new SkyScenery.ArcGisMapServerImageryProvider({
+      //       url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
+      //     })
+      //   )
+      // }
+      // window.viewer = viewer
       // 加载模型
       app.loadingEntities(app.type);
     },
@@ -93,13 +89,15 @@ export default {
       }
       // 加载GeoJson
       if (type === 0) {
-        let obj = {"type": "Feature", "geometry": JSON.parse(app.item), "properties": {}}
+        let obj = { "type": "Feature", "geometry": JSON.parse(app.item), "properties": {} }
         this.addGeoJson(obj);
       }
       // 加载3DTiles
       else if (type === 1) {
-        let url = app.item.url+'/tileset.json'
-        app.add3DTiles(url)
+        // let url = app.item.url + '/tileset.json'
+        // app.add3DTiles(url)
+        // http://localhost:8080/map-server/index.html?dataType=threeD&url=http://1.119.143.102:9002/model_data/750/qinghulu/output/tileset.json
+        this.src = systemConfig.single_map + "?dataType=threeD&" + app.item.url + '/tileset.json'
       }
       // 加载gltf
       else if (type === 2) {
@@ -121,23 +119,23 @@ export default {
       })
       viewer.dataSources.add(res);
       res.then(() => {
-        viewer.zoomTo(res, {heading: 2.718565, pitch: -0.415366, roll: 0.0,});
+        viewer.zoomTo(res, { heading: 2.718565, pitch: -0.415366, roll: 0.0, });
       }).catch(() => {
-        app.$message({message: '加载失败', type: 'error'})
+        app.$message({ message: '加载失败', type: 'error' })
       })
     },
     // 添加模型
     add3DTiles(url) {
       let app = this;
       let tile = undefined;
-      if (!url || url=='') {
+      if (!url || url == '') {
         app.$message.warning('请检查模型地址');
         app.handleClose()
         return;
       }
       tile = SkyScenery.add3DTilesData(url, viewer);
       tile.tileFailed.addEventListener(function (err) {
-        app.$message({message: '模型加载失败', type: 'error'});
+        app.$message({ message: '模型加载失败', type: 'error' });
         app.handleClose()
       })
       tile.readyPromise.then(function () {
@@ -159,7 +157,7 @@ export default {
     // 添加gltf
     addGltf(url) {
       let app = this;
-      if (!url || url=='') {
+      if (!url || url == '') {
         app.$message.warning('请检查模型地址');
         app.handleClose()
         return;
@@ -185,32 +183,37 @@ export default {
       });
     },
     addMap(url, type) {
-      debugger
-      viewer.imageryLayers.removeAll(true);
-      if(type==''){
-        viewer.imageryLayers.addImageryProvider(
-            new SkyScenery.ArcGisMapServerImageryProvider({
-              url: url,
-            })
-        )
-      } else if(type=='xyz'){
-        viewer.imageryLayers.addImageryProvider(
-          new SkyScenery.UrlTemplateImageryProvider({
-              url: url + '/{z}/{x}/{y}.png',
-              fileExtension:'png'
-          })
-        )
+      if (type == '') {
+        this.src = systemConfig.single_map + "?dataType=twoD&mapType=twoD&mapserverType=arcgis&url=" + url
+      } else if (type == 'xyz') {
+        this.src = systemConfig.single_map + "?dataType=twoD&mapType=twoD&mapserverType=xyz&url=" + url
       }
+      // return;
+      // viewer.imageryLayers.removeAll(true);
+      // if (type == '') {
+      //   viewer.imageryLayers.addImageryProvider(
+      //     new SkyScenery.ArcGisMapServerImageryProvider({
+      //       url: url,
+      //     })
+      //   )
+      // } else if (type == 'xyz') {
+      //   viewer.imageryLayers.addImageryProvider(
+      //     new SkyScenery.UrlTemplateImageryProvider({
+      //       url: url + '/{z}/{x}/{y}.png',
+      //       fileExtension: 'png'
+      //     })
+      //   )
+      // }
     },
     flyToPrimitive(obj) {
       let east = obj.geometryInstances.geometry.rectangle.east;
       let north = obj.geometryInstances.geometry.rectangle.north;
       let west = obj.geometryInstances.geometry.rectangle.west;
       let south = obj.geometryInstances.geometry.rectangle.south;
-      let lon = (east+west)/2;
-      let lat = (north+south)/2;
+      let lon = (east + west) / 2;
+      let lat = (north + south) / 2;
       viewer.camera.flyTo({
-        destination: SkyScenery.Cartesian3.fromDegrees(SkyScenery.Math.toDegrees(lon),SkyScenery.Math.toDegrees(lat), 338.8293456247198),
+        destination: SkyScenery.Cartesian3.fromDegrees(SkyScenery.Math.toDegrees(lon), SkyScenery.Math.toDegrees(lat), 338.8293456247198),
         orientation: {
           heading: SkyScenery.Math.toRadians(0),
           pitch: SkyScenery.Math.toRadians(-90),
@@ -231,6 +234,11 @@ export default {
   height: 100%;
 }
 
+iframe {
+  width: 100%;
+  height:500px;
+}
+
 #mapContainer {
   width: 100%;
   height: 100%;