RuoYi vue-element-admin 增加原生高德地圖並顯示海量點

haiyaoyouyou發表於2020-11-20

1、在public/index.html中增加js引用

記得放到head中

  <!-- 引入高德地圖API -->
  <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=1edb3d323fb05a961b3321111111ddff145"></script>

2、vue.config.js 增加配置內容

    externals: {
      'AMap': 'AMap',
      'AMapUI': 'AMapUI'
    }

3、要引用地圖的頁面

要顯示地圖的div

    <!-- 顯示地圖的div -->
    <div id="mapDiv" ref="mapDiv" class="mapDiv">
      loading...
    </div>

引用AMap

import AMap from 'AMap'

初始化地圖

 // 初始化地圖
    initMap() {
      const map = new AMap.Map('mapDiv', {
        center: [120.56587, 36.20366],
        resizeEnable: true,
        zoom: 12
        // lang: 'en'
      })
      this.map = map

      // 地圖新增各種控制元件
      AMap.plugin(['AMap.ControlBar', 'AMap.Scale', 'AMap.MapType', 'AMap.Geolocation'], function() {
        // 在圖面新增工具條控制元件，工具條控制元件整合了縮放、平移、定位等功能按鈕在內的組合控制元件
        map.addControl(new AMap.ToolBar())
        // 在圖面新增類別切換控制元件，實現預設圖層與衛星圖、實施交通圖層之間切換的控制
        map.addControl(new AMap.MapType())

        // 在圖面新增定位控制元件，用來獲取和展示使用者主機所在的經緯度位置
        // map.addControl(new AMap.Geolocation())

        // 在圖面新增比例尺控制元件，展示地圖在當前層級和緯度下的比例尺
        map.addControl(new AMap.Scale())
      })

      // 海量點的樣式
      var style = [{
        // 必填引數,圖示的地址
        url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
        // 必填引數，圖示顯示位置偏移量，以圖示的左上角為基準點（0,0）點，例如：anchor:new AMap.Pixel(5,5)
        anchor: new AMap.Pixel(6, 6),
        // 必填引數，圖示的尺寸；例如：size:new AMap.Size(11,11)
        size: new AMap.Size(11, 11)
      },
      // 紅色 未除治
      {
        url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IPiAEO2hAAAEJdf9ZKs794.png',
        anchor: new AMap.Pixel(6, 6),
        size: new AMap.Size(11, 11)
      },
      // 綠色  已經除治
      {
        url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IriAQ7-IAAAEJWeQRis039.png',
        anchor: new AMap.Pixel(6, 6),
        size: new AMap.Size(11, 11)
      },
      // 灰色以前的資料
      {
        url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IyGAS1xQAAAEJeELcZs238.png',
        anchor: new AMap.Pixel(6, 6),
        size: new AMap.Size(11, 11)
      }]

      this.mass = new AMap.MassMarks(null, {
        // 圖層的透明度，取值範圍[0,1]，1代表完全不透明，0代表完全透明
        opacity: 0.6,
        // 圖層疊加的順序值，0表示最底層。預設zIndex：5
        zIndex: 111,
        // 指定滑鼠懸停時的滑鼠樣式，自定義cursor，IE僅支援cur/ani/ico格式，Opera不支援自定義cursor
        cursor: 'pointer',
        style: style,
        // 表示是否在拖拽縮放過程中實時重繪，預設true，建議超過10000的時候設定false
        alwaysRender: false
      })

      // 滑鼠懸浮 彈出視窗
      var marker = new AMap.Marker({ content: ' ', map: map })

      this.mass.on('mouseover', function(e) {
        marker.setPosition(e.data.lnglat)
        marker.setLabel({ content: e.data.name })
      })

      // 海量點繫結到地圖上
      this.mass.setMap(map)
    },

附：整個vue程式碼

<template>
  <div class="app-container">
    <!-- 搜尋工具欄 -->
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="" prop="deptId">
        <!-- <treeselect v-model="form.deptId" :options="deptOptions" :disable-branch-nodes="true" :show-count="true" placeholder="請選擇歸屬部門" /> -->
        <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="歸屬區域" clearable size="small" style="width: 180px" />
      </el-form-item>
      <el-form-item label="" prop="compart">
        <el-input
          v-model="queryParams.compart"
          placeholder="請輸入小班編號"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="markSn">
        <el-input
          v-model="queryParams.markSn"
          placeholder="請輸入疫木編號"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="" prop="deptId">
        <el-input
          v-model="queryParams.deptId"
          placeholder="請輸入部門ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->

      <el-form-item label="" prop="treeStatus">
        <el-select v-model="queryParams.treeStatus" placeholder="疫木除治狀態" clearable size="small">
          <el-option
            v-for="dict in treeStatusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="markOperate">
        <el-input
          v-model="queryParams.markOperate"
          placeholder="請輸入定標操作人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="markTime">
        <el-date-picker
          v-model="queryParams.beginTime"
          clearable
          size="small"
          style="width: 200px"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="開始時間"
        />
      </el-form-item>

      <el-form-item label="" prop="markTime">
        <el-date-picker
          v-model="queryParams.endTime"
          clearable
          size="small"
          style="width: 200px"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="結束時間"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜尋</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 顯示地圖的div -->
    <div id="mapDiv" ref="mapDiv" class="mapDiv">
      loading...
    </div>

  </div>
</template>
<script>
import AMap from 'AMap'
import { listMarkAll } from '@/api/tree/mark'
import { treeselect } from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

// import tdtmap from '@/utils/tdt-map'
export default {
  name: 'Mark',
  components: { Treeselect },
  data() {
    return {

      baseURL: process.env.VUE_APP_BASE_API,
      // 遮罩層
      loading: true,
      // 選中陣列
      ids: [],
      // 非單個禁用
      single: true,
      // 非多個禁用
      multiple: true,
      // 顯示搜尋條件
      showSearch: true,
      // 總條數
      total: 0,
      // 定標資訊表格資料
      markList: [],
      // 彈出層標題
      title: '',
      // 是否顯示彈出層
      open: false,
      // 部門樹選項
      deptOptions: undefined,
      // 疫木狀態字典
      treeStatusOptions: [],
      // 定標標誌字典
      markFlagOptions: [],
      // 除治標誌字典
      sealedFlagOptions: [],
      // 定標型別字典
      markTypeOptions: [],

      // 查詢引數
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        markSn: null,
        deptId: null,
        treeStatus: null,
        compart: null,
        diam: null,
        markPic1: null,
        markPic2: null,
        markPic3: null,
        markPic4: null,
        markOperate: null,
        markTime: null,
        markUploadTime: null,
        markFlag: null,
        markRemark: null,
        operate: null
      },
      // 表單引數
      form: {},
      // 地圖物件
      map: '',
      mass: '',

      infowindowL: null // 資訊窗體

    }
  },
  created() {
    this.getList()
    this.getTreeselect()
    this.getDicts('tree_status').then(response => {
      this.treeStatusOptions = response.data
    })
    this.getDicts('work_flag').then(response => {
      this.markFlagOptions = response.data
      this.sealedFlagOptions = response.data
    })

    this.getDicts('mark_type').then(response => {
      this.markTypeOptions = response.data
    })
  },

  mounted() {
    this.initMap()
  },
  methods: {
    /** 查詢疫木位置列表 */
    getList() {
      this.loading = true
      listMarkAll(this.queryParams).then(response => {
        // 查詢到的列表
        this.markList = response.rows

        // 查詢到的總數
        this.total = response.total

        this.loading = false

        // 處理接收到的資料
        this.markPoint(this.markList)
      })
    },
    // 疫木狀態字典翻譯
    treeStatusFormat(row, column) {
      return this.selectDictLabel(this.treeStatusOptions, row.treeStatus)
    },
    // 定標型別字典翻譯
    markTypeFormat(row, column) {
      return this.selectDictLabel(this.markTypeOptions, row.markSelf)
    },
    /** 查詢部門下拉樹結構 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data
      })
    },
    // 定標標誌字典翻譯
    markFlagFormat(row, column) {
      return this.selectDictLabel(this.markFlagOptions, row.markFlag)
    },
    // 除治標誌字典翻譯
    sealedFlagFormat(row, column) {
      return this.selectDictLabel(this.sealedFlagOptions, row.sealedFlag)
    },
    // 取消按鈕
    cancel() {
      this.open = false
      this.reset()
    },

    /** 搜尋按鈕操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按鈕操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },

    // 初始化地圖
    initMap() {
      const map = new AMap.Map('mapDiv', {
        center: [120.56587, 36.20366],
        resizeEnable: true,
        zoom: 12
        // lang: 'en'
      })
      this.map = map

      // 地圖新增各種控制元件
      AMap.plugin(['AMap.ControlBar', 'AMap.Scale', 'AMap.MapType', 'AMap.Geolocation'], function() {
        // 在圖面新增工具條控制元件，工具條控制元件整合了縮放、平移、定位等功能按鈕在內的組合控制元件
        map.addControl(new AMap.ToolBar())
        // 在圖面新增類別切換控制元件，實現預設圖層與衛星圖、實施交通圖層之間切換的控制
        map.addControl(new AMap.MapType())

        // 在圖面新增定位控制元件，用來獲取和展示使用者主機所在的經緯度位置
        // map.addControl(new AMap.Geolocation())

        // 在圖面新增比例尺控制元件，展示地圖在當前層級和緯度下的比例尺
        map.addControl(new AMap.Scale())
      })

      // 海量點的樣式
      var style = [{
        // 必填引數,圖示的地址
        url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
        // 必填引數，圖示顯示位置偏移量，以圖示的左上角為基準點（0,0）點，例如：anchor:new AMap.Pixel(5,5)
        anchor: new AMap.Pixel(6, 6),
        // 必填引數，圖示的尺寸；例如：size:new AMap.Size(11,11)
        size: new AMap.Size(11, 11)
      },
      // 紅色 未除治
      {
        url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IPiAEO2hAAAEJdf9ZKs794.png',
        anchor: new AMap.Pixel(6, 6),
        size: new AMap.Size(11, 11)
      },
      // 綠色  已經除治
      {
        url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IriAQ7-IAAAEJWeQRis039.png',
        anchor: new AMap.Pixel(6, 6),
        size: new AMap.Size(11, 11)
      },
      // 灰色以前的資料
      {
        url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IyGAS1xQAAAEJeELcZs238.png',
        anchor: new AMap.Pixel(6, 6),
        size: new AMap.Size(11, 11)
      }]

      this.mass = new AMap.MassMarks(null, {
        // 圖層的透明度，取值範圍[0,1]，1代表完全不透明，0代表完全透明
        opacity: 0.6,
        // 圖層疊加的順序值，0表示最底層。預設zIndex：5
        zIndex: 111,
        // 指定滑鼠懸停時的滑鼠樣式，自定義cursor，IE僅支援cur/ani/ico格式，Opera不支援自定義cursor
        cursor: 'pointer',
        style: style,
        // 表示是否在拖拽縮放過程中實時重繪，預設true，建議超過10000的時候設定false
        alwaysRender: false
      })

      // 滑鼠懸浮 彈出視窗
      var marker = new AMap.Marker({ content: ' ', map: map })

      this.mass.on('mouseover', function(e) {
        marker.setPosition(e.data.lnglat)
        marker.setLabel({ content: e.data.name })
      })

      // 海量點繫結到地圖上
      this.mass.setMap(map)
    },

    markPoint(pointData) {
      // this.initMap()
      var len = pointData.length
      console.log('收到資料，開始處理資料，樹木資訊數量 ：' + len)
      var lnglat1 = []

      // {"lnglat":[116.258446,37.686622],"name":"景縣","style":2}
      for (var i = 0; i < len; i++) {
        var tree1 = { 'lnglat': [pointData[i].lng, pointData[i].lat], 'name': pointData[i].markSn, 'style': pointData[i].treeStatus }
        // 座標轉換
        // AMap.convertFrom(tree1.lnglat, 'gps', function(status, result) {
        //   if (result.info === 'ok') {
        //     var resLnglat = result.locations[0]
        //     tree1.lnglat = resLnglat
        //   }
        // })

        lnglat1.push(tree1)
      }

      if (document.createElement('canvas').getContext) { // 判斷當前瀏覽器是否支援繪製海量點
        console.log('資料處理完畢，進入繪製')

        // 清理位置資訊
        this.mass.clear()
        // 繫結新的位置資訊
        this.mass.setData(lnglat1)
        console.log('資料繪製完畢')
      } else {
        alert('此示例目前只有在IE9及以上瀏覽器開啟')
      }
    }

  }
}
</script>

<style scoped>
.mapDiv{
  width: 100%;
  height: 80vh;
}
</style>

最終顯示效果

高德地圖，只有部分marker顯示InfoWindow並可點選
2024-08-30
地圖
android ---------高德地圖實現定位和3D地圖顯示
2017-02-25
Android地圖3D
react中使用高德地圖的原生API
2019-06-28
React地圖API
Android Studio匯入並顯示國內地圖SDK步驟對比以及需要注意的點（百度地圖和高德地圖為例）
2019-01-19
Android地圖
顯示地圖
2017-04-18
地圖
iOS 高德地圖怎麼在螢幕內顯示所有的Marker?
2018-07-11
iOS地圖
高德地圖聚合點，增加所有點選標記，點選後展示該聚合點下所有資訊
2020-10-15
地圖
【CSDN部落格遷移】Android高德地圖開發（2）——地圖顯示+自定義控制元件
2017-05-26
Android地圖控制元件
【高德地圖API】從零開始學高德JS API（一）地圖展現——仙劍地圖，麻點圖，街景，室內圖
2014-04-25
地圖APIJS
高德地圖app怎麼使用北斗地圖? 高德地圖設定北斗地圖的教程
2020-06-23
地圖APP
高德地圖和google地圖適配
2018-07-01
地圖Go
百度API實現地圖示點並測距
2018-07-01
API地圖
pyecharts地圖功能，並解決顯示不全或只顯示南海諸島問題解決
2018-06-17
Echarts地圖
高德地圖定位實現
2018-01-24
地圖
CocoaPods 操作高德地圖
2016-06-20
地圖
高德地圖警告解決
2014-03-17
地圖
高德地圖之地圖的屬性
2019-05-05
地圖
高德地圖開發彙總
2019-03-04
地圖
高德地圖--水波雷達動畫
2017-03-14
地圖動畫
高德地圖自定義Marker點選時出現的InfoWindow
2016-11-03
地圖
百度地圖開發-顯示地圖預設介面 03
2021-08-27
地圖
高德地圖之地圖的生命週期
2019-05-05
地圖
高德地圖首席科學家任小楓：視覺智慧在高德地圖的應用
2019-10-24
地圖視覺
【高德地圖API】如何製作自己的旅遊地圖？
2014-04-22
地圖API
php怎麼實現定位地圖顯示
2021-09-11
PHP地圖
MapSCII：在終端顯示世界地圖
2018-02-07
地圖
java接入高德地圖常用WEB API
2020-02-22
Java地圖WebAPI
高德地圖的四處進擊
2020-03-05
地圖
高德地圖上展示終端資訊
2019-02-13
地圖
高德地圖JSAPI學習（一）
2021-09-09
地圖JSAPI
Flutter整合高德定位和地圖功能
2021-07-20
Flutter地圖
在Vue中使用高德地圖API
2017-09-19
Vue地圖API
高德地圖 API 介面封裝 SDK
2017-12-12
地圖API封裝
高德PC地圖啟用新域名
2015-12-22
地圖
Android高德地圖貼合圖片完成手繪地圖展示
2018-12-17
Android地圖
提-關於高德地圖熱力圖-問:
2020-11-23
地圖
高德地圖api標記點和線段重合點選響應問題
2024-03-08
地圖API
高德地圖未來行程規劃在哪裡? 高德地圖預設出行時間的技巧教程
2020-09-09
地圖行程

RuoYi vue-element-admin 增加原生高德地圖並顯示海量點

1、在public/index.html中增加js引用

2、vue.config.js 增加配置內容

3、要引用地圖的頁面

相關文章