[JavaScript知识库]echarts地图各种点位实现

1. 功能介绍

1. 实现地图点位的波纹效果
2. 可直接以图片的形式充当节点（替换波纹效果）
3. 可对标题做图片显示和文字显示

2. 效果图

1. 冰岛
   
2. 深圳
   

3. 本文冰岛源码测试

1. 到 echarts 官网的 示例 代码中整体覆盖就能看到效果
2. 快捷跳转到echarts官网某个示例

4. 如果以国内其他城市为地图

1. 本文以 冰岛 作为示例，如果想要更换为国内其他城市可点这里去获取 json 数据
2. 使用：

   // map.json 是你复制的json数据然后扔到一个json文件里面
   import * as echarts from 'echarts';
   const geoJson: any = require('./map.json');
   // 注意如果发现echarts找不到，react 请用 useEffect(() => { ... }, [])， vue请用 this.$nextTick(() => { ... }); ... 为以下代码
   echarts.registerMap('myMap', geoJson);
   const option = {
   	// ... 这个 option 就是上面的配置项 option
   }
   setOption(option)
   

5. 地图实现源码

$.get(ROOT_PATH + '/data/asset/geo/Map_of_Iceland.svg', function (svg) {
  echarts.registerMap('myMap', { svg: svg });
  const labelSize = 100;
  const labelSizeTranslation = (params) => {
    return (params[2] / 100) * 15 + 5;
  };
  option = {
    tooltip: {},
    geo: {
      map: 'myMap',
      aspectScale: 0.75,
      layoutCenter: ['50%', '50%'],
      layoutSize: '90%',
      silent: true,
      roam: false, // 是否开启鼠标缩放和平移漫游
      zoom: 1,
      z: 0,
      itemStyle: {
        areaColor: '#12235c',
        shadowColor: '#1a3578',
        // 底层偏移量
        shadowBlur: 0,
        shadowOffsetX: 0,
        shadowOffsetY: 8,
        borderColor: 'rgba(0, 0, 0, 0.7)',
        borderWidth: 0.5
      }
    },
    series: [
      {
        type: 'map',
        label: {
          // 是否显示地图上的名称
          show: true,
          color: '#c3fdff'
        },
        // roam: true,
        itemStyle: {
          borderColor: '#2ab8ff',
          borderWidth: 1,
          // borderType: 'dashed',
          areaColor: {
            color: '',
            // image: webGlBgIcon,
            repeat: 'repeat'
          },
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowBlur: 0,
          shadowOffsetX: 0,
          shadowOffsetY: 1,
          color: 'red'
        },
        emphasis: {
          label: {
            color: '#c3fdff'
          },
          itemStyle: {
            // areaColor: {
            //   color: '',
            //   // 鼠标hover状态下区域图片
            //   image: webGlBgIconHover,
            //   repeat: 'repeat',
            // },
            borderColor: '#2ab8ff',
            borderWidth: 1,
            shadowColor: 'rgba(0, 255, 255, 0.7)',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 1,
            label: {
              show: true
            }
          }
        },
        z: 1,
        zoom: 1,
        map: 'myMap'
      },
      // 设置标注点图标
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        name: '测试',
        itemStyle: {
          // color: '#f00',
          // borderColor: '#fff',
          // padding: 10
        },
        label: {
          show: true,
          position: 'right',
          formatter: (p) => {
            console.log(p, 'pp');
            return [`{a|${p.value[3].label}}`].join('\n');
          },
          rich: {
            a: {
              color: '#fff',
              lineHeight: 24,
              fontSize: '13px',
              padding: [4, 0, 0, 0]
            },
            b: {
              height: 20,
              width: 20
              // borderRadius: [10,10,10,10],
              // border: '1px solid #f60',
            }
          }
        },
        // 此处图片地址是bese64位，所以需要在前面拼接 【'image://'】，否则不会显示图片
        // symbol: (value: any, params: any) => 'image://' + params.data.img,
        symbol: (value, params) => 'image://' + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAATCAYAAACdkl3yAAADDUlEQVQ4jYVU3WsUVxT/nbkzd9yP7M4a87GTpO2alMTiB4b0pQ8VEYkGSqGWRjDii28+6x9Q6EsLvvlYEKyPfWipWJo+WFBokVZrIpiENaS227iucVfX/ZiZe4/MJLvVkG0OzHDuuef3u7977zmX8OUMOhh1iPNWQXOL2GaC1pg7jNeJkifGI6f67R+0CWx0AOoNfz1+4RvupMgYPDvqxi3rfSLkADgABIA1Zjysev6vha8XHm8Q/rdyMn+xrSbz8dt230DqGIC9pbq3WF+slryVasC+Vnauy46NdXXvissxBs8X/3lx/dl3K82Wqrai7lPDss9JnG4qpf6+8eR7v1h14CmXmdPhgvV5r1xfKK++yCaWhj7sm8gOpmeMU8NXnl7NeyFeeIM9kZrdh4Y+8rU2V35cvRWs1Xqsd3Z9Zo9lz8k9/dNypGfKzDofkDSl/6iSf/6oMZ8aSbpdMemWbhcXcXQ/ifC359w+l4gO/XWvci14XEvt2DdwwXSdMyTNNIiM8CNppkQmPiEy8d6gUL5Z1+JBpn/H4e6J3sXS7WItuhlBdKAR6D+DkhfId3uPGDsTn2xVK9FNOPEpOdp/zF9tBA3F88Kgg2hdMYGGKz6WI9Kd8ZOdSFomnPh0VDI+8gZoGK/VSrpZDMowDQ1TjG5HBEuMQQrVKAflEPs6kWBlKLKE6tQCm4yjXIqKMso3kifGQ6fcNSAcI2EHAN/ZnkbfCXNTGSsF4HlYR5EiBi+lLNpNtqmh+NK2RIovhblxEzkNzre3RkR3pUEHZdY2dbU5C9Zf/Y+ai7ravGYP2ZY06IBB9HubaLkgCgxecB2eNBKSueZ/AaU/BXAj3DaACoBfoPQ01/zPRUoim+CjDJ6bi50vhRztFiGi6wKYeWuIp/59af7sPdWzUHoWvlrvcktEhyr7TTub5OOCKIzPtvFh07Ys5yoLwCSA9zzFd+uKHlYqWAvn0mlkYoJHpKD9AO4D+Gkudj5oYd94RpYLwgfwQ85Vv0lB41JgMt2DzMb0M4CWAFxeLognb5wbgFevgSg+9EcEvQAAAABJRU5ErkJggg==',
        symbolSize: labelSizeTranslation,
        symbolOffset: [0, 0],
        z: 99999,
        // data: myData,
        data: [
          [
            1111.859781,
            664.099918,
            labelSize,
            {
              label: '測試1',
              color: 'rgba(25, 208, 128, 1)'
            }
          ]
        ]
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        symbolSize: labelSizeTranslation,
        z: 99999,
        symbol: 'circle',
        itemStyle: {
          // borderColor: '#000',
          // 设置闪烁节点颜色的地方
          color: (value) => {
            return value.value[3].color;
          }
        },
        rippleEffect: {
          scale: 3.5
        },
        label: {
          show: true,
          position: 'right',
          formatter: (p) => {
            return [
              p.value[3].icon ? '{b| }' : '',
              `{a|${p.value[3].label}}`
            ].join('\n');
          },
          rich: {
            a: {
              color: '#fff',
              lineHeight: 30,
              fontSize: '13px',
              padding: [0, 0, 10, 10]
            },
            b: {
              // 这里是设置 lable 中图标的地方
              backgroundColor: {
                image:
                  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAATCAYAAACdkl3yAAADDUlEQVQ4jYVU3WsUVxT/nbkzd9yP7M4a87GTpO2alMTiB4b0pQ8VEYkGSqGWRjDii28+6x9Q6EsLvvlYEKyPfWipWJo+WFBokVZrIpiENaS227iucVfX/ZiZe4/MJLvVkG0OzHDuuef3u7977zmX8OUMOhh1iPNWQXOL2GaC1pg7jNeJkifGI6f67R+0CWx0AOoNfz1+4RvupMgYPDvqxi3rfSLkADgABIA1Zjysev6vha8XHm8Q/rdyMn+xrSbz8dt230DqGIC9pbq3WF+slryVasC+Vnauy46NdXXvissxBs8X/3lx/dl3K82Wqrai7lPDss9JnG4qpf6+8eR7v1h14CmXmdPhgvV5r1xfKK++yCaWhj7sm8gOpmeMU8NXnl7NeyFeeIM9kZrdh4Y+8rU2V35cvRWs1Xqsd3Z9Zo9lz8k9/dNypGfKzDofkDSl/6iSf/6oMZ8aSbpdMemWbhcXcXQ/ifC359w+l4gO/XWvci14XEvt2DdwwXSdMyTNNIiM8CNppkQmPiEy8d6gUL5Z1+JBpn/H4e6J3sXS7WItuhlBdKAR6D+DkhfId3uPGDsTn2xVK9FNOPEpOdp/zF9tBA3F88Kgg2hdMYGGKz6WI9Kd8ZOdSFomnPh0VDI+8gZoGK/VSrpZDMowDQ1TjG5HBEuMQQrVKAflEPs6kWBlKLKE6tQCm4yjXIqKMso3kifGQ6fcNSAcI2EHAN/ZnkbfCXNTGSsF4HlYR5EiBi+lLNpNtqmh+NK2RIovhblxEzkNzre3RkR3pUEHZdY2dbU5C9Zf/Y+ai7ravGYP2ZY06IBB9HubaLkgCgxecB2eNBKSueZ/AaU/BXAj3DaACoBfoPQ01/zPRUoim+CjDJ6bi50vhRztFiGi6wKYeWuIp/59af7sPdWzUHoWvlrvcktEhyr7TTub5OOCKIzPtvFh07Ys5yoLwCSA9zzFd+uKHlYqWAvn0mlkYoJHpKD9AO4D+Gkudj5oYd94RpYLwgfwQ85Vv0lB41JgMt2DzMb0M4CWAFxeLognb5wbgFevgSg+9EcEvQAAAABJRU5ErkJggg=='
              },
              height: 24,
              align: 'center'
            }
          }
        },
        data: [
          [
            1111.859781,
            564.099918,
            40,
            {
              color: 'rgba(252, 0, 0, 1)',
              label: '測試數據1',
              icon: true
            }
          ],
          [
            1214.123885,
            822.555341,
            80,
            {
              color: 'rgba(0, 179, 0, 1)',
              label: '測試數據2',
              icon: true
            }
          ],
          [
           514.235366,
            882.655769,
            60,
            {
              color: 'rgba(0, 0, 128, 1)',
              label: '測試數據3'
            }
          ]
        ]
      }
    ]
  };
  myChart.setOption(option);
  myChart.getZr().on('click', function (params) {
    var pixelPoint = [params.offsetX, params.offsetY];
    var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
    console.log(dataPoint);
  });
});