echarts地图海南省地图问题

需求：

在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(){}中的相应部分代码

echarts地图海南省地图问题相关推荐

Winform Echarts 显示百度地图的用法（3）
1,用Echarts 显示百度地图的用法(2)写一个 baidu.html 2,winform页面放一个WebBrowser控件,用来放地图的html页面 3,winform 加载时将WebBrow ...
【vue项目使用echarts实现区域地图绘制，且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
eCharts二三维地图总结
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景最近多个项目中的登录页面陆续提出了不少地图需求,主要围绕地图的 ...
如何通过echarts绘制北京市地图并可以添加标记并可点击
首先获取城市地图所对应的json文件通过这个网站可以获取到城市地图所对应的json echarts 中使用的是地图的js文件需要找到北京地图的js文件下载各个城市的js文件绘制出地图在地图上 ...
湖北地图html代码,echarts全国省市地图代码
[实例截图] echarts全国省市地图代码 [实例截图] [核心代码] html5 canvas echarts全国省市地图代码 *{margin: 0;padding: 0;} body{widt ...
echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
Vue3 Echarts散点图+高德地图+卫星地图（一）——获取高德地图API
前言:在开发的过程中,对于Vue3的情况下,对于Echarts地图的文章操作很少,并且官方不通俗易懂,所以在此进行记录探索过程.还是一如既往贴近直接C/V操作,如果对于Echarts基本配置不会的同学 ...
echarts配合google地图，并自定义google地图的样式
前言全网关于google地图配合echarts的使用找了很久,其实echarts结合百度地图使用会更方便一些.公司因为想要更国际化,所以更倾向于使用google地图准备工作要想使用google地 ...
echarts使用百度地图
前情提要获得百度地图授权的ak密钥引入echarts的百度地图准备好echarts百度地图需要的数据自定义百度地图的样式去掉百度地图的logo 一.获取百度地图的ak密钥首先得注册成为百度 ...

echarts地图海南省地图问题

echarts地图海南省地图问题相关推荐

最新文章

热门文章