Echart 地图随笔

leaf1200@

已于 2024-07-03 16:17:55 修改

阅读量705

点赞数 8

文章标签： echarts

于 2024-06-30 12:49:11 首次发布

本文链接：https://blog.csdn.net/m0_61358608/article/details/140043524

版权

时隔几年再做大屏的地图，完全没有印象，趁着现在手热简单记录下

# 【geo3D】3D地图

geo3D: {
      map: "china",
      itemStyle: {
        color:  "#114B7B",
        opacity: 0.8,
        borderWidth: 0.4,//0.4,
        borderColor: "#6becf5",//"#000",
        areaColor: '#fff'
      },
      bottom: '15%',
      viewControl: {
        autoRotate: true,// 开启自动旋转
        autoRotateAfterStill: 3,
        distance: 140,
        minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
        maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
        minBeta: -Infinity, // 一直旋转
        maxBeta: Infinity, // 一直旋转
        animation: true, // 是否开启动画。[ default: true ]
        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
        animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
      },
      // viewControl: {
      //   zoomSensitivity: 0,//禁止缩放
      //   distance: 90,
      //   rotateSensitivity: 0//禁止旋转
      // },  
      emphasis: {
        disabled: false, //是否可以被选中
        label: {
          //移入时的高亮文本
          show: true,
          color: "#fff", //显示字体颜色变淡
          fontSize: 18, //显示字体变大
        },
        itemStyle: {
          color: "rgba(0,254,233,0.6)",//显示移入的区块变色
        },
      },     
      shading: "lambert",
      light: {
        //光照阴影
        main: {
          // color: "#fff", //光照颜色
          intensity: 1, //光照强度
          //shadowQuality: 'high', //阴影亮度
          shadow: true, //是否显示阴影
          shadowQuality: "medium", //阴影质量 ultra //阴影亮度
          alpha: 55,
          beta: 10,
        },
        ambient: {
          intensity: 0.7,
        },
      },
      regions: [{ // 高亮显示的区域配置
        name: '江苏省',
        itemStyle: {
          color: 'rgba(0,254,233,0.6)', // 设置高亮颜色为蓝色
        },
        height: 6, // 设置高亮区域的高度
        label: {
          show: true, 
          color: '#fff',
          fontFamily: '楷体',
          fontSize:28,
        },     
        emphasis: {
          disabled: true, //高亮区域被选中
          label: {
            show: true,
            fontSize: 30, 
          },
          itemStyle: {
            color: "rgba(0,254,233,0.8)",
          },
        },
      }],
    },  
series: [     
      {
        name: "",
        type: "scatter3D",
        coordinateSystem: "geo3D",
        zlevel: 7,
        data: [],
      } 
    ]

> 【lambertMaterial】带背景的3d地图

三维地理坐标系组件中三维图形的着色效果。echarts-gl 中支持下面三种着色方式：

        'color' 只显示颜色，不受光照等其它因素的影响。

        'lambert' 通过经典的 lambert 着色表现光照带来的明暗。

        'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。

将 shading设成 "lambert"，配置对应的图片；realistic没试过

import mapBg from '@/assets/imgs/map_bg.jpg'

geo3D: {
    shading: "lambert",
    lambertMaterial: {
        detailTexture: mapBg
    }
}

> 【click】3d地图的点击事件

3d地图对点击事件支持的不好，直接用并不能生效

myChart.value.on('click', function (params) {
    //xxx
  });

改成下面的，虽然能触发点击事件，但是只能获取到x,y，并不能获取点击的区域

myChart.value.getZr().on('click', function (e, v) {
    //xxx
})

解决方案是在 series中再加一层地图去触发点击事件

 series: [
      {
        type: "map3D",
        map: "chongqing",
        selectedMode: "single", //地图高亮单选
        zlevel: 6,
        roam: true,//是否允许缩放
        bottom: '15%',
        viewControl: {
          autoRotate: true,// 开启自动旋转
          autoRotateAfterStill: 3,
          distance: 140,
          minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
          maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
          minBeta: -Infinity, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
          maxBeta: Infinity, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
          animation: true, // 是否开启动画。[ default: true ]
          animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
          animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
        },  
      }]
//绑定点击事件
myChart.value.on('click', function (params) {
    if (params.name == '江苏省' ) {
      //xxx
    }
  });

> 【Beta】3d地图持续旋转

将minBeta和maxBeta设置成无限大

geo3D: {     
      viewControl: {       
        minBeta: -Infinity, // 左右旋转的最小 beta 值。
        maxBeta: Infinity, // 左右旋转的最大 beta 值。
      }
}

> 【regions】3d地图高亮显示某个区域

regions: [{ // 高亮显示的区域配置
        name: '江苏省',
        itemStyle: {
          color: 'rgba(0,254,233,0.6)', // 设置高亮颜色为蓝色
        },
        height: 6, // 设置高亮区域的高度
        label: {
          show: true, 
          color: '#fff', 
          fontFamily: '楷体',
          fontSize:28,          
        },     
        emphasis: {
          disabled: true, //高亮区域选中后的效果
          label: {
            show: true,
            fontSize: 30, 
          },
          itemStyle: {
            color: "rgba(0,254,233,0.8)",
          },
        },
      }]

# 【geo】地图

 geo: [{
      layoutCenter: ['50%', '50%'],//位置
      layoutSize: '180%',//大小
      show: true,
      map: mapName,
      roam: false,
      zoom: 0.65,
      aspectScale: 1,
      label: {
        normal: {
          show: false,
          textStyle: {
            color: '#fff'
          }
        },
        emphasis: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        }
      },
      itemStyle: {
        normal: {
          areaColor: {
            type: "linear",
            x: 1200,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: "rgba(3,27,78,0.75)", // 0% 处的颜色
            }, {
              offset: 1,
              color: "rgba(58,149,253,0.75)", // 50% 处的颜色
            },],
            global: true, // 缺省为 false
          },
          borderColor: "#c0f3fb",
          borderWidth: 1,
          shadowColor: "#8cd3ef",
          shadowOffsetY: 10,
          shadowBlur: 120,
        },
        emphasis: {
          areaColor: "rgba(0,254,233,0.6)",
          borderWidth: 0
        }
      }
    },
{
//多层地图就继续添加
}
]

> 【areaColor】带背景图的地图

将areaColor设置成图片

import mapBg from '@/assets/imgs/map_bg.jpg'
geo:[
{
      type: "map",
      map: mapName,
      zlevel: -1,
      aspectScale: 1,
      layoutCenter: ["50%", "51%"],
      layoutSize: "117%",
      roam: false,
      silent: true,
      itemStyle: {
        normal: {
          areaColor: {
            image: mapBg, 
            repeat: 'no-repeat' 
          },
          borderWidth: 1,
          borderColor: "rgba(58,149,253,0.8)",
          shadowColor: "rgba(172, 122, 255,0.5)",
          shadowOffsetY: 5,
          shadowBlur: 15,
        },
      },
    }
]

# 【effectScatter】带有涟漪特效动画的散点（气泡）图

3D中有series-scatter3D，没有达到我想要的效果，所以可以用左下图代替

{
        name: '',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: convertData(toolTipData),
        showEffectOn: 'render',
        itemStyle: {
          normal: {
            color: '#00FFFF',
          }
        },
        rippleEffect: {
          scale: 5,
          brushType: 'stroke',
        },
        label: {
          normal: {
            formatter: '{b}',
            position: 'bottom',
            show: false,
            color: "#fff",
            distance: 10,
          },
        },
        symbol: 'circle',
        symbolSize: [20, 10],//图左
        symbolSize: [20, 20],//图右
        itemStyle: {
          normal: {
            color: '#16ffff',
            shadowBlur: 10,
            shadowColor: '#16ffff',
          },
          opacity: 1
        },
        zlevel: 4,
      },

#【scatter】气泡图，瞄点

{
        type: 'scatter',
        coordinateSystem: 'geo',
        geoIndex: 0,
        zlevel: 5,
        itemStyle: {
          color: '#00FFF6',
          opacity: 1
        },
        legendHoverLink: true,
        symbol: img2,//可以使用自定义的图片，用base64的格式
        symbolSize: [25, 40],//设置图片的大小
        symbolOffset: [0, -0],
        z: 999,
        data: scatterData(),
      },

#【lines】飞线

 {
        type: "lines",
        zlevel: 7,
        coordinateSystem: "geo",
        lineStyle: {
          curveness: 0.2, // 尾迹线条曲直度
          width: 1.6,//不想显示底线，就设成0
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0.05,
                color: "#f00",
              },
              {
                offset: 0.3,
                color: "#00f",
              },
              {
                offset: 1,
                color: "#0f0",
              },
            ],
            global: false,
          },
        },
        effect: {
          show: true,
          period: 10,
          delay: 400,
          trailLength: 0.4,
          color: "rgba(255,255,100,1)", // 流动点颜色
          symbol: "pin",
          symbolSize: 10,
        },
        data: [
          {
            name: '飞线',
            coords: [[116.46, 39.92], [109.1162, 34.2004]],
          },
        ],
        select: {
          disabled: false,
        },
        emphasis: {
          disabled: true,
        },
        silent: true,
      }

#【lines3D】飞线

能设置的属性较lines少

{
      type: 'lines3D',
      coordinateSystem: 'geo3D',
      effect: {
        show: true,
        trailWidth: 4,
        trailLength: 0.5,
        trailOpacity: 1,
        trailColor: '#00fffb',
      },
      lineStyle: {
        width: 2,
        color: '#00fffb',
        opacity: 0
      },
      blendMode: 'lighter',
      data: [
        {
          name: 'From xx to xx',
          coords: [
            [106.565472, 29.865042],
            [106.660472, 29.750042]
          ],
          value: 1000
        }
      ]
    }

# 【globe】地球组件

environment可以设置环境，支持纯色，渐变和图片

import mapBgUrl from '@/assets/imgs/map3.jpg'
globe: {
      rotate: 20,
      shading: 'color',
      environment: mapBgUrl,//设置背面的环境纹理
      baseTexture: baseTexture,// mapBgUrl, // 基础纹理
      globeRadius: 120, // 球面半径
      viewControl: {
        alpha: 30,
        beta: 160,
        autoRotate: true,
        autoRotateAfterStill: 10,
        distance: 240,
        autoRotateSpeed: 9,
        zoomSensitivity: 0,
        animation: true,
        animationDurationUpdate: 2000,
        animationEasingUpdate: "cubicInOut",
      },
    },

baseTexture设置地球的纹理，支持图片路径的字符串，图片或者 Canvas 的对象，也支持直接使用 echarts 的实例作为纹理，此时在地球上的鼠标动作会跟纹理上使用的 echarts 实例有联动

//创建地球纹理
let baseTexture = null
baseTexture = echarts.init(canvas, null, {
    width: 4096,
    height: 2048,
  });
  baseTexture.setOption({
    backgroundColor: '#020d18',
    series: [
      {
        type: 'map',
        map: 'world',
        boundingCoords: [
          [-180, 90],
          [180, -90],
        ],
        itemStyle: {
          areaColor: '#127be3',
          borderColor: '#00cccc',
          borderWidth: 1,
        },
        emphasis: {
          itemStyle: {
            areaColor: "rgba(0,254,233,0.6)",
            borderWidth: 0
          }          
        }
      },
    ],
  });

> 增加飞线

let worldData = [[
  [-72.46245121585589, -44.28452280412797],
  [-95.712891, 37.09024],
],
//...
]
series: [{
      type: 'lines3D',
      coordinateSystem: 'globe',
      effect: {
        show: true,
        trailWidth: 3,
        trailOpacity: 1,
        trailLength: 0.5,
        trailColor: '#00fffb'
      },
      lineStyle: {
        width: 1,
        color: '#75D6EB',
        opacity: 0.1
      },
      blendMode: 'lighter',
      data: worldData      
    }]