echarts实现地图下钻、立体效果

echarts地图下钻功能实现，下面是效果图：

如何用echarts显示地图

首先需要下载map的Json数据，我放到这里：mapJson，提取码：nbs2

然后使用echarts的geo配置，或者series的type = 'map'就可以加载地图了：

import chinaMapJson from "./china.json"
echarts.registerMap('china', chinaMapJson)
var options = {
  tooltip:{
    show:false
  },
  geo: {
    map: 'china',
    roam:false,
    label: {
        emphasis: {
            show: false
        }
    }
  }
}
const el = document.getElementById("chart")
const chart = echart.init(el)
chart.setOption(options)

这样就可以显示中国地图。

第二种是series的type设置为map:

import chinaMapJson from "./china.json"
echarts.registerMap('china', chinaMapJson)
var options = {
  tooltip:{
    show:false
  },
  series: [
    {
        type: 'map',
        map: 'china'
    }
  ]
}
const el = document.getElementById("chart")
const chart = echart.init(el)
chart.setOption(options)

注意

中国地图的名字叫china才会显示南海诸岛，别的名字不会显示

如何设置地图的纹理

itemStyle.areaColor的配置文档中，写着：

提示

支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充

// 纹理填充
{
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
    repeat: ‘repeat’ // 是否平铺，可以是 ‘repeat-x’, ‘repeat-y’, ‘no-repeat’
}

可以使用这种方式来实现地图的纹理以及高亮状态的纹理

如何给地图设置阴影

地图阴影其实我使用了geo和series的两种地图叠加起来，第一层geo设置了阴影，第二层series的地图使用了描边。

const imageDom = document.createElement("img")
imageDom.src = "./texture.png"
const lightDom = document.createElement("img")
lightDom.src = "./light.png"
let options = {
  tooltip:{
    show:false
  },
  geo: {
      map: '',
      roam:false,
      label: {
          emphasis: {
              show: false
          }
      },
      itemStyle: {
          shadowColor: '#C3F4F4',
          shadowOffsetX:'-2px',
          shadowOffsetY: '10px',
          shadowBlur: '5px'
      }
  },
  series: [
      {
          type: 'map',
          map: 'china',
          roam: false,
          tooltip:{
            show:false
          },
          label: {
              show:false,
              color:'#fff'
          },
          itemStyle: {
              areaColor:imageDom,
              borderColor: '#C3F4F4',
              borderWidth:'2px'
          },
          emphasis: {
              itemStyle: {
                  areaColor:lightDom
              },
              label:{
                  show:false
              }
          }
      }
  ]
}

这样就可以绘制出效果来了

地图下钻实现

地图下钻其实就是，在地图的点击事件回调中，加载了另一份地图的json并注册地图，然后再setOption中更改了地图名字。

chart.on('click', (params) => {
    if (params.componentSubType == 'map') {
        goDown(params.name)
    }
})
//用来存放当前的地图名字
let currentName = ''
//用来存放下钻的历史记录
let history = []
async function goDown(name){
    //获取地图数据之后，修改地图options
    const mapname = name
    if (!echarts.getMap(name)) {
        const newMapJson = await getMapJson(name)
        echarts.registerMap(mapname, newMapJson)
    }
    options.geo.map = mapname
    options.series[0].map = mapname
    //然后重新绘制地图
    history.push(currentName)
    chart.setOption(this.options)
    currentName = name
}
async function getMapJson(name) {
  const jsonData = await import('./map/'+name+'.json')
  return jsonData.default
}

地图回钻实现

刚刚在下钻时保存了名字和历史记录，所以回钻就是把历史记录中的最后一项弹出

function returnUpLevel() {
    //先判断history有没有数据，能不能返回
    if(history.length == 0){
        return false
    }
    //取出要返回的那个名字
    const name = history.pop()
    const currentJson = echarts.getMap(mapname).geoJson
    //修改地图配置重新绘制地图
    options.geo.map = mapname
    options.series[0].map = mapname
    chart.setOption(options)
    //修改当前的层级，名字
    currentName = name
}