在项目中,我们经常需要实现3D效果的地图,如下图所示:
4.gif
本案例使用echarts来实现,当然使用three.js也是可以实现的,只是使用echarts更加方便而已

1. 引入相关资源文件

<script src="js/echarts.min.js"></script>
<script src="js/echarts-gl.min.js"></script>
<script src="mapdata/hubei.js"></script>

2. 代码

<script type="text/javascript">
  // 1.需要引入echarts-gl.min.js 这个文件
  // 2.type: 'map' 修改为 type: 'map3D' 即可
  var myChart = echarts.init(document.getElementById('main'))
  myChart.setOption({
    series: [{
      type: 'map3D',
      map: '湖北',
      label: { // 标签的相关设置
        show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
        // distance: 5, // 标签距离图形的距离,在三维的散点图中这个距离是屏幕空间的像素值,其它图中这个距离是相对的三维距离
        //formatter:, // 标签内容格式器
        textStyle: { // 标签的字体样式
          color: '#ffffff', // 地图初始化区域字体颜色
          fontSize: 14, // 字体大小
          opacity: 1, // 字体透明度
          backgroundColor: 'rgba(0,23,11,0.5)' // 字体背景色
        },
        // normal:{
        //   show:true,
        //   formatter:function(params){ //标签内容
        //     // console.log(params)
        //     return  params.name;
        //   },
        //   // lineHeight: 20,
        //   backgroundColor:'rgba(255,255,255,.9)',
        //   borderColor:'#80cffd',
        //   borderWidth:'1',
        //   padding:[5,15,4],
        //   color:'#000000',
        //   fontSize: 12,
        //   fontWeight:'normal',
        // },
        emphasis: {
          show: true
        }
      },
      itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性,包括颜色,透明度,描边等。
        // areaColor: 'rgba(95,158,160,0.5)', // 地图板块的颜色
        areaColor: '#10786c', // 地图板块的颜色
        // opacity: 0.3, // 图形的不透明度 [ default: 1 ]
        borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
        borderColor: 'red' // 图形描边的颜色。[ default: #333 ]
      },
      tooltip: { //提示框组件。
        alwaysShowContent: true,
        hoverAnimation: true,
        trigger: 'item', //触发类型 散点图
        enterable: true, //鼠标是否可进入提示框
        transitionDuration: 1, //提示框移动动画过渡时间
        triggerOn: 'click',
        formatter: function (params) {
          // console.log(params.name, 'params.name')
          if (params.name) {
            var str = `
                  <div class="map-tooltip">
                    <div class="city-name">${params.name}</div>
                    <div class="city-info">志愿者人数:<span class="city-num">${params.data.volunteerNumber}</span></div>
                    <div class="city-info">活动总数:<span class="city-num">${params.data.taskNumber}</span></div>
                  </div>
                  `
            return str;
          }
        },
        // backgroundColor: 'rgba(30, 54, 124,1)',
        // backgroundColor: '#01FEDD',
        borderWidth: '1px',
        borderRadius: '4',
        borderColor: '#00B2AC',
        textStyle: {
          color: 'rgba(255,255,255,1)'
        },
        padding: [5, 10]
      },
    }]
  })
</script>

3. 总结

  • echarts实现3D地图
  • three.js也可以实现相同的效果