高德地圖vue實現自定義標點熱力圖效果（縮放時展示不同數據）

高德地圖插件引入省略。。。樣式和vue基礎組件省略。。。

如果每個標點沒有數值，則可以用點聚合來實現功能
下面例子，每個標點會有按市統計的數值，而且縮放一定程度時，需要展示按省統計的標點，因此需要自定義標點樣式和監聽地圖縮放時間，來實現這個功能

效果圖

1.1：初始化時，按省進行統計
在這里插入圖片描述
1.2：地圖放大一定程度時，按市進行統計

同一個經緯點可支持展示兩個數據

在這里插入圖片描述

代碼實現

<template><div class="infringement-map"><div style="height: 100%;" class="card-style"><Row style="height: 100%" :gutter="16"><Col span="24" style="border-left:1px solid #E5E5E5;height: calc(100% - 30px);"><Row class="detail-header " style="background-color: #fff;"><span>高德熱力圖</span></Row><Row class="bg-white top-border" style="padding: 5px 10px;height: 100%" :gutter="22"><Col style="height: 100%;" span="24"><div class="box-wrap"><div id="tort-map"></div></div></Col></Row></Col></Row></div></div>
</template><script>
export default {data() {return {map: null,cityCoordinateList: [],provinceCoordinateList: [],listData: [],markersList: [],totalPoints: null,isLoadedProvince: false,isLoadedCity: false}},mounted() {this.initMap()this.searchHandler()},beforeDestroy() {this.map && this.map.destroy()this.zoomOff()},methods: {searchHandler() {const res = {'code': 0,'message': '','data': {'cityCoordinateList': [{'latitude': '116.405285','longitude': '39.904989','name': '北京','sellerQty': 14,'mfrsQty': null},{'latitude': '114.352482','longitude': '36.103442','name': '安陽市','sellerQty': null,'mfrsQty': 1},{'latitude': '113.051227','longitude': '23.685022','name': '清遠市','sellerQty': 9,'mfrsQty': null},{'latitude': '116.587245','longitude': '35.415393','name': '濟寧市','sellerQty': 2,'mfrsQty': null},{'latitude': '102.712251','longitude': '25.040609','name': '昆明市','sellerQty': null,'mfrsQty': 4},{'latitude': '111.975107','longitude': '21.859222','name': '陽江市','sellerQty': 2,'mfrsQty': null},{'latitude': '119.649506','longitude': '29.089524','name': '金華市','sellerQty': 1,'mfrsQty': null},{'latitude': '120.153576','longitude': '30.287459','name': '杭州市','sellerQty': 1,'mfrsQty': null},{'latitude': '114.412599','longitude': '23.079404','name': '惠州市','sellerQty': 1,'mfrsQty': null},{'latitude': '113.442973','longitude': '30.328407','name': '仙桃市','sellerQty': 4,'mfrsQty': null},{'latitude': '121.472644','longitude': '31.231706','name': '上海','sellerQty': 3,'mfrsQty': null},{'latitude': '111.134335','longitude': '37.524366','name': '呂梁市','sellerQty': 1,'mfrsQty': null},{'latitude': '108.948024','longitude': '34.263161','name': '西安市','sellerQty': 1,'mfrsQty': null},{'latitude': '117.043551','longitude': '30.50883','name': '安慶市','sellerQty': 1,'mfrsQty': null},{'latitude': '117.190182','longitude': '39.125596','name': '天津','sellerQty': null,'mfrsQty': 1},{'latitude': '117.283042','longitude': '31.86119','name': '合肥市','sellerQty': null,'mfrsQty': 1},{'latitude': '118.275162','longitude': '33.963008','name': '宿遷市','sellerQty': 1,'mfrsQty': null},{'latitude': '119.452753','longitude': '32.204402','name': '鎮江市','sellerQty': 1,'mfrsQty': null},{'latitude': '119.527082','longitude': '26.65924','name': '寧德市','sellerQty': 1,'mfrsQty': null},{'latitude': '113.132855','longitude': '29.37029','name': '岳陽市','sellerQty': 1,'mfrsQty': null},{'latitude': '118.175393','longitude': '39.635113','name': '唐山市','sellerQty': 1,'mfrsQty': null},{'latitude': '110.364977','longitude': '21.274898','name': '湛江市','sellerQty': 1,'mfrsQty': null},{'latitude': '87.617733','longitude': '43.792818','name': '烏魯木齊市','sellerQty': 1,'mfrsQty': null},{'latitude': '118.11022','longitude': '24.490474','name': '廈門市','sellerQty': 2,'mfrsQty': null},{'latitude': '114.085947','longitude': '22.547','name': '深圳市','sellerQty': 4,'mfrsQty': null},{'latitude': '82.074778','longitude': '44.903258','name': '博爾塔拉蒙古自治州','sellerQty': 1,'mfrsQty': null},{'latitude': '116.632301','longitude': '23.661701','name': '潮州市','sellerQty': 1,'mfrsQty': null},{'latitude': '113.280637','longitude': '23.125178','name': '廣州市','sellerQty': 1,'mfrsQty': 1},{'latitude': '115.469381','longitude': '35.246531','name': '菏澤市','sellerQty': null,'mfrsQty': 1},{'latitude': '109.702392','longitude': '18.638189','name': '保亭黎族苗族自治縣','sellerQty': 1,'mfrsQty': null},{'latitude': '126.427839','longitude': '41.942505','name': '白山市','sellerQty': 1,'mfrsQty': null},{'latitude': '106.504962','longitude': '29.533155','name': '重慶','sellerQty': 1,'mfrsQty': 1},{'latitude': '126.642464','longitude': '45.756967','name': '哈爾濱市','sellerQty': 1,'mfrsQty': null},{'latitude': '110.299121','longitude': '25.274215','name': '桂林市','sellerQty': 1,'mfrsQty': null},{'latitude': '114.391136','longitude': '27.8043','name': '宜春市','sellerQty': 1,'mfrsQty': null},{'latitude': '113.665412','longitude': '34.757975','name': '鄭州市','sellerQty': 1,'mfrsQty': null},{'latitude': '105.724998','longitude': '34.578529','name': '天水市','sellerQty': 1,'mfrsQty': null},{'latitude': '108.320004','longitude': '22.82402','name': '南寧市','sellerQty': 1,'mfrsQty': null},{'latitude': '120.301663','longitude': '31.574729','name': '無錫市','sellerQty': 2,'mfrsQty': null}],'provinceCoordinateList': [{'latitude': '103.823557','longitude': '36.058039','name': '甘肅省','sellerQty': 1,'mfrsQty': null},{'latitude': '114.502461','longitude': '38.045474','name': '河北省','sellerQty': 1,'mfrsQty': null},{'latitude': '117.000923','longitude': '36.675807','name': '山東省','sellerQty': 2,'mfrsQty': 1},{'latitude': '118.767413','longitude': '32.041544','name': '江蘇省','sellerQty': 4,'mfrsQty': null},{'latitude': '116.405285','longitude': '39.904989','name': '北京','sellerQty': 14,'mfrsQty': null},{'latitude': '102.712251','longitude': '25.040609','name': '云南省','sellerQty': null,'mfrsQty': 4},{'latitude': '110.33119','longitude': '20.031971','name': '海南省','sellerQty': 1,'mfrsQty': null},{'latitude': '125.3245','longitude': '43.886841','name': '吉林省','sellerQty': 1,'mfrsQty': null},{'latitude': '119.306239','longitude': '26.075302','name': '福建省','sellerQty': 3,'mfrsQty': null},{'latitude': '120.153576','longitude': '30.287459','name': '浙江省','sellerQty': 2,'mfrsQty': null},{'latitude': '114.298572','longitude': '30.584355','name': '湖北省','sellerQty': 4,'mfrsQty': null},{'latitude': '121.472644','longitude': '31.231706','name': '上海','sellerQty': 3,'mfrsQty': null},{'latitude': '113.280637','longitude': '23.125178','name': '廣東省','sellerQty': 19,'mfrsQty': 1},{'latitude': '106.504962','longitude': '29.533155','name': '重慶','sellerQty': 1,'mfrsQty': 1},{'latitude': '112.549248','longitude': '37.857014','name': '山西省','sellerQty': 1,'mfrsQty': null},{'latitude': '117.190182','longitude': '39.125596','name': '天津','sellerQty': null,'mfrsQty': 1},{'latitude': '115.892151','longitude': '28.676493','name': '江西省','sellerQty': 1,'mfrsQty': null},{'latitude': '108.948024','longitude': '34.263161','name': '陜西省','sellerQty': 1,'mfrsQty': null},{'latitude': '126.642464','longitude': '45.756967','name': '黑龍江省','sellerQty': 1,'mfrsQty': null},{'latitude': '113.665412','longitude': '34.757975','name': '河南省','sellerQty': 1,'mfrsQty': 1},{'latitude': '87.617733','longitude': '43.792818','name': '新疆維吾爾自治區','sellerQty': 2,'mfrsQty': null},{'latitude': '117.283042','longitude': '31.86119','name': '安徽省','sellerQty': 1,'mfrsQty': 1},{'latitude': '108.320004','longitude': '22.82402','name': '廣西壯族自治區','sellerQty': 2,'mfrsQty': null},{'latitude': '112.982279','longitude': '28.19409','name': '湖南省','sellerQty': 1,'mfrsQty': null}]}}this.removeMarkers()// 按市統計的數據this.cityCoordinateList = res.data && res.data.cityCoordinateList || []// 按省統計的數據this.provinceCoordinateList = res.data && res.data.provinceCoordinateList || []// 默認按省進行標點，按省匯總標點總數this.totalPoints = this.provinceCoordinateList.lengththis.addPoint('province')},/** ******  地圖 start  ********/// 初始化地圖initMap() {this.map = new AMap.Map('tort-map', {zoom: 4, // 級別mapStyle: 'amap://styles/grey',center: [116.397428, 39.90923], // 中心點坐標viewMode: '3D' // 使用3D視圖})this.map.on('complete', () => {console.log('地圖渲染完成')this.zoomOn()})},addPoint(type) {const pointList = type === 'province' ? this.provinceCoordinateList : this.cityCoordinateListpointList.forEach(item => {const marker = new AMap.Marker({position: [item.latitude, item.longitude], // 位置// 將 html 傳給 contentcontent: this.preRenderMarker(item)})this.map.add(marker) // 添加到地圖// 記錄地圖上的標點，移除時需要this.markersList.push(marker)})},preRenderMarker(item) {// item.mfrsQty：M數據  item.sellerQty：S數據const { mfrsQty, sellerQty } = itemif (mfrsQty && sellerQty) {// M數據和S數據都有值，則渲染復合的標記return this.renderClusterMarkerBoth(mfrsQty, sellerQty)} else if (mfrsQty) {// 只有M數據有值，渲染M數據的標點return this.renderClusterMarker(mfrsQty, 'mfrsQty')} else if (sellerQty) {// 只有S數據有值，渲染S數據的標點return this.renderClusterMarker(sellerQty, 'sellerQty')}},getBgColorByType (clusterCount, type) {let bgColor = null// 聚合點配色const defaultColor = type === 'mfrsQty' ? ['253,187,187','247,162,162','237,127,127','228,93,93','219,60,60']: ['195,252,195','178,240,178','153,222,154','130,205,131','120,198,121']if (clusterCount >= 0 && clusterCount < 10) {bgColor = defaultColor[0]} else if (clusterCount >= 10 && clusterCount < 50) {bgColor = defaultColor[1]} else if (clusterCount >= 50 && clusterCount < 100) {bgColor = defaultColor[2]} else if (clusterCount >= 100 && clusterCount < 200) {bgColor = defaultColor[3]} else if (clusterCount >= 200) {bgColor = defaultColor[4]}return bgColor},// 單種類型的標點自定義樣式renderClusterMarker (count, type) {// 聚合中點個數const clusterCount = countconst bgColor = this.getBgColorByType(count, type)const div = document.createElement('div')div.style.backgroundColor = 'rgba(' + bgColor + ',.5)'const size = Math.round(10 + Math.pow(clusterCount / this.totalPoints, 1 / 10) * 20)div.style.width = div.style.height = size + 'px'div.style.border = 'solid 1px rgba(' + bgColor + ',1)'div.style.borderRadius = size / 2 + 'px'div.innerHTML = clusterCountdiv.style.lineHeight = size + 'px'div.style.color = '#ffffff'div.style.fontSize = '12px'div.style.textAlign = 'center'return div},// 兩種類型的標點自定義樣式renderClusterMarkerBoth (mfrsQty, sellerQty) {const bgColorS = this.getBgColorByType(sellerQty, 'sellerQty')const bgColorM = this.getBgColorByType(mfrsQty, 'mfrsQty')const divDom = document.createElement('div')const divS = document.createElement('div')const divM = document.createElement('div')divDom.style.display = 'flex'divS.style.backgroundColor = 'rgba(' + bgColorS + ',.5)'divS.style.width = 30 + 'px'divS.style.height = 20 + 'px'divS.style.lineHeight = 20 + 'px'divS.style.border = 'solid 1px rgba(' + bgColorS + ',1)'divS.style.borderRadius = '30px 0 0 30px'divS.innerHTML = sellerQtydivS.style.color = '#ffffff'divS.style.fontSize = '12px'divS.style.textAlign = 'center'divM.style.backgroundColor = 'rgba(' + bgColorM + ',.5)'divM.style.width = 30 + 'px'divM.style.height = 20 + 'px'divM.style.lineHeight = 20 + 'px'divM.style.border = 'solid 1px rgba(' + bgColorM + ',1)'divM.style.borderRadius = '0 30px 30px 0'divM.innerHTML = mfrsQtydivM.style.color = '#ffffff'divM.style.fontSize = '12px'divM.style.textAlign = 'center'divDom.append(divS)divDom.append(divM)return divDom},removeMarkers() {this.map && this.map.remove(this.markersList)},// 地圖縮放等級改變mapZoom() {const currentZoom = this.map.getZoom() // 獲取當前地圖級別if (currentZoom <= 4 && !this.isLoadedProvince) {// 按省來渲染標記this.totalPoints = this.provinceCoordinateList.lengththis.isLoadedProvince = truethis.isLoadedCity = falsethis.removeMarkers()this.addPoint('province')} else if (currentZoom > 4 && !this.isLoadedCity) {// 按市渲染標記this.totalPoints = this.cityCoordinateList.lengththis.isLoadedCity = truethis.isLoadedProvince = falsethis.removeMarkers()this.addPoint('city')}},// 地圖縮放事件綁定zoomOn() {this.map && this.map.on('zoomchange', this.mapZoom)},// 地圖縮放事件解綁zoomOff() {this.map && this.map.off('zoomchange', this.mapZoom)}}
}</script><style scoped lang="scss">
.infringement-map {height: 100%;margin-top: -35px;.box-wrap {height: 100%;#tort-map {width: 100%;height: 100%;.citylist_popup_main {.city_content_top {box-sizing: content-box;}}}}
}
</style>