# 概述
如名称所表达的，这是一个使用了leaflet的echarts的地图扩展。

[leaflet](https://leafletjs.com/)，这是一个用于移动友好的交互式地图的开源 JavaScript 库，他支持所有符合OGC WMTS标准的地图源，这就包括了openstreetmap, mapbox、天地图，以及像百度、高德、必应、谷歌等所有主流的地图的tile源，所以我们只需要使用leaflet 的api来开发地图功能，如果要切换地图，只需要切换leaflet的地图图层就可以了

## 备注
本组件基于[echarts-leaflet](https://www.npmjs.com/package/echarts-leaflets)修改而来，主要是解决了`echarts-leaflet`显示的地图的瓦片之间存在白边的问题，如下图所示
![存在白边的地图](./img/leaflet-mapbox-hasgap.png)
仔细看，上图的瓦片之前存在一个细细的白线，这是leaflet的一个bug，原因和解决方案可以参考[这里](https://github.com/Leaflet/Leaflet.TileLayer.NoGap)，在这里只是把他们提供的代码做了整合

# Demo
[散点图](https://gitee.com/sailimuhu/echarts-extension-mbmap/tree/master/example/scatter.html)
![无间隙](./img/leaflet-mapbox-nogap.png)<br/>

# 如何引入
## 通过script标签
```html
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
		integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
		crossorigin=""/>
		<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
		integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
		crossorigin=""></script> 
		<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
		<script src="../dist/echarts-extension-leaflet.js"></script>  
```
      
## 使用npm
```shell
npm install echarts-extension-leaflet
```

然后在要使用的文件vue文件中引入
```js
import echarts from 'echarts'
import 'echarts-extension-leaflet'
```

# 如何使用
对应的echarts的选项如下
主要有两点：
- 增加一个leaflet选项，在里面给出leaflet的图层配置，这里面的关键点是`urlTemplate`和`options`，只要是符合OGC WMTS标准的地图源都可以，比如mapbox、天地图、以及百度、高德、微软、谷歌等各种商用地图。option的选项则可以参考`leaflet`的[TileLayer官方文档](https://leafletjs.com/SlavaUkraini/reference.html#tilelayer)
- serie的坐标设置为leaflet

下面是一个使用mapbox地图的示例，实际使用时请替换为自己的token

```js
var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    title: {
        text: '全国主要城市空气质量',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    leaflet: {
        center: [104.114129, 37.550339],
        zoom: 4,
        roam: true,
        layerControl: {
            position: 'topright'
        },
        tiles: [
            {
                label: 'mapbox',
                urlTemplate: 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
                options: {
                    maxZoom: 18,
                    id: 'mapbox/dark-v10',
                    tileSize: 512,
                    zoomOffset: -1,
                    accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
                }
            }
        ]
    },
    series: [{
        name: 'pm2.5',
        type: 'scatter',
        coordinateSystem: 'leaflet',
        data: convertData(data),
        symbolSize: function (val) {
            return val[2] / 10;
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#ddb926'
            }
        }
    },
    {
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'leaflet',
        data: convertData(data.sort(function (a, b) {
            return b.value - a.value;
        }).slice(0, 6)),
        symbolSize: function (val) {
            return val[2] / 10;
        },
        showEffectOn: 'emphasis',
        rippleEffect: {
            brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        zlevel: 1
    }
    ]
});
```
# 如何编译
如果要对源码做修改，然后重新发布，可以运行如下命令
```shell
rollup --config rollup.config.js
```

其中rollup是一个打包工具，需要先全局安装

```shell
npm install rollup -g
```