echarts：实现3D地图版块叠加动效散点效果

news2024/10/6 2:26:14

需求描述

如下图所示，展示3D效果的地图版块，并叠加显示动效散点：
预期效果图示

实现思路

首先是3D地图版块效果的实现，可以参考广州3D地图；而动效散点的实现，可以参考地图发散分布。
~~这里再提一个经过尝试并不行的思路：叠加用动图作为图标的散点图层，经过尝试，2D/3D地图的散点图层都无法加载动图图标~~
看起来只要在第一个示例的图层上叠加第二个示例的图层就可以啦！一般来讲，添加图层只要在图表配置项的series列表中增加一项即可，然鹅…

动效散点使用的是2D地理坐标系，只要引入echarts库即可使用，官网配置项文档：geo；而3D地图版块使用的是3D地理坐标系，在引入echarts库的基础上，还需要额外引用echarts-gl库，官网配置项文档：geo3D，而geo3D的series并不支持动效散点图层（effectScatter）。

Emm…其实也没有那么复杂，在配置项中既创建3D地理坐标系（用于显示3D地图版块），又创建2D地理坐标系（用于显示动效散点），并通过调整让它们尽量重叠就可以啦！

参考代码

/* 在3D地图版块上叠加动效散点，
   3D地图版块实现参考图表：https://www.isqqw.com/viewer?id=35999
   2D地图动效散点参考图表：https://www.isqqw.com/viewer?id=36159
*/

var mapJson = '/asset/get/areas_v3/city/440100_full.json'
option = {
   backgroundColor: "#fff",
   geo: { // 2D地图坐标系
      show: false, // 不显示地图，用于为动效散点提供地图坐标系
      map: 'centerMap',
      roam: false, // 禁用缩放、拖拽
      layoutCenter: ['50%', '51%'], // 地图中心位置
      aspectScale: 0.75, // 控制地图尺寸（地图的宽度和高度都会改变）
      layoutSize: '91%', // 控制地图长宽比（此值越小地图越窄，越大地图越宽，不改变高度仅改变宽度）
      zlevel: 1,
   },
   geo3D: { // 3D地图坐标系
      show: true,
      map: "centerMap",
      top: "-20",
      regionHeight: 16, // 地图版块厚度
      label: {
         show: true,
         borderRadius: 0,
         distanca: 0,
         textStyle: {
            fontSize: 14,
            color: "#C23531", // 地图初始化区域字体颜色
            borderWidth: 1,
            borderColor: '#FFFF10',
         }
      },
      itemStyle: {
         // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
         color: "rgba(252,85,49, 0.5)", // 地图板块的颜色
         opacity: 1, // 图形的不透明度 [ default: 1 ]
         borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
         borderColor: "#FFF500", // 图形描边的颜色。[ default: #333 ]
      },
      emphasis: {
         label: {
            show: true,
            color: "#fff000",
         },
         itemStyle: {
            color: "#ff0",
            opacity: 0.5,
         },
      },
      light: {
         // 光照阴影
         main: {
            color: "#FFFFFF", // 光照颜色
            intensity: 2, // 光照强度
            shadowQuality: "light", // 阴影亮度
            shadow: true, // 是否显示阴影
            alpha: 50,
            beta: 10,
         },
      },
      viewControl: {
         "projection": "perspective",
         "autoRotate": false,
         "distance": 208, // 控制地图版块的大小
         "alpha": 72, // 地图版块垂直方向的角度
         "beta": 2, // 地图版块水平方向的角度
         rotateSensitivity: 0, // 禁用旋转
         panSensitivity: 0, // 禁用平移
         zoomSensitivity: 0, // 禁用缩放
      },
      zlevel: 2,
   },
   series: [
      { // 无需展示数据，使用3D地图坐标系，用于将3D地图版块展示出来
         type: "scatter3D",
         coordinateSystem: "geo3D",
         zlevel: 2,
      },
      { // 动效散点图层，使用2D地图坐标系
         type: 'effectScatter',
         coordinateSystem: 'geo',
         zlevel: 3,
         rippleEffect: { //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: 'fill', //波纹绘制方式 stroke, fill
            scale: 10 //波纹圆环最大限制，值越大波纹越大
         },
         symbol: 'circle',
         symbolSize: function(val) {
            return (5 + val[2] * 5) / 150; //圆环大小
         },
         itemStyle: {
            normal: {
               show: true,
               color: '#F41C19'
            }
         },
         data: [],
      },
   ],
}

myChart.showLoading();


$.getJSON(mapJson, function (geoJson) {

   echarts.registerMap('centerMap', geoJson);
   myChart.hideLoading();


   var areaMapData = [
      {
         name: '白云区',
         value: 500,

      }, {
         name: '南沙区',
         value: 300,

      }, {
         name: '增城区',
         value: 100
      }
   ]
   var mapFeatures = echarts.getMap("centerMap").geoJson.features;
   var geoCoordMap = {};
   mapFeatures.forEach(function (v) {
      // 地区名称
      var name = v.properties.name;
      // 地区经纬度
      geoCoordMap[name] = v.properties.center;
   });

   var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
         var geoCoord = geoCoordMap[data[i].name];
         if (geoCoord) {
            res.push({
               name: data[i].name,
               value: geoCoord.concat(data[i].value)
            });
         }
      }
      return res;
   };
   // alert(JSON.stringify(convertData(areaMapData)));
   option.series[1].data = convertData(areaMapData); // 设置动效散点数据

   myChart.setOption(option);
});