echarts地图添加图片

需求:地图的各区域添加图标

解决方案:

        通过散点图与地图的结合,为地图添加上图片;

option: {
        geo: [
          {
            map: 'xx省',//要显示地图的地区名
            roam: false,
            zlevel: 1,
            zoom: 1.2,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#052783',
                borderWidth: 1,
                areaColor: '#052783',
                shadowColor: '#052783',
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 20
              },
              emphasis: {
                borderWidth: 1,
                areaColor: '#052783',
                borderColor: '#052783'
              }
            }
          }
        ],
        series: [
          {
            type: 'map',
            zlevel: 3,
            map: 'xx省',
            zoom: 1.2,
            label: {
              show: true,
              color: '#fff',
              fontSize: 12
            },
            itemStyle: {
              normal: {
                borderColor: '#5AC3EB',
                borderWidth: 1
              },
              emphasis: {
                areaColor: 'rgba(39, 196, 153, 1)'
              }
            },
            data: []
          },
         {
          type: 'scatter',
          coordinateSystem: 'geo',
          //自定义图片的 位置(lng, lat)
          data: [{
            value: xxx,
            symbolSize:30,
            symbol:图片,
            symbolOffset:[0,0]
          },{
            value: xxx,
            symbolSize:30,
            symbol:图片,
            symbolOffset:[0,0]
          },...],
          zlevel: 3
         }
        ],
        ...
      }

 效果图

 完整代码请加我微信

        

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈善强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值