![081916570879_0微信截图_222220210819165459.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2eaa579670040229b1c5326ad7b6da3~tplv-k3u1fbpfcp-watermark.image) ## 一:实现思路我接触的地图开发分为两种:1`需要详细地图数据` 2`大体总览` ,这次开发就是大体总览,我触到的图例组件库有:`charts` 与`l7` ,综合考虑决定用`charts` **`echarts`中有两种实现地图的方式:`geo(地理坐标系)`与` servers.map`** 1:`geo支持缩放功能并搭配其它系列组件标线\标点` 2:`servers.map`在echarts3版本后就不建议使用 `markLine` 和 `markPoint`标点和线综合考虑使用`geo` `geo`存在两种渲染格式:`svg`与`json`,只需要轮廓选用json文件 ,json文件有高德的公开资源可以下载:[地图下载](http://datav.aliyun.com/tools/atlas/index.html) ## 二:地图引入-基础实现地图 ### 引入echarts(别忘了安装) ```vue //main.app中 import echarts from 'echarts' Vue.prototype.$echarts = echarts ``` ### 页面引入echatrs图表 ```vue

批量地址解析

``` ``` //转换完成的数据格式 [ { "ab4": "xxxxxxx", "ab9": "xxxxxxxxxxxx", "coords": [ [ 117.843449058821, 36.52321269463374 ], [ 118.031258, 36.813892 ] ], "id": 1 }, { "ab4": "xxxxxxxxxxxx", "ab9": "xxxxxxxxxxxxxxxx", "coords": [ [ 118.2040667091881, 36.89458786758729 ], [ 118.031258, 36.813892 ] ], "id": 2 }, ] ``` ### 增加散点图 ``` // 引入上面转换的json格式数据 // option中散点图设置 series:[ // 所在地圆环 { type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, rippleEffect: { //涟漪特效 period: 20, //动画时间，值越小速度越快 brushType: 'stroke', //波纹绘制方式 stroke, fill scale: 4 //波纹圆环最大限制，值越大波纹越大 }, label: { normal: { show: false, position: 'right', //显示位置 offset: [5, 0], //偏移设置 formatter: function(params) { //圆环显示文字 return params.data.name; }, fontSize: 18 }, emphasis: { show: true, color:'#fff', } }, symbol: 'circle', symbolSize: 2, itemStyle: { normal: { show: false, color: '#1e90ff' } }, data:store.map(item => { return { name:item.ab4, value:item.coords[0].concat([0]) } }) }, ] ``` ## 四:基础效果完成后的一些问题 ### 地理坐标系上的散点图未随地图一起放大缩小经查询echarts-散点没有相关放大缩小的配置,在搜索引擎的帮助下发现echarts存在监听geo缩放的事件`georoam`,这个事件在文档里搜索了,没有搜索到.互联网大神是真的牛皮监听`georoam`事件,在执行方法中根据`param`参数与`echarts`属性调整echart中属性,动态调整散点图的大小 **georoam事件的参数** ``` //如果是缩放的话 { componentType: "geo" geoId: "\u0000series\u00000\u00000" originX: 270 originY: 425 type: "georoam" zoom: 1.1 } //如果是拖拽的话 { componentType: "geo" dx: 0 dy: 0 geoId: "\u0000series\u00000\u00000" type: "georoam" } ``` ``` //增加监听事件 this.chart.on('georoam', (params)=> { //如果是拖拽就拒绝 if(parames.dy || parames.dx) return var _option = this.chart.getOption() //地图大小 var _zoom = _option.geo[0].zoom //药店的圆环属性--大小 var _symbolSize = _option.series[1].symbolSize console.log(_zoom) _option.series[1].symbolSize = 2 * _zoom _option.series[0].symbolSize = 4 * _zoom //如果不清除的话,散点图改变后会导致与geo地理坐标系偏移 this.chart.clear() this.chart.setOption(_option) } ) ``` ### 监听事件导致的卡顿问题 > 监听`georoam`事件后,发现事件会频繁的触发,一次缩放会触发几百次事件. 暂时考虑到的方案有: 1. option中禁止动画 2. 散点图调整增加防抖处理 ``` //option中增加动画,不太确定有多少效果 options:{ animation:false, } ``` ``` //引入防抖函数 import { debounce} from '@/utils/index' //修改监听事件调用的方法 this.chart.on('georoam', debounce(this.oveFow,500) //增加-调整散点图大小的方法 oveFow(parames){ console.log(parames) // if(parames.dy || parames.dx) return var _option = this.chart.getOption() var _zoom = _option.geo[0].zoom //药店的圆环属性 var _symbolSize = _option.series[1].symbolSize console.log(_zoom) _option.series[1].symbolSize = 2 * _zoom _option.series[0].symbolSize = 4 * _zoom this.chart.clear() this.chart.setOption(_option) } ``` **不会制作gif动图,没法展示效果了** ## 五:参考文章 1.[ 实现echarts地图监听缩放事件效果_qq_42980124的博客-CSDN博客](https://blog.csdn.net/qq_42980124/article/details/82760333) 2.[Documentation - Apache ECharts](https://echarts.apache.org/zh/option.html#geo.id)