echarts地图立体效果,echarts地图点击事件,echarts地图自定义自定义tooltip

一.地图立体效果

方法1:两层地图叠加

实现原理:geo数组中放入两个地图对象,通过修改zlevel属性以及top,left,right,bottom形成视觉差

配置项参考如下代码:

geo: [
          {
            zlevel: 2,
            top: 96,
            map: 'map',
            itemStyle: {
              color: '#091A51ee',
              opacity: 1,
              borderWidth: 2,
              borderColor: '#16BAFA'
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: 14,
              lineHeight: 16,
              fontWeight: 'bold',
              textShadowColor: '#073BDA', // 阴影颜色
              textShadowBlur: 10, // 阴影模糊程度
              textShadowOffsetX: 0, // 阴影横向偏移
              textShadowOffsetY: 4, // 阴影纵向偏移
              formatter: function({ name }) {
                return ` ${name}`
              }
            },
            emphasis: {
              disabled: true, //是否可以被选中
              label: {
                show: true,
                color: '#fff',
                fontSize: 18,
                textShadowColor: '',
                textShadowBlur: 0, // 阴影模糊程度
                textShadowOffsetX: 0, // 阴影横向偏移
                textShadowOffsetY: 0 // 阴影纵向偏移
              },
              itemStyle: {
                color: '#01A8F1'
              }
            }
          },
          {
            zlevel: 1,
            map: 'map',
            itemStyle: {
              color: '#17418B',
              opacity: 1,
              borderWidth: 2,
              borderColor: '#17418B'
            },
            label: {
              show: false
            },
            emphasis: {
              disabled: false, // 是否可以被选中
              itemStyle: {
                color: '#01A8F1'
              }
            }
          }
        ]

方法二:通过echarts-gl实现3d效果

1.需要引入echarts-gl.js文件或者npm下载

2.此方法地图省份的点击事件不生效!!!

3.省份名称需要通过下面代码才能显示出来

formatter: function ({ name }) {

return ` ${name}`

}

配置项完整代码如下:

geo3D: {
            map: "map",
            roam: true,
            shading: "color",
            boxHeight: 100,
            regionHeight: 8,
            itemStyle: {
              color: "#163C99",
              opacity: 0.4,
              borderWidth: 1,
              borderColor: "#0EF6FA"
            },
            emphasis: {
              disabled: true, //是否可以被选中
              label: {
                //移入时的高亮文本
                show: true,
                color: "#000", //显示字体颜色变淡
                fontSize: 18 //显示字体变大
              }
            },
            label: {
              show: true,
              position: "top",
              color: "#fff",
              fontSize: 14,
              lineHeight: 16,
              formatter: function ({ name }) {
                return ` ${name}`
              }
            },
            light: {
              //光照阴影
              main: {
                color: "#032372", //光照颜色
                intensity: 0.1, //光照强度 //shadowQuality: 'high', //阴影亮度
                shadow: true, //是否显示阴影
                shadowQuality: "medium", //阴影质量 ultra //阴影亮度
                alpha: 80,
                beta: 0,
                ambientCubemap: 0.5
              },
              ambient: {
                intensity: 1,
                color: "#133995" //光照颜色
              }
            },
            viewControl: {
              beta: 0, //x轴旋转
              alpha: 75, //Y轴旋转
              panMouseButton: "center", //平移操作使用的鼠标按键
              rotateMouseButton: "left", //旋转操作使用的鼠标按键
              rotateSensitivity: 0, //禁止旋转地图
              //下面的四个参数 可以实现禁止缩放地图
              projection: "orthographic",
              orthographicSize: 110,
              maxOrthographicSize: 110,
              minOrthographicSize: 110
            }
          }

//如果要选中/激活高亮某个省份
function setProvince(e) {
      let option = mapChartInstance.getOption()
      option.geo3D[0].regions = [
        {
          name: e,
          itemStyle: {
            color: "#0cf4f9",
            opacity: 1
          }
        }
      ]
      mapChartInstance.setOption(option)
 }

二.地图点击事件

//this.mapChart替换成对应的echarts实例
this.mapChart.on('click', (e) => {
  this.setProvince(e.name)
})

三.自定义tooltip

实现原理:

tooltip和地图的div容器宽高一致,tooltip中要自定义显示的内容相对于tooltip定位,然后通过echarts提供的convertToPixel()方法计算出自定义显示内容的相对位置

html

<div class="top_content">
        <div class="map_chart" id="map_chart"></div>
        <div class="map-tooltip">
          <div class="in u-flex-col u-row-center " :style="curMapData">
            <div>{{ current_province.name }}：</div>
            <div class="u-m-t-15"><span>{{ total }}</span> 家合作企业</div>
          </div>
        </div>
</div>

js

const properties = mapJson.features.find(item => item.properties.name.includes(name)).properties
const cp = properties.cp || properties.center
this.curMapData = this.showTooltipAtCoords(cp)


showTooltipAtCoords(cp) { // 经纬度转换position位置
      const lng = cp[0]
      const lat = cp[1]
      const point = this.mapChart.convertToPixel('geo', [lng, lat])
      const left = `${point[0]}px` // 设置位置
      const top = `${point[1] - 90}px` // 设置位置
      return `left:${left} ;top:${top}`
},