效果：
引入echarts后：
阿里云下载json数据：
DataV.GeoAtlas地理小工具系列
引入数据：
import chongqing from '@/assets/js/chongqing.json'
同样需要一个放置容器：
<template><div><div style="width:100%;height:100%" id="mapid"></div></div></template>
准备两组点数据：其中value是坐标，total是点聚合数值，其他是要展示在提示框中的内容
data() {return {mapList1: [{ name: 'name1', text1: '这是name1的text1', text2: '这是name1的text2', text3: '这是name1的text3', value: [106.588045, 29.556178], total: 0 },{ name: 'name2', text1: '这是name2的text1', text2: '这是name2的text2', text3: '这是name2的text3', value: [106.767994, 29.676749], total: 0 },{ name: 'name3', text1: '这是name3的text1', text2: '这是name3的text2', text3: '这是name3的text3', value: [106.496634, 29.608946], total: 0 },{ name: 'name4', text1: '这是name4的text1', text2: '这是name4的text2', text3: '这是name4的text3', value: [106.644387, 29.53808], total: 0 },{ name: 'name5', text1: '这是name5的text1', text2: '这是name5的text2', text3: '这是name5的text3', value: [107.09742, 30.236979], total: 0 },{ name: 'name6', text1: '这是name6的text1', text2: '这是name6的text2', text3: '这是name6的text3', value: [107.17742, 30.236979], total: 0 },],mapList2: [{ name: 'maplistname1', text1: '这是name1的text1', text2: '这是name1的text2', text3: '这是name1的text3', value: [108.776174, 30.951213], total: 0 },{ name: 'maplistname2', text1: '这是name2的text1', text2: '这是name2的text2', text3: '这是name2的text3', value: [108.196659, 30.589787], total: 0 },{ name: 'maplistname3', text1: '这是name3的text1', text2: '这是name3的text2', text3: '这是name3的text3', value: [107.414774, 29.577791], total: 0 },{ name: 'maplistname4', text1: '这是name4的text1', text2: '这是name4的text2', text3: '这是name4的text3', value: [107.046828, 29.526098], total: 0 },{ name: 'maplistname5', text1: '这是name5的text1', text2: '这是name5的text2', text3: '这是name5的text3', value: [105.818808, 29.497347], total: 0 },],}},
配置数据：
// 地图showMap(id) {let chongqingChart = this.$echarts.init(document.getElementById(id))chongqingChart.clear()this.$echarts.registerMap('chongqing', chongqing)let option = {tooltip: {triggerOn: 'click',trigger: 'item',borderWidth: 0,backgroundColor: "rgba(255, 255, 255, 0.8)",formatter: function (params) {if (params.data.total > 0) {// 点击聚合点 放大地图，复原数据option.geo.center = params.data.value;option.series[0].data = JSON.parse(sessionStorage.getItem('mapList1'))option.series[1].data = JSON.parse(sessionStorage.getItem('mapList2'))option.geo.zoom = 4;chongqingChart.setOption(option);return}let str = `<div class='map-tooltips'><span class='tooltips-img'></span><span class='dot'></span> <span class='tooltips-title'>${params.seriesName} </span> <ul><li><p class='tooltips-text1'>name</p> <p class='tooltips-text2'>${params.data.name}</p></li><li><p class='tooltips-text1'>内容1</p> <p class='tooltips-text2'>${params.data.text1}</p></li><li><p class='tooltips-text1'>内容2</p> <p class='tooltips-text2'>${params.data.text2}</p></li><li><p class='tooltips-text1'>内容3</p><p class='tooltips-text2' >${params.data.text3}</p></li></ul></div>`;return str}},// 图例legend: {data: [{ name: 'tag', icon: 'image://' + require('@/assets/img/tag.png') }, { name: 'mapList2', icon: 'image://' + require('@/assets/img/tag1.png') }],itemWidth: 20,itemHeight: 20,orient: 'vertical', // 竖向排列 horizontal横向y: 'bottom',x: 'left',textStyle: {color: '#fff',fontSize: 16,},selected: {'tag': true,'mapList2': true,// 不想显示的都设置成false},padding: [0, 10, 20, 20],},geo: {show: true,map: "chongqing",roam: true, // roam: 'scale', 只能缩放scaleLimit: {min: 1.2,max: 10},zoom: 1.2,aspectScale: 1,top: 50, // 改变大小center: [107.789305, 30.127088], //地图中心点经纬度坐标itemStyle: {borderColor: "#71fd6c", // 边界颜色areaColor: "#eaf8c9", // 区域颜色borderWidth: 1,shadowBlur: 10,shadowColor: "rgba(63, 218, 255, 0.4)",emphasis: {show: false, // 鼠标移入样式areaColor: "#f8e0c9"}},label: {// 文字样式normal: {show: true,fontSize: "10",color: "#16eb0f"},emphasis: {show: false}}},series: [{name: 'tag',type: "scatter",coordinateSystem: "geo",data: this.mapList1,showAllSymbol: true,symbolSize: [15, 30],symbol: 'image://' + require('@/assets/img/tag.png'),// 聚合标签样式label: {show: true,position: 'outside',color: '#fff',lineHeight: 8,backgroundColor: '#e7642f',borderColor: '#e7642f',borderRadius: 20,borderWidth: 15,formatter(params) {let data = params.datalet total = data.total ? data.total + 1 : ''return `${total}`;},},},{name: 'mapList2',type: "scatter",coordinateSystem: "geo",data: this.mapList2,showAllSymbol: true,symbolSize: [15, 30],symbol: 'image://' + require('@/assets/img/tag1.png'),label: {show: true,position: 'outside',color: '#fff',lineHeight: 8,backgroundColor: '#e7642f',borderColor: '#e7642f',borderRadius: 20,borderWidth: 15,formatter(params) {let data = params.datalet total = data.total ? data.total + 1 : ''return `${total}`;},},}]};chongqingChart.setOption(option)// 监听地图缩放事件chongqingChart.on("georoam", params => {if (params.dy || params.dx) return; //如果是拖拽事件则退出let _option = chongqingChart.getOption();//获取最新的option配制let _zoom = _option.geo[0].zoom; //获取当前缩放比例zoom_option.series[0].data = JSON.parse(sessionStorage.getItem('mapList1'))_option.series[1].data = JSON.parse(sessionStorage.getItem('mapList2'))// _option.geo.center = [107.789305, 30.127088]if (_zoom >= 1.5) {_option.series[0].data = _option.series[0].data ? this.mapData(_option.series[0].data, 0.01) : ''_option.series[1].data = _option.series[1].data ? this.mapData(_option.series[1].data, 0.01) : ''} else if (_zoom < 1.5) {_option.series[0].data = _option.series[0].data ? this.mapData(_option.series[0].data, 0.1) : ''_option.series[1].data = _option.series[1].data ? this.mapData(_option.series[1].data, 0.1) : ''}//清空chongqingChart.clear();chongqingChart.setOption(_option); //更新修改后的option配制});window.addEventListener('resize', function () {chongqingChart.resize()})},
计算聚合点方法：
// 地图数据点聚合mapData(list, distance) {// distance 判断聚合点数值 可以自行定义let arrMaplist = [], lngIndex = true, latIndex = 1;// 声明一个数组，包含与原始数据一样长度的n个数组for (let i = 0; i < list.length; i++) {arrMaplist.push([])}// 遍历原始数据for (let i = 0; i < list.length; i++) {// 存储内层遍历起始数据latIndex = latIndex == i ? i + 1 : latIndexfor (let j = latIndex; j < list.length; j++) {// 对比当前数据与下一个数据 是否属于同一个点聚合if (Math.abs(list[i].value[0] - list[j].value[0]) <= distance && Math.abs(list[i].value[1] - list[j].value[1]) <= distance) {// 遍历查看是否存在已有聚合点arrMaplist.forEach((ele) => {if (ele.length > 0) { // 有数据ele.forEach(val => { // 且数据中包含当前元素 将下一元素放进去 if (val.value[0] == list[i].value[0]&&val.value[1] == list[i].value[1]) { ele.push(list[j])lngIndex = true} else {lngIndex = false // 不包含}})} else {lngIndex = false // 不包含}})if (!lngIndex) {arrMaplist[i].push(list[j]) // 新增聚合点}latIndex = j + 1}}}// 聚合点总数arrMaplist.forEach((item, index) => {if (item.length != 0) {list[index].total = item.length}})// 删除list 里面的对应的多余数据，只保留第一条arrMaplist.forEach((item) => {item.forEach(ele => {let inde = list.indexOf(ele)list.splice(inde, 1)})})return list},
初始化点聚合：
mounted() {sessionStorage.setItem('mapList1', JSON.stringify(this.mapList1))sessionStorage.setItem('mapList2', JSON.stringify(this.mapList2))// 初始化处理点聚合this.mapList1 = this.mapData(this.mapList1, 0.1)this.mapList2 = this.mapData(this.mapList2, 0.1)},
提示框样式写在css里面：
<style lang="scss" scoped>// 地图点击提示框样式/deep/ .map-tooltips {width: 255px;height: 218px;// background: url('') left top,// url('') left top;color: #16eb0f;background-size: 100% 100%;padding: 18px 14px 0 14px;font-size: 12px;text-align: left;.tooltips-img {// background: url('~@/assets/img/') no-repeat;width: 22px;height: 22px;margin-top: -18px;margin-right: -14px;float: right;}.dot {display: inline-block;width: 5px;height: 5px;background: #f02b2b;border-radius: 50%;margin-right: 4px;}.tooltips-title {color: #f02b2b;}& > ul > li {color: #276299;display: flex;justify-content: flex-start;margin-top: 10px;.tooltips-text1 {text-align: right;width: 50px;margin-right: 8px;color: rgba(28, 196, 255, 0.8);}.tooltips-text2 {white-space: normal;width: 120px;}}}</style>
label 文字样式编辑，主要是给文字添加描边
在series里面编辑
series: [{label: {show: true, // 是否显示labelposition: [10, 0], // 文字位置 可以是数组、inside outside insideLeft insideRight 以此类推color: "#fff", // 文本颜色lineHeight: 18, // 行高fontSize: "16", // 字号textBorderColor: "red", // 文字描边颜色textBorderWidth: 1,// backgroundColor: 'blue', // 整个label的背景色// borderColor: '#fff', // 整个label的边框// borderRadius: 20,// borderWidth: 15,formatter(params) { // label的文本内容return `${params.name}`; }}]
