tmzn-weihe/src/views/index.vue

<template>
  <el-container class="main-container">
    <!-- <div class="header-container">
      <menu-panel></menu-panel>
    </div> -->
    <el-container class="content-container">
      <el-main>
        <div class="home-view">
          <keep-alive>
            <MainMap :mapKey="mapName" :url="configUrl" :options="mapOptions" @onload="onMapload" />
          </keep-alive>
          <MapTools/>
          <LayerListPanel v-if="mapLoaded"></LayerListPanel>
          <SandMonitorLeft v-if="mainMenu === 'sandMonitor'"></SandMonitorLeft>
          <SandMonitorRight v-if="mainMenu === 'sandMonitor'"></SandMonitorRight>
          <SafetyInspectionLeft v-if="mainMenu === 'safetyInspection'"></SafetyInspectionLeft>
          <SafetyInspectionRight v-if="mainMenu === 'safetyInspection'"></SafetyInspectionRight>
          <AddInspectionTask />
          <ComprehensiveOverview v-if="mainMenu === 'comprehensiveOverview'"></ComprehensiveOverview>
          <HydrologicInfo v-if="mainMenu === 'hydrologicInfo'"></HydrologicInfo>
          <SmartEarlyWarning v-if="mainMenu === 'smartEarlyWarning'" />
          <WaterStationPopup />
          <VideoPlay/>
          <PlanDialog/>
          <AnnounceDetailPopup/>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import MainMap from '@/views/components/map'
import MapTools from '@/views/components/tools'
import LayerListPanel from '@/views/components/layerList'
import SandMonitorLeft from './sand-monitor/left.vue'
import SandMonitorRight from './sand-monitor/right.vue'
import SafetyInspectionLeft from './safety-inspection/left.vue'
import SafetyInspectionRight from './safety-inspection/right.vue'
import ComprehensiveOverview from '@/views/comprehensive-overview/index'
import HydrologicInfo from '@/views/hydrologic-info/index'
import WaterStationPopup from '@/views/water-station-popup'
import AddInspectionTask from './safety-inspection/addInspectionTask.vue'
import SmartEarlyWarning from '@/views/smart-early-warning/index'
import PlanDialog from './components/layerList/planDialog.vue'
import VideoPlay from './video-play-popup/index.vue'
import AnnounceDetailPopup from './announce-detail-popup/index.vue'
const basePathUrl = window.basePathUrl || ''
export default {
  name: 'MainView',
  components: {
    MainMap,
    MapTools,
    LayerListPanel,
    SandMonitorLeft,
    SandMonitorRight,
    SafetyInspectionLeft,
    ComprehensiveOverview,
    SafetyInspectionRight,
    HydrologicInfo,
    WaterStationPopup,
    AddInspectionTask,
    SmartEarlyWarning,
    PlanDialog,
    VideoPlay,
    AnnounceDetailPopup
  },
  data() {
    return {
      mapName: 'cMap',
      configUrl: basePathUrl + 'config/config.json',
      mapOptions: {
        scene: { center: { lat: 34.203789, lng: 108.30656, alt: 36020, heading: 0.8, pitch: -85.9 } },
        basemaps: [
          //   {
          //     name: "天地图电子",
          //     type: "group",
          //     layers: [
          //       { name: "底图", type: "tdt", layer: "vec_d", key: ["d7077257b0ca8c279c3e1bf92fb437dc"] },
          //       { name: "注记", type: "tdt", layer: "vec_z", key: ["d7077257b0ca8c279c3e1bf92fb437dc"] },
          //     ],
          //   },
          {
            name: '天地图影像',
            type: 'group',
            layers: [{ name: '底图', type: 'tdt', layer: 'img_d', key: ['d7077257b0ca8c279c3e1bf92fb437dc'] }],
            show: true
          },
          {
            type: 'tdt',
            name: '天地图注记',
            layer: 'img_z',
            key: ['d7077257b0ca8c279c3e1bf92fb437dc'],
            show: true
          }
        ]
      },
      mapLoaded: false,
      mainMenu: ''
    }
  },
  created() {
    this.mainMenu = this.$route.params.menu
    this.mapLoaded = false
  },
  methods: {
    // 地图加载回调优化
    async onMapload(map) {
      window.map = map
      this.mapLoaded = true
      map.hasTerrain = true
      this.addWaterSurface(map)
    },
    // 添加水面
    addWaterSurface(map) {
      const geoJsonLayer = new this.mars3d.layer.GeoJsonLayer({
        name: '渭河',
        url: '/geojson/weihe.geojson',
        crs: 'EPSG:4326',
        symbol: {
          type: 'water',
          styleOptions: {
            normalMap: '/img/waterNormals.jpg',
            addHeight: 120,
            frequency: 8000.0, // 控制波数的数字。
            animationSpeed: 0.04, // 控制水的动画速度的数字。
            amplitude: 5.0, // 控制水波振幅的数字。
            specularIntensity: 0.8, // 控制镜面反射强度的数字。
            baseWaterColor: '#006ab4', // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
            blendColor: '#006ab4', // 从水中混合到非水域时使用的rgba颜色对象。
            opacity: 0.7, // 透明度
            clampToGround: true // 是否贴地
          }
        }
      })
      map.addLayer(geoJsonLayer)
    }
  }
}
</script>

<style lang="scss">
.main-container {
  width: 100%;
  flex-direction: column;
  .el-main {
    padding: 0px;
  }
}
.header-container {
  z-index: 100;
  position: absolute;
  width: 100%;
}
.content-container {
  height: 100vh;
}
.home-view {
  position: relative;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}
</style>