SaaS-DataScreen/src/views/components/community-map/index.vue

<template>
    <Card :title="title" :icon="icon" class="community-map">
      <div class="map-con">
        <tdt-map style="position: relative;z-index: 0;" mapStyle="indigo" :center="[
            105,
            34,
          ]"
          :zoom="5"
          :minZoom="5"
          :maxZoom="5"
          :controls="[
            {
              name: 'Scale',
              position: 'topright'
            },]"
        >
        <!-- <div v-if="provinceList.length"> -->

          <tdt-marker-clusterer
              v-for="item in provinceList"
              :key="item.label + 'clusterer'"
              :markers="[{
                icon: {
                  iconUrl: require('./images/map-mark-icon.png'),
                  iconSize: [24, 24]
                },
                position: [item.point.lng, item.point.lat]
              }]"
              >
            </tdt-marker-clusterer>
            <tdt-label
              v-for="(item, i) in provinceList"
              :key="`${i}-label`"
              :position="[item.point.lng, item.point.lat]"
              :text="item.label">
            </tdt-label>
          <!-- </div> -->
        </tdt-map>
        <MapList title="省份" :isShow="provinceList.length" :list="provinceList" :position="{left: 30, bottom: 30}"></MapList>
      </div>
    </Card>
  </template>
<script>
import provincePosition from './province-positon'
// import { screen } from '@/api'
import Card from '@/views/components/card'
import icon from './images/icon-title.png'
import MapList from './components/map-list.vue'
export default {
  name: 'CommunityMap',
  components: {
    Card,
    MapList
  },
  data () {
    return {
      title: '项目地区分布',
      icon: icon,
      provinceList: [],
      state: {
        center: [113.280637, 23.125178],
        zoom: 12
      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.mapInit()
    }, 500)
    // this.getProjectStatistics()
  },
  methods: {
    mapInit () {
      const _data = [
        {
          provinceName: '海南省',
          count: 100
        },
        {
          provinceName: '广东省',
          count: 200
        },
        {
          provinceName: '四川省',
          count: 300
        },
        {
          provinceName: '贵州省',
          count: 400
        },
        {
          provinceName: '云南省',
          count: 500
        },
        {
          provinceName: '西藏自治区',
          count: 600
        },
        {
          provinceName: '陕西省',
          count: 700
        },
        {
          provinceName: '甘肃省',
          count: 800
        }
      ]
      let arr = []
      _data.forEach((item, i) => {
        let cName = item.provinceName.substring(0, 2)
        let province = provincePosition.find(p => p.name.indexOf(cName) !== -1)
        let ele = {
          label: province.name,
          content: item.count,
          point: {
            lng: province.geoCoord[0],
            lat: province.geoCoord[1]
          }
        }
        arr.push(ele)
      })
      this.provinceList = arr
    }
    // getProjectStatistics () {
    //   this.provinceList = []
    //   screen.getProjectStatistics()
    //     .then(({ data }) => {
    //       if (data.code === '200') {
    //         let _data = data.data
    //         let arr = []
    //         _data.provinceStatistics.forEach((item, i) => {
    //           let cName = item.provinceName.substring(0, 2)
    //           let province = provincePosition.find(p => p.name.indexOf(cName) !== -1)
    //           let ele = {
    //             label: province.name,
    //             content: item.count,
    //             point: {
    //               lng: province.geoCoord[0],
    //               lat: province.geoCoord[1]
    //             }
    //           }
    //           arr.push(ele)
    //         })
    //         this.provinceList = arr
    //       }
    //     })
    // }
  }
}
</script>
<style lang="scss" scoped>
  @import "@/assets/css/theme.scss";
  @import "@/assets/css/mixin.scss";
  .map-con {
    position: relative;
  }
</style>