05 【eCharts样式定制系列】自定义地图

偏执的太偏执、 2023-06-30 06:47 23阅读 0赞

### 描述 ###

项目的UI设计稿中，大屏展示模块有地图模块，原本项目使用的是我们ArcGIS JS API初始化后的一个地图服务图层，不过为了美观考虑，最后决定大屏模块的地图使用eCharts来自定义，UI设计稿中的地图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][]

通过查看UI设计图发现，通过JS API来实例化一个地图图层服务来实现这个模块的话，就需要重新制作一份暗夜色的地图，然后发布服务，前端调用实现，这个过程有点繁琐，所以我们接下来通过eCharts来实现。

### 操作步骤 ###

1、在【地图选择器】（http://datav.aliyun.com/tools/atlas/\#&lat=33.521903996156105&lng=104.29849999999999&zoom=4）网站上下载GeoJSON格式的数据，如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1][]

2、在代码里，通过eCharts的地图实例化代码，生成我们的地图，如下：

// 创建GeoJSON底图
            _createJSONMap: function(domid) {
                const _self = this;
                
                echarts.registerMap('yunnan', _self.mapData);  //注册一个名为"yunnan"的地图
                const chartmap = echarts.init(document.getElementById(domid));
                
                const mapoption = {
                    tooltip: {
                        trigger: 'item',
                        formatter: function(params) {
                            return params.name;
                        },
                        extraCssText: 'height:20px;',
                    },
                    series: [
                        {
                            name: 'YNBasemap',
                            type: 'map',
                            roam: true, // 缩放和漫游
                            map: 'yunnan',   //指定刚才注册的地图
                            aspectScale: 1.5,    //宽高比，如果不指定，实例化出来的地图会偏瘦或者偏矮
                            zoom: 1.5,
                            label: {
                                show: true,
                                color: '#BBC0CA',
                            },
                            emphasis: {   //鼠标浮动的时候，标注和各个地图区域的交互渲染设置
                                label: {
                                    show: true,
                                    // fontSize: 16,
                                    color: '#39E639',
                                },
                                itemStyle: {
                                    areaColor: '#2B91B7',
                                    borderColor: '#0DC9D5',
                                },
                            },
                            itemStyle: {
                                areaColor: '#09304A',
                                borderColor: '#0DC9D5',
                            },
                            // 文本位置修正
                            textFixed: {
                                Alaska: [20, -20],
                            },
                        },
    
                    ],
                };
    
                chartmap.setOption(mapoption);
            },

3、通过上述代码，我们实现了地图的自定义，最终效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2][]

### 总结 ###

实例化地图操作其实也是参考eCharts官网的API文档来实现的，这里面当时遇到的问题就是刚初始化之后的地图偏瘦，就是两边的区域留白位置很大，所以找了很多方法都没解决，最后查阅官网文档，可以设置它的宽高比，设置完宽高比之后发现，实例化的地图好看多了，所以还是要看官网文档啊。

https://www.echartsjs.com/zh/option.html\#series-map.type

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200115144041585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020011514410125.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200115144145908.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70