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">
          <MainMap :mapKey="mapName" :url="configUrl" :options="mapOptions" @onload="onMapload" />
          <LayerListPanel></LayerListPanel>
          <SandMonitorLeft v-if="mainMenu === '采砂监控'"></SandMonitorLeft>
          <SandMonitorRight v-if="mainMenu === '采砂监控'"></SandMonitorRight>
          <ComprehensiveOverview v-if="mainMenu === '综合概览'"></ComprehensiveOverview>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import menuPanel from '@/views/components/menu'
import { mapState } from 'vuex'
import MainMap from '@/views/components/map'
import LayerListPanel from '@/views/components/layerList'
import SandMonitorLeft from './sand-monitor/left.vue'
import SandMonitorRight from './sand-monitor/right.vue'
import ComprehensiveOverview from '@/views/comprehensive-overview/index'
const basePathUrl = window.basePathUrl || ''
export default {
  name: 'MainView',
  components: { MainMap, LayerListPanel, menuPanel, SandMonitorLeft, SandMonitorRight, ComprehensiveOverview },
  computed: {
    ...mapState({
      mainMenu: (state) => state.home.mainMenu
    })
  },
  data() {
    return {
      mapName: 'cMap',
      configUrl: basePathUrl + 'config/config.json',
      mapOptions: {
        scene: { center: { lat: 34.227875, lng: 108.364403, alt: 35586.8, heading: 359.7, pitch: -88.6 } },
        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
          }
        ]
      }
    }
  },

  methods: {
    // 地图加载回调优化
    async onMapload(map) {
      window.map = map
      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: '//data.mars3d.cn/img/textures/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>