echarts地图海南省地图问题

在使用Echarts进行地图开发时,遇到点击海南岛进行下钻展示时,由于三沙市的特殊地理构成,地图会默认自适应导致主要地区拥挤。为了解决这一问题,可以通过设置Echarts的geo属性,如center、layoutCenter和layoutSize,当选择海南省时,调整地图中心位置、偏移和缩放比例,使得地图能适配并突出主要岛屿。在非海南省时恢复默认设置,从而实现地图展示的优化。
摘要由CSDN通过智能技术生成

需求:

在echarts地图开发中,有时候需要点击某个省份的时候,地图变成当前省份的下级地图。

问题:

在海南岛点击下钻时,由于海南岛的三沙市是由很多岛屿组成(南海诸岛),而地图下钻会默认视图区域自适应,就会导致下面的情况:
海南地图
通过实验发现,主要地区会挤在一起,正常情况下,应该是展示中间的大岛屿,而三沙市(南海诸岛)只需展示部分即可

解决:

option = { ... } //对echarts的一些设置
//由于海南地图包括南海及南海诸岛在内的大片区域,所以显示海南地图时,要将地图放大,并设置海南岛居中显示
if ($this.parmet.province === '海南省') { 
   option.geo.center = [109.844902, 19.0392];//中心位置
   option.geo.layoutCenter = ['50%', '40%'];//地图相对容器偏移
   option.geo.layoutSize = "380%";//地图放大比例
} else { //非显示海南时,将设置的参数恢复默认值
   option.geo.center = undefined;
   option.geo.layoutCenter = undefined;
   option.geo.layoutSize = undefined;
}
myChart.setOption(option);

效果图:
效果图
如果位置要求不一的话,可以调整上面if(){}中的相应部分代码

  • 11
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值