yifeng_integration/src/views/next/screen-content-map/cpt/zdyf-map.vue

<template>
  <div style="width: 100%; height: 100%">
    <div class="bg_img" v-if="mapFlag == 'Emap'">
      <chinaMap />
      <div class="pot" @click="toProvince">
        <img src="@/assets/images/map/yellowPot.png" alt="" />
        <img src="@/assets/images/map/36°.png" alt="" />
      </div>
      <div class="pot1" @click="toProvince">
        黄金育种带
        <div class="meteor">
          <div></div>
        </div>
      </div>
    </div>
    <div id="myMapZd" v-if="mapFlag == 'Amap'">
      <div>
        <screen-map-header
          v-if="showPage"
          :data="headerList"
        ></screen-map-header>
        <screen-map-legeng v-if="showPage"></screen-map-legeng>
      </div>
    </div>
  </div>
</template>
<script>
import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import yifengJson from './yifeng.json'
import jdbandaoJson from './jdbandao.json'
import point from './point.json'
import chinaMap from './chinaMap.vue'
import { selectConfigList } from '@/api/home'
import { mapActions, mapGetters } from 'vuex'
const width = 0
const height = 0
let myMapZd
let scene
let polygonLayer
let polygonLayer1
let lineLayer
let dotLayer
let dotLayer1
let dotLayer2
let dotLayer3
export default {
  data () {
    return {
      mapFlag: 'Emap',
      title:
        '农业要强，种业必须强。种业是现代农业芯片，是建设农业强国的标志性、先导性工程，是国家战略性、基础性核心产业。贯彻落实习近平总书记关于打一场种业翻身仗的重要指示精神，连续三年的中央一号文件对此专门部署；2023年的中央一号文件更是专节提出深入实施种业振兴行动。',
      darkStyle: {
        style: 'amap://styles/blue',
        polygonColor: [
          'rgba(255, 100, 60, 0.5)',
          // "rgba(43, 231, 253, 0.35)",
          'rgba(0, 127, 241, .5)',
          'rgba(255, 255, 50, 0.35)'
        ],
        lineColor: [
          // "rgba(255, 180, 150, 0.9)",
          // "rgba(43, 231, 253, 0.7)",
          'rgba(0, 127, 241, .6)'
          // "rgba(255, 255, 50, 0.7)",
        ],
        circleColor: [
          // "rgba(255, 180, 150, 0.99)",
          // "rgba(43, 231, 253, 0.99)",
          'rgba(0, 127, 241, 0.99)'
          // "rgba(255, 255, 50, 0.99)",
        ],
        textColor: [
          // "rgba(255, 100, 60, 0.99)",
          // "rgba(43, 231, 253, 0.99)",
          'rgba(126, 187, 255, 1)'
          // "rgba(255, 255, 50, 0.99)",
        ],
        textStrokeColor: '#fff'
      },
      lightStyle: {
        style: 'amap://styles/whitesmoke',
        polygonColor: [
          // "rgba(255, 100, 60, 0.3)",
          'rgba(43, 231, 253, 0.3)'
          // "rgba(255, 255, 50, 0.3)",
        ],
        lineColor: [
          // "rgba(220, 150, 120, 0.9)",
          'rgba(155, 212, 242, 1)'
          // "rgba(200, 200, 50, 0.9)",
        ],
        circleColor: [
          // "rgba(255, 180, 150, 0.99)",
          'rgba(13, 181, 203, 0.8)'
          // "rgba(255, 255, 50, 0.99)",
        ],
        textColor: [
          // "rgba(200, 50, 10, 0.99)",
          'rgba(0, 130, 153, 0.99)'
          // "rgba(120, 120, 0, 0.99)",
        ],
        textStrokeColor: '#666'
      },
      headerList: [
        { name: '年平均气温', units: '°C', num: '24' },
        { name: '年日光照', units: '小时', num: '2700' },
        { name: '无霾期', units: '天', num: '200' },
        { name: '年平均降水', units: '毫升', num: '687' },
        { name: '土壤有机质', units: '含量', num: '1.5%' }
      ],
      mapType: '',
      showPage: false,
      width: 1920,
      height: 960
    }
  },
  created () {
    // 获取屏幕高度
    const screenHeight = window.innerHeight
    // 判断屏幕高度并设置变量的值
    if (screenHeight === 960) {
      this.height = 960
    } else if (screenHeight === 1080) {
      this.height = 1080
    } else {
      this.height = 960
    }
    // console.log(this.height, 'this.height')

    if (width && height) {
      this.width = width
      this.height = height
    }
  },
  mounted () {
    window._AMapSecurityConfig = {
      securityJsCode: '92ea2c965c6cf1ba7ee3a8fe01449ef2'
    }
    this.$nextTick(() => {
      this.$EventBus.$on('switcMapType1', (data) => {
        this.switcMapType1(data)
      })
    })
    selectConfigList({ type: 2 }).then((res) => {
      this.headerList = this.headerList.map((item) => {
        const data = res.data.filter((i) => i.name == item.name)
        return {
          ...item,
          num: data[0].value
        }
      })
    })
  },
  methods: {
    ...mapActions({
      set_qyjj: 'SET_QYJJ',
      set_gsxq_id: 'SET_GSXQ_ID'
    }),
    ...mapActions({}),
    openCompanyDetail (item) {
      console.log('item::', item)
      this.set_qyjj(true)
      this.set_gsxq_id(item.id)
    },
    async switcMapType1 (arr) {
      this.removeDotLayers()
      this.initDot(point, arr)
    },
    removeDotLayers () {
      scene.removeLayer(dotLayer)
      scene.removeLayer(dotLayer1)
      scene.removeLayer(dotLayer2)
      scene.removeLayer(dotLayer3)
    },
    toProvince () {
      this.mapFlag = 'Amap'
      setTimeout(() => {
        this.init()
      }, 1000)
    },
    init () {
      if (!yifengJson) return false
      myMapZd = new GaodeMap({
        pitch: 40.24716321414439,
        mapStyle: 'amap://styles/blue',
        // style: styleConfig.style,
        showLabel: false,
        center: [120.220563, 36.496127],
        token: 'fc14b42e0ca18387866d68ebd4f150c1',
        zoom: 13,
        isHotspot: false,
        showIndoorMap: false,
        showBuildingBlock: false,
        resizeEnable: true,
        // doubleClickZoom: false,
        showRoad: false,
        viewMode: '3D'
      })
      scene = new Scene({
        id: 'myMapZd',
        logoVisible: false,
        map: myMapZd
      })
      this.showPage = true
      const mapContent = document.getElementById('myMapZd')
      const scaleWH = this.$store.state.basic.scale
      mapContent.style.transform = `scale(${1 / scaleWH})`
      scene.addImage(
        'yuzhong',
        require('@/assets/images/map/keyQy/yuzhong.png')
      )
      scene.addImage('yumiao', require('@/assets/images/map/keyQy/yumiao.png'))
      scene.addImage(
        'zhongzhi',
        require('@/assets/images/map/keyQy/zhongzhi.png')
      )
      scene.addImage(
        'jiagong',
        require('@/assets/images/map/keyQy/jiagong.png')
      )
      scene.on('loaded', () => {
        this.initPolygonLayer()
      })
    },
    initPolygonLayer () {
      scene.removeLayer(polygonLayer)
      scene.removeLayer(polygonLayer1)
      scene.removeLayer(lineLayer)
      this.removeDotLayers()
      this.mapType = 'polygon'
      const { darkStyle } = this
      const styleConfig = darkStyle
      const data = yifengJson
      const data1 = jdbandaoJson
      // 画区域面积
      polygonLayer = new PolygonLayer({
        zIndex: 1,
        autoFit: true
      })
        .source(data1)
        // .color('name', ['rgba(0, 127, 241, .5)'])
        .color('name', ['rgba(0, 0, 255,0.2)'])
        .shape('fill')
        .style({
          // opacityLinear: {
          //   enable: true, // true - false
          //   dir: 'out' // in - out
          // },
          opacity: 0.6,
          // heightfixed: true,
          sourceColor: '#4ee8fc',
          targetColor: '#00284e'
        })
      scene.addLayer(polygonLayer)
      polygonLayer1 = new PolygonLayer({
        zIndex: 2,
        autoFit: true
      })
        .size(1)
        .source(data)
        .color('name', ['rgba(0,106,235, .9)'])
        .shape('extrude')
        .style({
          opacityLinear: {
            enable: true, // true - false
            dir: 'out' // in - out
          },
          opacity: 0.8,
          heightfixed: true,
          sourceColor: '#3372d0',
          targetColor: '#00284e'
        })
      scene.addLayer(polygonLayer1)
      // 画区域边
      lineLayer = new LineLayer({
        zIndex: 2,
        name: 'line2'
      })
        .source(data)
        .shape('line')
        .size(1)
        .color('name', styleConfig.lineColor)
        .style({
          opacity: 1
        })
        .animate({
          interval: 1, // 间隔
          duration: 2, // 持续时间，延时
          trailLength: 2 // 流线长度
        })
      scene.addLayer(lineLayer)
      polygonLayer1.on('click', (e) => {
        console.log('222', e)
      })
    },
    initDot (data, arr) {
      this.removeDotLayers()
      // textOffset改为动态的 this.buttonIndex == 3 [10,60] 否则就是 [-30 60]
      const images = {
        育种企业: 'yuzhong',
        育苗企业: 'yumiao',
        种植企业: 'zhongzhi',
        加工企业: 'jiagong'
      }
      const gaoliang = [
        '瑞克斯旺（中国）农业科技有限公司',
        '青岛德龙种子有限公司',
        '青岛世农种苗有限公司',
        '山东汉研种业科技有限公司',
        '青岛润之禾农业科技有限公司',
        '青岛诚一果蔬现代农业专业合作社',
        '青岛龙之园绿色食品有限公司'
      ]
      if (arr.some((item) => item === '育种企业')) {
        dotLayer = new PointLayer({ zIndex: 30 })
          .source(data['育种企业'])
          .shape(images['育种企业'])
          .size('name', (val) => {
            if (gaoliang.some((item) => item === val)) {
              return 12
            }
            return 10
          })
        scene.addLayer(dotLayer)
      }
      if (arr.some((item) => item === '育苗企业')) {
        dotLayer1 = new PointLayer({ zIndex: 30 })
          .source(data['育苗企业'])
          .shape(images['育苗企业'])
          .size('name', (val) => {
            if (gaoliang.some((item) => item === val)) {
              return 12
            }
            return 10
          })
        scene.addLayer(dotLayer1)
      }
      if (arr.some((item) => item === '种植企业')) {
        dotLayer2 = new PointLayer({ zIndex: 30 })
          .source(data['种植企业'])
          .shape(images['种植企业'])
          .size('name', (val) => {
            if (gaoliang.some((item) => item === val)) {
              return 12
            }
            return 10
          })
        scene.addLayer(dotLayer2)
      }
      if (arr.some((item) => item === '加工企业')) {
        dotLayer3 = new PointLayer({ zIndex: 30 })
          .source(data['加工企业'])
          .shape(images['加工企业'])
          .size('name', (val) => {
            if (gaoliang.some((item) => item === val)) {
              return 12
            }
            return 10
          })
        scene.addLayer(dotLayer3)
      }
      dotLayer.on('click', (e) => {
        console.log('e::', e)
        if (gaoliang.some((item) => item === e.feature.properties.name)) {
          this.openCompanyDetail(e.feature.properties)
        }
      })
      dotLayer1.on('click', (e) => {
        if (gaoliang.some((item) => item === e.feature.properties.name)) {
          this.openCompanyDetail(e.feature.properties)
        }
      })
      dotLayer2.on('click', (e) => {
        if (gaoliang.some((item) => item === e.feature.properties.name)) {
          this.openCompanyDetail(e.feature.properties)
        }
      })
      dotLayer3.on('click', (e) => {
        if (gaoliang.some((item) => item === e.feature.properties.name)) {
          this.openCompanyDetail(e.feature.properties)
        }
      })
    }
  },
  components: { chinaMap },
  computed: {
    ...mapGetters(['navId'])
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.next1 {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.2s;
  transform-origin: 0 0;
  overflow: hidden;
  z-index: 99;
}
.map-header {
  position: absolute;
  top: 200px;
  left: 45%;
  transform: scale(0.7) translate(-50%);
  width: 745px;
  height: 58px;
  z-index: 99;
}

.map-legeng {
  position: absolute;
  top: 550px;
  left: 654px;
  transform: scale(0.7) translate(-50%);
  width: 140px;
  height: 260px;
  z-index: 99;
}

.bg_img {
  background: url("~@/assets/images/map/echartsBg.png");
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  .title {
    width: 802px;
    height: 98px;
    background: url("~@/assets/images/map/title.png");
    background-size: 100% 100%;
    position: absolute;
    top: 80px;
    transform: translate(-401px);
    left: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 16px 30px;
    box-sizing: border-box;
  }

  .pot {
    position: absolute;
    right: 732px;
    top: 445px;
    display: flex;
    flex-direction: column;
    align-items: center;

    > :nth-child(1) {
      width: 138px;
      height: 142px;
    }

    > :nth-child(2) {
      width: 70px;
      height: 32px;
      position: relative;
      top: -60px;
      left: 20px;
      z-index: 30;
    }

    // &::after {
    //   content: "黄金育种带";
    //   display: block;
    //   width: 650px;
    //   font-size: 22px;
    //   padding-bottom: 12px;
    //   height: 24px;
    //   color: rgb(254, 221, 0);
    //   text-align: center;
    //   line-height: 24px;
    //   border-bottom: 2px rgb(254, 221, 0) dashed;
    //   border-radius: 150px;
    //   position: absolute;
    //   right: -17px;
    //   top: 34px;
    // }
  }
  .pot1 {
    position: absolute;
    width: 100%;
    left: -50px;
    background: url("~@/assets/images/common/yellowQuxian.png") no-repeat;
    background-position: center 13px;
    height: 72px;
    margin-top: 24px;
    overflow: hidden;
    display: block;
    font-size: 22px;
    padding-top: 12px;
    color: rgb(254, 221, 0);
    text-align: center;
    line-height: 24px;

    .meteor {
      position: absolute;
      left: 570px;
      top: 16px;
      // left: 500px;
      // background-color: #fff;
      // width: 20px;
      // height: 10px;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 40px solid white; /* 更改颜色以匹配所需 */
      filter: blur(3px); /* 模糊效果 */
      opacity: 0.8; /* 控制透明度 */
      animation: meteor-fall 5s linear infinite;
      transform: rotate(186deg);
    }

    /* 动画关键帧 */
    @keyframes meteor-fall {
      0% {
        left: 580px;
        top: 26px;
        transform: rotate(187deg);
      }
      25% {
        top: 59px;
        transform: rotate(182deg);
      }
      50% {
        transform: rotate(180deg);
        top: 66px;
      }
      75% {
        transform: rotate(178deg);
        top: 60px;
      }
      100% {
        left: 1350px;
        top: 30px;
        transform: rotate(173deg);
      }
    }
    .meteor::before,
    .meteor::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      animation: glow-effect 1s linear infinite;
    }

    /* 发光动画 */
    @keyframes glow-effect {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  }
}

#myMapZd {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // z-index: 100000000000000000000000000000;
}
</style>