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：自定义

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'
    }
  })

最终实现效果