echarts地图海南省地图问题

雨点打透心脏的1/2处 2023-01-03 01:22 471阅读 0赞

需求：

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

问题：

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

解决：

>     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);
> 
> 效果图：  
> ![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70 1]  
> 如果位置要求不一的话，可以调整上面`if(){}`中的相应部分代码

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70]: /images/20221119/c21a8af75cd84d32b3cdcdfc9a3045b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70 1]: /images/20221119/edf1dc7579384e638c9b212b9fab51c6.png