Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gnijuohz/echarts-leaflet
ECharts extension for visualizing data on leaftlet maps
https://github.com/gnijuohz/echarts-leaflet
Last synced: about 1 month ago
JSON representation
ECharts extension for visualizing data on leaftlet maps
- Host: GitHub
- URL: https://github.com/gnijuohz/echarts-leaflet
- Owner: gnijuohz
- License: mit
- Created: 2017-07-18T03:06:36.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-10T22:50:57.000Z (over 3 years ago)
- Last Synced: 2024-04-23T16:40:40.239Z (8 months ago)
- Language: JavaScript
- Homepage: https://www.jing-zhou.xyz/echarts-leaflet/example/leaflet-multiple-layers.html
- Size: 861 KB
- Stars: 127
- Watchers: 9
- Forks: 65
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-echarts - echarts-leaflet - An extension to visualize data on leaflet maps. (Extensions / Videos)
README
# ECharts leaflet extension
[](https://travis-ci.org/gnijuohz/echarts-leaflet)
## Install
`npm i echarts-leaflet`
## Usage
There are two ways to use this extension, the two examples in the `example` folder demonstrate each approach.
### Use it directly through the script tag
```html
```
See [this example](./example/leaflet-multiple-layers.html).
### Use it as ES Module
```
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/scatter';
import 'echarts/lib/chart/effectScatter';
import 'echarts-leaflet';
```
See [this example](./example/leaflet-single-layer.html). To run it, use `parcel leaflet-single-layer.html`. The usage of parcel can be found [here](https://parceljs.org/).
## ECharts Option
You can use one or more tile layers via the `tiles` option. It's an array of
layers.
The default tile layer uses `http://{s}.tile.osm.org/{z}/{x}/{y}.png`
```javascript
option = {
leaflet: {
center: [120.13066322374, 30.240018034923],
zoom: 3,
roam: true,
tiles: [{
label: 'OpenStreetMap',
urlTemplate: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
options: {
attribution: '© OpenStreetMap, Tiles courtesy of Humanitarian OpenStreetMap Team'
}
}]
},
series: [{
coordinateSystem: 'leaflet',
}]
}
```
Specify multiple layers. You can choose a base layer to use via the layer control.
```javascript
{
layerControl: {
position: 'topleft'
},
tiles: [{
label: '天地图',
urlTemplate: 'http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}',
options: {
attribution: 'tianditu.com'
}
}, {
label: 'Open Street Map',
urlTemplate: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
options: {
attribution: '© OpenStreetMap, Tiles courtesy of Humanitarian OpenStreetMap Team'
}
}]
}
```
If you don't specify a label for a tile, it won't show up in the layer control. Therefore the following option will add two base layers to the map and there is no way to switch between them.
```javascript
{
layerControl: {
position: 'topleft'
},
tiles: [{
urlTemplate: 'http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}',
options: {
attribution: 'tianditu.com'
}
}, {
urlTemplate: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
options: {
attribution: '© OpenStreetMap, Tiles courtesy of Humanitarian OpenStreetMap Team'
}
}]
}
```
## Demo
- [全国空气质量(Air quality in China)](http://gnijuohz.github.io/echarts-leaflet/example/leaflet-multiple-layers.html)
## Build
- `yarn install`
- `rollup --config`
## Contributors
- [Jing Zhou](https://github.com/gnijuohz)
- [UltramanWeiLai](https://github.com/UltramanWeiLai)
- [Poyoman39](https://github.com/Poyoman39)
## License
MIT