space-application/src/views/c-views/right-tool/more-screen/MoreScreenUse.vue

<template>
  <div id="more-screen-map-use" class="h100">
    <iframe id="i_map_more_screen" name="i_map" frameborder="0" class="h100">

    </iframe>
    <div class="my-b" :class="'split'+num">
      <div v-for="item in screenList.slice(0,num)">
        <single-screen-select  :position="item.position" :mapID ="item.mapID" :viewID="item.viewID" :clickHandleID="item.clickHandleID"  :key="item.id" />
      </div>
    </div>
  </div>
</template>

<script>
import CityGis from "@/unit/map/CityGis.Bridge";
import {previewMapBridge} from "@/unit/map/map";
import {

 previewChangeSplitScreen,

} from "@/unit/map/addLayer.js";

import {onMounted,onBeforeUnmount} from "vue";
import SingleScreenSelect from "@/views/c-views/right-tool/more-screen/SingleScreenSelect.vue";

let bridge1
export default {
  name: "MoreScreenUse",
  components: {SingleScreenSelect},
  props:{
    type:{

    },
    num:{

    }
  },
  setup(props){
    const   screenList=[
      {
        id:'0003',
        mapID:'map0',
        viewID:'viewDiv_0',
        clickHandleID:'m_clickHandle_0',
        position:{
          x:'20%',
          y:'12%'
        }
      },
      {
        id:'0004',
        mapID:'map1',
        viewID:'viewDiv_1',
        clickHandleID:'m_clickHandle_1',
        position:{
          x:'70%',
          y:'12%'
        }
      },
      {
        id:'0005',
        mapID:'map2',
        viewID:'viewDiv_2',
        clickHandleID:'m_clickHandle_2',
        position:{
          x:'20%',
          y:'60%'
        }
      },
      {
        id:'0006',
        mapID:'map3',
        viewID:'viewDiv_3',
        clickHandleID:'m_clickHandle_3',
        position:{
          x:'70%',
          y:'60%'
        }
      },
      {
        id:'0007',
        mapID:'map4',
        viewID:'viewDiv_4',
        clickHandleID:'m_clickHandle_4',
        position:{
          x:'20%',
          y:'60%'
        }
      },
      {
        id:'0008',
        mapID:'map5',
        viewID:'viewDiv_5',
        clickHandleID:'m_clickHandle_5',
        position:{
          x:'70%',
          y:'60%'
        }
      }
    ]
    onMounted(() => {
      previewMapBridge.bridgeContent = bridge1 = new CityGis.Bridge({
        id: "i_map_more_screen",
        url:'http://localhost:8081/#/jk_map?theme=dark&type=3D',
        //url: 'https://cimweb.zjw.sh.cegn.cn:2007/VUE-Map-Tool-Widget/#/jk_map?theme=dark&type=3D', //建科发布
        onReady: function () {
          console.log(previewMapBridge)
        }
      })
      previewChangeSplitScreen({
        status:"show",
        num:props.num
      });



    })
    // onBeforeUnmount(() => {
    //   previewChangeSplitScreen({
    //     status:"hide"
    //   })
    //   previewMapBridge.bridgeContent = bridge1 = ''
    // })
    return {
      screenList
    }
  },
  // mounted() {
  //
  //   //加载地图控件
  //
  //   // else if(this.type == 'basicInfo'){
  //   //   console.log("basicInfo");
  //   //   setPreLocation({
  //   //     x:1607.0472500617975,
  //   //     y:851.1274763445955,
  //   //     z:2008.3021969236434,
  //   //     heading:0,
  //   //     tilt:0
  //   //   })
  //   //   drawPreGeometryGraphic(geometry.onePlace)
  //   //
  //   // }
  //   // else if(this.type == 'historyAnalysis'){
  //   //   previewChangeSplitScreen({
  //   //     status:"show",
  //   //     num:4,
  //   //     display:"line"
  //   //   });
  //   //   AddSinglePreviewLayer({
  //   //     "id": "D9002000520150601",
  //   //     "title": "1948航空影像",
  //   //     "visible": true,
  //   //     "opacity": 1,
  //   //     "url": "http://www.smi.sh.cegn.cn/ServiceRight/proxy/42358ea887237436d688c1f3eee1d5f6/cxjsjtfz",
  //   //     "type": "切片地图",
  //   //     "mapID":"map0"
  //   //   })
  //   //   AddSinglePreviewLayer({
  //   //     "id": "D9002000820150701",
  //   //     "title": "1979航空影像",
  //   //     "visible": true,
  //   //     "opacity": 1,
  //   //     "url": "http://www.smi.sh.cegn.cn/ServiceRight/proxy/e5b67176b70ec8b9ca036ec12399a19e/cxjsjtfz",
  //   //     "type": "切片地图",
  //   //     "mapID":"map1"
  //   //   })
  //   //   AddSinglePreviewLayer({
  //   //     "id": "D9002001620150701",
  //   //     "title": "1994航空影像",
  //   //     "visible": true,
  //   //     "opacity": 1,
  //   //     "url": "http://www.smi.sh.cegn.cn/ServiceRight/proxy/3a510027e4244a66a14586cd9db2f035/cxjsjtfz",
  //   //     "type": "切片地图",
  //   //     "mapID":"map2"
  //   //   })
  //   //   AddSinglePreviewLayer({
  //   //     "id": "D9002000620150601",
  //   //     "title": "2015航空影像",
  //   //     "visible": true,
  //   //     "opacity": 1,
  //   //     "url": "http://www.smi.sh.cegn.cn/ServiceRight/proxy/b52dd54a7778fc6b6710465a3d804dfe/cxjsjtfz",
  //   //     "type": "切片地图",
  //   //     "mapID":"map3"
  //   //   })
  //   //   drawPreGeometryGraphic(geometry.onePlace,"viewDiv_0");
  //   //   drawPreGeometryGraphic(geometry.onePlace,"viewDiv_1");
  //   //   drawPreGeometryGraphic(geometry.onePlace,"viewDiv_2");
  //   //   drawPreGeometryGraphic(geometry.onePlace,"viewDiv_3");
  //   //   setPreLocation({
  //   //     x:1507.0472500617975,
  //   //     y:801.1274763445955,
  //   //     z:1008.3021969236434,
  //   //     heading:0,
  //   //     tilt:0,
  //   //     viewID: "viewDiv_0"
  //   //   })
  //   // }
  //   // else if(this.type == "cimShow"){
  //   //   clearPreviewBaseMapLayer();
  //   //   setPreviewLocation({
  //   //     "heading": 85.48893113525105,
  //   //     "tilt": 50.86609683511964,
  //   //     "x": -10038.704295309626,
  //   //     "y": -1305.6942494130299,
  //   //     "z":  9596.450770324096,
  //   //   })
  //   //   AddSinglePreviewLayer({
  //   //     "id": "csgx_bim",
  //   //     "title": "城市更新BIM",
  //   //     "visible": true,
  //   //     "opacity": 1,
  //   //     "url": "https://server1.geoscene.gis/server/rest/services/Hosted/csgx_gldx/SceneServer",
  //   //     "type": "scene"
  //   //   })
  //   // }
  //   // bridge1.addEventListener((arg) => {
  //   //   debugger
  //   //   switch (arg.action) {
  //   //     case "MapIsReady":
  //   //       if(this.type == 'moreScreen'){
  //   //         previewChangeSplitScreen({
  //   //           status:"show",
  //   //           num:4
  //   //         });
  //   //       }else if(this.type == 'historyAnalysis'){
  //   //         debugger
  //   //         previewChangeSplitScreen({
  //   //           status:"show",
  //   //           num:4,
  //   //           display:"line"
  //   //         });
  //   //         // AddSinglePreviewLayer({
  //   //         //   "id": "D9002000520150601",
  //   //         //   "title": "1948航空影像",
  //   //         //   "visible": true,
  //   //         //   "opacity": 1,
  //   //         //   "url": "http://www.smi.sh.cegn.cn/ServiceRight/proxy/42358ea887237436d688c1f3eee1d5f6/cxjsjtfz",
  //   //         //   "type": "切片地图",
  //   //         //   "mapID":"map0"
  //   //         // })
  //   //         // AddSinglePreviewLayer({
  //   //         //   "id": "D9002000820150701",
  //   //         //   "title": "1979航空影像",
  //   //         //   "visible": true,
  //   //         //   "opacity": 1,
  //   //         //   "url": "http://www.smi.sh.cegn.cn/ServiceRight/proxy/e5b67176b70ec8b9ca036ec12399a19e/cxjsjtfz",
  //   //         //   "type": "切片地图",
  //   //         //   "mapID":"map1"
  //   //         // })
  //   //         // AddSinglePreviewLayer({
  //   //         //   "id": "D9002001620150701",
  //   //         //   "title": "1994航空影像",
  //   //         //   "visible": true,
  //   //         //   "opacity": 1,
  //   //         //   "url": "http://www.smi.sh.cegn.cn/ServiceRight/proxy/3a510027e4244a66a14586cd9db2f035/cxjsjtfz",
  //   //         //   "type": "切片地图",
  //   //         //   "mapID":"map2"
  //   //         // })
  //   //         // AddSinglePreviewLayer({
  //   //         //   "id": "D9002000620150601",
  //   //         //   "title": "2015航空影像",
  //   //         //   "visible": true,
  //   //         //   "opacity": 1,
  //   //         //   "url": "http://www.smi.sh.cegn.cn/ServiceRight/proxy/b52dd54a7778fc6b6710465a3d804dfe/cxjsjtfz",
  //   //         //   "type": "切片地图",
  //   //         //   "mapID":"map3"
  //   //         // })
  //   //       }
  //   //       break;
  //   //   }
  //   // });
  //
  // },
}
</script>

<style scoped lang="scss">
#more-screen-map-use{
  .my-b{
    display: flex;

    flex-wrap: wrap;
    >div{

      position: relative;
    }
    &.split2{
      >div{
        width: 50%;
        height: 100%;
        box-sizing: border-box;
      }
    }
    &.split4{
      >div{
        width: 50%;
        height: 50%;
        box-sizing: border-box;
      }
    }
    &.split6{
      >div{
        width: 33.3%;
        height: 50%;
        box-sizing: border-box;
      }
    }
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  left:0;
  top:0;
  z-index: 1;
  width: 100%;
  height: 95%;
  position: relative;

  :deep .esri-ui{
    right:50px !important;
  }
  #i_map_more_screen{
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
  }
}
</style>