[05] eCharts style custom series custom maps

description

UI design draft of the project, a large-screen display module map module, the original project is that we use a ArcGIS map service layers after JS API initialization, but for aesthetic reasons, finally decided to map large-screen module uses eCharts customize, UI design draft the map as follows:

UI design found by looking through JS API to instantiate a map layer service module to achieve this, then you need to make a dark-colored map, then publish the service, call the front-end implementation, this process is a bit tedious, so we Next is achieved by eCharts.

 

Steps

1, GeoJSON download data format on the map selector [] (http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4) website, as shown:

 

2, in the code, by eCharts map instantiation code to generate our map, as follows:

	// 创建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, the above code, we achieve a custom map, the final result is as follows:

 

to sum up

Examples of map operation actually refer to the API documentation eCharts official website to achieve, there was a problem encountered is that immediately after initialization map slim, is a large area on both sides of the blank position, so look for a lot of ways not solved , the official website after the final inspection documents, you can set its aspect ratio, after setting the aspect ratio found instances of the map pretty much, so we should Tell me what network document ah.

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