echarts实现地图下钻功能

很多时候我们需要通过地图进行数据的直观展示，并且展示下级省份、地市、区县的数据，这时我们就需要对地图进行下钻；（由于最近的项目使用的是贵州地图，所以文章中用贵州省进行演示！）

首先我们要实现功能点有以下几点（如下图）：

地图下钻功能；
鼠标经过显示地图上数据,且默认能自动轮播各地区的数据；
在地图上根据数据进行气泡标识；

实现思路

大概思路：1.先从后台请求会在地图上展示的数据；2.进行地图绘制，在地图绘制过程中我们就可以将下钻、气泡、数据轮播功能依次实现。具体操作如下：

一：下载地图JSON文件

首先下载贵州省及下级地市地图json文件；下载地址：http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5；

将下载的json文件放入资源目录中，以行政区划代码进行命名；

二、进行数据请求

//默认进入页面首先加载贵州省份的地图。传递行政区划代码获取下属地区的数据和行政区划代码；
GetFloatingInfo(520000,'贵州')
//请求数据时候，我们传递两个参数；
//Area：行政区划代码；address:当前地图中文名 如贵州
function GetFloatingInfo(Area,address){$.ajax({url:'',type:'get',data:{Area:Area,},dataType: "json",success:function(res){ var data = res.data;//调用地图绘制方法drawMap(address,data,Area)  },error:function(res){},})
}

三、地图绘制


//绘制地图方法：这里需要三个参数
//darwMapType：渲染地区名如（贵州）
//data ajax请求回来的地图所对应的暂时数据；
//Area行政区划代码
async function drawMap (darwMapType, data,Area) {//请求json文件；var Json =  await $.get('js/Bulid/'+Area+'.json', function (Json) { return Json});//获取当前显示地图下方地市的坐标点数据； 用于气泡显示var geoCoordMap = {};var mapFeatures =  Json.features;mapFeatures.forEach(function(v,i) {var name = v.properties.name;geoCoordMap[name] = v.properties.centroid;});//将data数据进入方法，取需要的参数； 用于气泡显示var convertData = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: data[i].value,cityCode:data[i].cityCode,//行政区划代码});}//name和value/cityCode参数根据实际项目中后台返回的参数名走；}return res;};echarts.dispose(document.getElementById('mapEchartsBox')); //先去掉原来的地图var chart = echarts.init(document.getElementById('mapEchartsBox'));var option = {//鼠标经过展示数据方法tooltip: {triggerOn: "mousemove",formatter:function(params){var html = '<span>'+params.data.name+'：</span><br/>'html+= '<span>值：'+params.data.value+'</span><br/>'return html},backgroundColor:'rgba(29, 38, 71)',// 额外附加的阴影extraCssText:'box-shadow:0 0 4px rgba(11, 19, 43,0.8)',  },geo: {show: true,top:'15%',map: darwMapType,label: {normal: {show: false},emphasis: {show: false,}},roam: false,itemStyle: {normal: {areaColor: '#116bda',borderColor: '#fff',},emphasis: {areaColor: '#113cda',}}},//进行气泡标点series: [{name: '散点',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: function(val) {return 10},label: {normal: {formatter: '{b}',position: 'right',show: true,color:'#fff'},emphasis: {show: true}},itemStyle: {normal: {color: '#fff'}}},{type: 'map',map: darwMapType,geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: true,itemStyle: {normal: {areaColor: '#031525',borderColor: '#3B5077',},emphasis: {areaColor: '#2B91B7'}},animation: false,data: data},{name: '点',type: 'scatter',coordinateSystem: 'geo',zlevel: 6,},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'geo',data:convertData(data),symbolSize: function(val) {return 15},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'left',show: false}},itemStyle: {normal: {color: function(res){//根据value值对标点进行不同颜色显示if(value<500 ){return '#ff3859'}else if(value<1000){return '#4ed7fa'}else if(value<1500){return '#fac531'}else{return '#01ff5b'} },shadowBlur: 10,}},zlevel: 1},]}；echarts.registerMap(darwMapType, Json);chart.setOption(option);//点击进行下钻功能chart.on("click", function (param) {var Area = param.data.cityCode;      //获取行政区划代码var darwMapType = param.name;//获取地市名//根据点击地图获得的地区行政区划代码和地区名字再次进行数据请求；GetFloatingInfo(Area,darwMapType)})chart.setOption(option);//数据窗口自动轮播插件，需要下载引用 echarts-auto-tooltip.jstools.loopShowTooltip(chart, option, { loopSeries: true });//窗口变化重新加载echartswindow.addEventListener("resize", function () {chart.resize();});
}

以上方法就可以实现echart地图下钻、轮播数据和气泡的显示；欢迎留言讨论~~

echarts实现地图下钻功能相关推荐

echarts+echarts-gl vue2制作3D地图+下钻功能+标记点功能，解决dblclick事件失效问题，解决地图下钻后边框不更新保留问题
目录先看实现效果:编辑步骤一安装echarts和echarts-gl 步骤二设置地图容器在methods中设置初始化地图方法并在mounted中调用在methods中设置初始化地图方法 ...
echarts 地图下钻功能
vue 实现 echarts 地图下钻安装效果图 echarts 安装 npm install echarts // 引入echarts 中国地图 import echarts from 'ech ...
echarts实现地图下钻
公司的新项目需要写这样的地图,还要能两级下钻到省,下面是我写好了的样子,我今天就是复一下盘: 如何用echarts显示地图首先需要下载map的Json数据,我放到这里:mapJson 然后使用ech ...
使用Echarts实现地图下钻
#1使用Echarts实现中国地图 *1)参考文章"使用Echarts实现中国地图",完成中国地图的展示 http://blog.csdn.net/u010520912/artic ...
echarts青岛市地图下钻到区市及根据各个区市经纬度在各区市地图绘制散点图和道路线
var myChart1 = echarts.init(document.getElementById('chart-panel1')); //整个青岛地图绘制的domvar myChart2 = e ...
echarts 省级地图下钻到市demo
借鉴了昨夜小楼又东风这位兄弟的代码 https://blog.csdn.net/m0_46577631/article/details/124354267?utm_medium=distribut ...
Echarts 切换地图下钻各省份地市
最近项目中用到静态Echarts地图,故整理一下具体的配置项请参考官网配置项. 1. 切换过程中如果有出现地图移位的现象,在setOption前先clear(清除实例)即可. 2. 点击事件里chi ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
vue-echarts-v3——浙江省地图下钻（eg:浙江省-嘉兴市-嘉善县）
vue-echarts-v3和echarts的地图下钻配置项其实是一样的,本身就vue-echarts-v3而言,它只是echarts在vue的使用中,打包成了一个组件. 浙江省地图下钻需要geoJs ...

echarts实现地图下钻功能

实现思路

echarts实现地图下钻功能相关推荐

最新文章

热门文章