Echarts 实现全国地图展示

2022-11-01
广东
本文字数：2999 字
阅读完需：约 10 分钟

Echarts 介绍:

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari 等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表

官方地址:https://echarts.apache.org/zh/index.html

全国地图展示实现:

准备步骤:

1.准备好 echarts.js 文件

2.阿里云地理下载全国省市区地图的 js 文件

china.js 全国地图文件

全省地图文件

全市地图文件

1.准备一个具备大小的 DOM 容器，生成的地图会放入这个容器内

<div class="map" style="width:500px;height:500px;">
</div>

复制代码

2.初始化 echarts 实例对象

let mychart = echarts.init(document.querySelector('.map'))

复制代码

3.指定配置项和数据(option)，根据具体需求修改配置选项

配置 title 标题组件,text:title 内容,left:距离左边大小,textStyle:字体样式

title: {  text: '工地统计地图',  left: '5%',  textStyle: {    fontSize: '28'  }},

复制代码

配置 tooltip 自定义提示框组件，formatter：自定义，trigger 鼠标悬浮交互时的信息提示，item 只显示该点的信息，axis 显示该列坐标轴对应的数据

tooltip: {  show: 'true',  trigger: "item",  formatter: function (params) {    let str = ''    if (isNaN(params.value)) {      str = params.seriesName + ' : 0'    } else {      str = params.seriesName + ' : ' + params.value    }    return str  }},

复制代码

配置 visualMap 视觉映射组件,根据传入的 data 显示不同的颜色

visualMap: {  min: 0,  max: 20,  left: 'left',  top: 'bottom',  text: ['高', '低'],  calculable: true},

复制代码

配置 series 系列列表,用于配置数据,type 设置为 map 地图类型，mapType 为对应的 js 文件名称，开始默认为全国地图,roam 开启缩放

series: [  {    name: '工地数量',    type: "map",     mapType: 'china',    roam: true,    label: {      normal: {        show: true,        textStyle: {          color: "#fff",        },      },    },    itemStyle: {      normal: {        borderColor: "#B79891",        borderWidth: "2",        areaColor: "#F6EFA6",      },      emphasis: {        areaColor: '#F2D5AD',      }    },    data: data //数据来源  }]

复制代码

4.实现地图展示及下钻

准备好省地图列表，点击地图根据 id 跳转到对应省级地图

初始化配置

let map_level = 'china' //地图等级let cityinfo = [] //城市信息let provinceName = '' //当前省市区地图名字let maxValue=0 //映射组件最大值

复制代码

创建获取省市 ID 的函数

//获取市区ID  function getcityId(cityinfo, name) {    for (let i in cityinfo.features) {      if (cityinfo.features[i].properties.name == name) {        return cityinfo.features[i].properties.id + '00'      }    }  }  //获取省份ID  function getProvinceId(mapList, name) {    for (let i in mapList) {      if (mapList[i].name == name) {        return mapList[i].id      }    }  }

复制代码

初始化全国地图

createChinaMap()function createChinaMap() {    $.getJSON(`http://127.0.0.3/static/js/echart/json/china.js`, function (chinaJson) {      }      //去掉南海诸岛      data.push({ name: "南海诸岛", value: 0, itemStyle: { normal: { opacity: 0, label: { show: false } }, emphasis: { opacity: 0, label: { show: false } } } })      //映射组件最大值      maxValue=getMaxVlaue(data)      option.visualMap.max=maxValue      echarts.registerMap('china', chinaJson);      mychart.setOption(option, true);    })    window.addEventListener("resize", function () {      mychart.resize();    });  }  //获取最大值  function getMaxVlaue(arr){    let result=-Infinity    for(let i in arr){      if(arr[i].value>result)result=arr[i].value    }    return result  }

复制代码

点击地图下钻到对应省市区地图

mychart.on('click', function (params) {    // console.log(params);    // 判断地图类型,中国地图则变为省地图,省地图变为市区地图    map_level = map_level === 'china' ? 'province' : map_level === 'province' ? 'city' : null    if (!map_level) return    if (map_level === 'province') {      createMap('geometryProvince', getProvinceId(mapList, params.name), params.name)    } else if (map_level === 'city') {      createMap('geometryCouties', getcityId(cityinfo, params.name), params.name)    }})//创建省市区地图  function createMap(url, id, name) {    if (map_level === 'province') {      $.getJSON(`http://127.0.0.3/static/js/echart/json/${url}/${id}.js`, function (chinaJson) {        //保存当前省市名字        provinceName = name        //去掉南海诸岛        data.push({ name: "南海诸岛", value: 0, itemStyle: { normal: { opacity: 0, label: { show: false } }, emphasis: { opacity: 0, label: { show: false } } } })        //映射组件最大值        maxValue=getMaxVlaue(data)        option.visualMap.max=maxValue        //创建        cityinfo = chinaJson        option.series[0].mapType = name        echarts.registerMap(name, chinaJson);        mychart.setOption(option, true);      })    } else {      $.getJSON(`http://127.0.0.3/static/js/echart/json/${url}/${id}.js`, function (chinaJson) {        //模拟请求数据        data.splice(0, data.length)        for (let i in chinaJson.features) {          if (i < 10) {            data.push({ name: chinaJson.features[i].properties.name, value: i })          }        }        data.push({ name: "南海诸岛", value: 0, itemStyle: { normal: { opacity: 0, label: { show: false } }, emphasis: { opacity: 0, label: { show: false } } } })        maxValue=getMaxVlaue(data)        option.visualMap.max=maxValue        //创建        option.series[0].mapType = name        echarts.registerMap(name, chinaJson);        mychart.setOption(option, true);      })    }    window.addEventListener("resize", function () {      mychart.resize();    });  }

复制代码

最后设置右键单击事件返回上一级地图

//取消右键单机默认事件  let mapRight = document.querySelector('.map')  mapRight.oncontextmenu = function () { return false }  //右键单机返回上一级地图  mychart.on('contextmenu', (params) => {    if (map_level === 'china') return    if (map_level === 'city' || map_level == null) {      createMap('geometryProvince', getProvinceId(mapList, provinceName), provinceName)      map_level = 'province'    } else if (map_level === 'province') {      option.series[0].mapType = 'china'      createChinaMap()      map_level = 'china'    }  })

复制代码

最终实现效果

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/3dc31304c640a6b077f4c95e3】。文章转载请联系作者。

格斗家不爱在外太空沉思

关注

还未添加个人签名 2022-11-01 加入

还未添加个人简介

发布

暂无评论

创作场景

Echarts 实现全国地图展示

Echarts 介绍:

全国地图展示实现:

准备步骤:

1.准备一个具备大小的 DOM 容器，生成的地图会放入这个容器内

2.初始化 echarts 实例对象

3.指定配置项和数据(option)，根据具体需求修改配置选项

4.实现地图展示及下钻

最终实现效果

格斗家不爱在外太空沉思

评论