tnbapp/src/views/geo/GeoMap.vue

<template>
  <div id="container" class="amap-wrapper">
    <el-amap
      class="amap-box"
      :vid="'amap-vue'"
      :amap-manager="amapManager"
      :zoom="zoom"
      :center="mapCenter"
      :plugin="plugins"
      :events="mapEvents"
    >
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker.position"
        :label="marker.label"
        :events="markerEvents"
        :ext-data="marker.extData"
      />
    </el-amap>

    <!-- marker 内容弹窗   -->
    <el-dialog
      append-to-body
      :visible.sync="showMarkerDialog"
      :before-close="handleDialogClose"
      width="30%"
      center
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-button
            v-clipboard:copy="earthPoint.lat + ' ' + earthPoint.lng"
            v-clipboard:success="onCopy"
            v-clipboard:error="onCopyError"
            type="text"
          >GoogleEarth 坐标</el-button>
        </div>
        <div class="text item">
          <el-image v-if="markerInfo.photoUrl !== null" :src="markerInfo.photoUrl" min-width="40" height="30" />
          <div v-if="markerInfo.type === 3">
            <el-row>
              <el-row>
                ID
                <a style="text-decoration-line: none" target="_blank" :href="`https://item.taobao.com/item.htm?id=${markerInfo.itemId}`">
                  <span style="color: blue">{{ markerInfo.itemId }}</span>
                </a>
              </el-row>
              <el-row>
                SKU <span style="color: blue" v-text="markerInfo.sku" />
              </el-row>
              <el-row>
                评论 <span style="color: blue" v-text="markerInfo.replyContent" />
              </el-row>
            </el-row>
          </div>
          <div v-if="markerInfo.type === 2">
            <el-row>
              <el-row>
                ID
                <router-link style="text-decoration-line: none" target="_blank" :to="`/image/${markerInfo.itemId}`">
                  <span style="color: blue">{{ markerInfo.itemId }}</span>
                </router-link>
              </el-row>
            </el-row>
          </div>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { getPhotoMarks, getMarkerInfo } from '@/api/map'

import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: 'your amap key',
  plugin: [
    'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar',
    'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MassMarks', 'AMap.Size',
    'AMap.Pixel'
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.15'
})

import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
const amapManager = new AMapManager()

export default {
  name: 'GeoMap',
  data() {
    return {
      amap: null,
      plugins: ['Scale'],
      mapCenter: [108.337237, 33.881985],
      // zoom=6 的比例尺为 100km
      // zoom=5 的比例尺为 200km
      // zoom=4 的比例尺为 500km
      zoom: 5,
      markers: [],
      markerEvents: {
        click: (e) => {
          const id = e.target.getExtData().id
          const position = e.target.getPosition()
          const item = {
            id: id,
            position: {
              lng: position.lng,
              lat: position.lat
            }
          }
          this.getMarkerInfoWrapper(item)
        }
      },
      /* 海量点 */
      massMarks: null,
      amapManager,
      mapEvents: {
        init: this.mapInit,
        zoomchange: this.zoomchange
      },
      itemType: 4,
      // 弹框数据
      showMarkerDialog: false,
      markerInfo: {
        itemId: null,
        sku: null,
        replyId: null,
        replyContent: null,
        appendContent: null,
        photoUrl: null
      },
      earthPoint: {
        lat: null,
        lng: null
      }
    }
  },
  created() {
    document.title = 'CupMap'
  },
  methods: {
    mapInit(o) {
      this.amap = o
      lazyAMapApiLoaderInstance.load().then(() => {
        // 图标样式
        var styleObject = {
          url: '//webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 图标地址
          size: new AMap.Size(11, 11), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        }

        // 海量点样式
        const massMarks = new AMap.MassMarks([], {
          zIndex: 5, // 海量点图层叠加的顺序
          zooms: [3, 10], // 在指定地图缩放级别范围内展示海量点图层
          style: styleObject // 设置样式对象
        })

        // 将海量标点添加至地图实例
        massMarks.setMap(o)
        // 添加点击事件
        massMarks.on('click', (e) => {
          console.log('massMark 点击事件')
        })
        this.massMarks = massMarks
        this.getPhotoMarksWrapper(this.itemType)
      })
    },
    zoomchange(e) {
      console.log('当前缩放级别: ' + this.amap.getZoom())
    },
    getPhotoMarksWrapper(type) {
      this.markers = []
      getPhotoMarks(type).then(res => {
        if (res.code === 0) {
          this.$notify({
            message: '加载了 ' + res.data.length + ' 条数据',
            type: 'warning',
            duration: 5000
          })

          for (const item of res.data) {
            this.markers.push({
              position: [item.position.lng, item.position.lat],
              label: { content: item.title, offset: [0, 0] },
              extData: { id: item.id }
            })
          }
        } else {
          this.$notify({
            message: res.msg,
            type: 'warning',
            duration: 1000
          })
        }
      }).catch(error => {
        this.$notify({
          message: error.message,
          type: 'warning',
          duration: 1000
        })
      })
    },
    // 渲染海量点
    getPhotoMarksWrapper1(type) {
      this.massMarks.setData([])
      getPhotoMarks(type).then(res => {
        if (res.code === 0) {
          this.$notify({
            message: '加载了 ' + res.data.length + ' 条数据',
            type: 'warning',
            duration: 5000
          })

          const massMarkers = []
          for (const item of res.data) {
            massMarkers.push({
              lnglat: [item.position.lng, item.position.lat],
              id: item.id
            })
          }
          this.massMarks.setData(massMarkers)
          this.zoom = 5
        } else {
          this.$notify({
            message: res.msg,
            type: 'warning',
            duration: 1000
          })
        }
      }).catch(error => {
        this.$notify({
          message: error.message,
          type: 'warning',
          duration: 1000
        })
      })
    },
    getMarkerInfoWrapper(item) {
      this.earthPoint = item.position
      this.showMarkerDialog = true
      this.markerInfo = {
        itemId: null,
        sku: null,
        replyId: null,
        replyContent: null,
        appendContent: null,
        photoUrl: null
      }

      getMarkerInfo(item.id).then(res => {
        if (res.code === 0) {
          this.markerInfo = res.data
        } else {
          this.showMarkerDialog = false
        }
      }).catch(error => {
        this.showMarkerDialog = false
        console.log(error)
      })
    },
    /* 弹出框 */
    handleDialogClose(done) {
      this.showMarkerDialog = false
      this.earthPoint = { lat: null, lng: null }
      done()
    },
    onCopy(e) {
      this.$notify({
        message: 'GoogleEarth 坐标已复制, 快到 GoogleEarth 中去找这个地方吧~',
        type: 'warning',
        duration: 1000
      })
    },
    onCopyError(e) {
      this.$notify({
        message: '复制 GoogleEarth 坐标失败!',
        type: 'error',
        duration: 1000
      })
    },
    onChange() {
      this.getPhotoMarksWrapper(this.itemType)
    }
  }
}
</script>

<style>
.amap-wrapper {
  width: 100%;
  height: 100%;
}
</style>