写点什么

Echarts 实现全国地图展示

  • 2022-11-01
    广东
  • 本文字数:2999 字

    阅读完需:约 10 分钟

Echarts实现全国地图展示

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
用户头像

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

还未添加个人简介

评论

发布
暂无评论
Echarts实现全国地图展示_JavaScript_格斗家不爱在外太空沉思_InfoQ写作社区