高德地图vue实现自定义标点热力图效果（缩放时展示不同数据）

高德地图插件引入省略。。。样式和vue基础组件省略。。。

  • 如果每个标点没有数值，则可以用点聚合来实现功能
  • 下面例子，每个标点会有按市统计的数值，而且缩放一定程度时，需要展示按省统计的标点，因此需要自定义标点样式和监听地图缩放时间，来实现这个功能
  1. 效果图
    在这里插入图片描述

1.1：初始化时，按省进行统计
在这里插入图片描述
1.2：地图放大一定程度时，按市进行统计
在这里插入图片描述

  1. 同一个经纬点可支持展示两个数据

在这里插入图片描述

  1. 代码实现
<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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/210122.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

leetcode刷题日志-54螺旋矩阵

leetcode刷题日志-54螺旋矩阵

思路&#xff1a; 上下左右设置四个边界 每走完一行或者一列&#xff0c;移动相应边界&#xff0c;当左边界大于右边界&#xff0c;或者上边界大于下边界时&#xff0c;结束 代码如下&#xff1a; class Solution {public List<Integer> spiralOrder(int[][] matrix) {…
阅读更多...
线程上下文切换

线程上下文切换

线程上下文切换 巧妙地利用了时间片轮转的方式, CPU 给每个任务都服务一定的时间&#xff0c;然后把当前任务的状态保存下来&#xff0c;在加载下一任务的状态后&#xff0c;继续服务下一任务&#xff0c;任务的状态保存及再加载, 这段过程就叫做上下文切换。时间片轮转的方式…
阅读更多...
冒泡排序和直接选择排序(C/C++实现）

冒泡排序和直接选择排序(C/C++实现）

文章目录 冒泡排序(交换排序&#xff09;基本思想特性总结代码实现 直接选择排序基本思想特性总结代码实现&#xff08;优化&#xff0c;每次循环同时选择最小和最大的数&#xff09; 冒泡排序(交换排序&#xff09; 基本思想 基本思想&#xff1a;所谓交换&#xff0c;就是根…
阅读更多...
class065 A星、Floyd、Bellman-Ford与SPFA【算法】

class065 A星、Floyd、Bellman-Ford与SPFA【算法】

class065 A星、Floyd、Bellman-Ford与SPFA【算法】 2023-12-9 19:27:02 算法讲解065【必备】A星、Floyd、Bellman-Ford与SPFA code1 A*算法模版 // A*算法模版&#xff08;对数器验证&#xff09; package class065;import java.util.PriorityQueue;// A*算法模版&#xff…
阅读更多...
两年外包生涯做完，感觉自己废了一半。。。。。

两年外包生涯做完，感觉自己废了一半。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入南京某软件公司&#xff0c;干了接近2年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了2年的功能测试&…
阅读更多...
laravel的ORM 对象关系映射

laravel的ORM 对象关系映射

Laravel 中的 ORM&#xff08;Eloquent ORM&#xff09;是 Laravel 框架内置的一种对象关系映射系统&#xff0c;用于在 PHP 应用中与数据库进行交互。Eloquent 提供了一种优雅而直观的语法&#xff0c;使得开发者可以使用面向对象的方式进行数据库查询和操作。 定义模型&…
阅读更多...
结合ColorUI组件开发微信小程序

结合ColorUI组件开发微信小程序

1.自定义组件生命周期函数&#xff1a; Component({data: {},attached() {console.log("自定义组件生命周期函数 attached--先执行");this.getPos();},ready() {console.log("ready生命周期函数---在attached之后执行")},methods: {getPos() {var that th…
阅读更多...
数据结构：位图、布隆过滤器以及海量数据面试题

数据结构：位图、布隆过滤器以及海量数据面试题

位图、布隆过滤器以及海量数据面试题 1.位图1.1概念1.2实现1.3位图应用 2.布隆过滤器2.1布隆过滤器的提出2.2布隆过滤器的概念2.3布隆过滤器的查找2.4布隆过滤器的实现2.5布隆过滤器的删除2.6布隆过滤器的优点2.7布隆过滤器的缺点 3.海量数据面试题3.1哈希切分3.2位图应用3.3布…
阅读更多...
如何成为前1%的程序员

如何成为前1%的程序员

如果你想成为前1%的程序员&#xff0c;你必须遵循1%的程序员做什么&#xff0c;了解其他99%的人不做什么。在现代&#xff0c;我们有各种学习平台&#xff0c;里面充满了与编程相关的视频、图文以及其他资料。 举例来说&#xff0c;我作为编程的初学者&#xff0c;去寻找路线图…
阅读更多...
IDEA2023找不到add framework support怎么解决

IDEA2023找不到add framework support怎么解决

问题: 我的idea版本是2023.01&#xff0c;新版idea右键项目没有Add Framework Support&#xff0c;help里面也找不到相关的。 从project structue的facets里面添加就行了&#xff0c;都是一样的。 1.依旧是新建一个项目 2.file-->project structure--->facets 左上角加…
阅读更多...
Android studio如何安装ai辅助工具

Android studio如何安装ai辅助工具

引言 在没有翻墙的情况下&#xff0c;即单纯在公司打工&#xff0c;经测试&#xff0c;大部分ai工具都是使用不了的&#xff08;比如各种gpt,codeium,copilot&#xff09;&#xff0c;根本登录不了账号&#xff0c;但有一个国内的codegeex是可以使用的&#xff0c;在这里不对各…
阅读更多...
Android app性能优化指南

Android app性能优化指南

Android应用性能优化指南 提高应用程序的性能以实现更流畅的用户体验和更高的可见度。 性能在任何应用程序的成功中发挥着重要的作用。为用户提供流畅无缝的体验应该是开发人员的重点。 应用程序大小 在用户开始使用我们的应用程序之前&#xff0c;他们需要下载应用程序并将…
阅读更多...
DTCC2023大会-DBdoctor-基于eBPF观测数据库-附所有PPT下载链接

DTCC2023大会-DBdoctor-基于eBPF观测数据库-附所有PPT下载链接

DTCC2023大会-DBdoctor-基于eBPF观测数据库-附所有PPT下载链接 8月16日—18日,第14届中国数据库技术大会(DTCC-2023)在北京国际会议中心举行。聚好看在大会上首次发布基于eBPF观测数据库性能的产品DBdoctor&#xff0c;受到了业界广泛的关注。近期几位业内同仁过来要大会的PPT…
阅读更多...
2024考研数学二备考历程

2024考研数学二备考历程

GoodNotesGoodNotes apphttps://share.goodnotes.com/s/bhsraJMZ6OJwuYJb3OWnzP
阅读更多...
C/C++之输入输出

C/C++之输入输出

文章目录 一.C语言的输入输出1.printfi. 输出整数ii. 浮点数iii.字符 & 字符串 2.scanfi.整数ii.浮点数iii. 字符 & 字符串 3.特殊用法i. * 的应用ii. %n 的应用iii. %[] 的应用 二.C中的输入输出1.couti. 缓冲区&#xff08;buffer&#xff09;ii. cout之格式化输出 2…
阅读更多...
Proteus仿真--串口发送数据到2片8×8点阵屏滚动显示

Proteus仿真--串口发送数据到2片8×8点阵屏滚动显示

本文介绍2片88点阵屏滚动显示设计&#xff08;完整仿真源文件及代码见文末链接&#xff09; 仿真图如下 仿真运行视频 Proteus仿真--1602LCD显示电话拨号键盘按键实验&#xff08;仿真文件程序&#xff09; 附完整Proteus仿真资料代码资料 链接&#xff1a;https://pan.baidu…
阅读更多...
使用C语言操作kafka ---- librdkafka

使用C语言操作kafka ---- librdkafka

1 安装librdkafka git clone https://github.com/edenhill/librdkafka.git cd librdkafka git checkout v1.7.0 ./configure make sudo make install sudo ldconfig 在librdkafka的examples目录下会有示例程序。比如consumer的启动需要下列参数 ./consumer <broker> &…
阅读更多...
一对一聊天程序

一对一聊天程序

package untitled1.src;import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.io.*; import java.net.*;public class MyServer extends JFrame{private ServerSocket server; // 服务器套接字pri…
阅读更多...
【漏洞复现】华脉智联指挥调度平台/xml_edit/fileread.php文件读取漏洞

【漏洞复现】华脉智联指挥调度平台/xml_edit/fileread.php文件读取漏洞

Nx01 产品简介 深圳市华脉智联科技有限公司&#xff0c;融合通信系统将公网集群系统、专网宽带集群系统、不同制式、不同频段的短波/超短波对讲、模拟/数字集群系统、办公电话系统、广播系统、集群单兵视频、视频监控系统、视频会议系统等融为一体&#xff0c;集成了专业的有线…
阅读更多...
第一课【习题】HarmonyOS应用/元服务上架

第一课【习题】HarmonyOS应用/元服务上架

元服务发布的国家与地区仅限于“中国大陆” 编译打包的软件包存放在项目目录build > outputs > default下 创建应用时&#xff0c;应用包名需要和app.json5或者config.json文件中哪个字段保持一致&#xff1f; 发布应用时需要创建证书&#xff0c;证书类型选择什么…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023