gnijuohz / echarts-leaflet

ECharts extension for visualizing data on leaftlet maps

ECharts leaflet extension

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

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw==" crossorigin="" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<script src="../dist/echarts-leaflet.js"></script>

See this example.

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. To run it, use parcel leaflet-single-layer.html. The usage of parcel can be found here.

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

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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
        }
      }]
  },
  series: [{
    coordinateSystem: 'leaflet',
  }]
}

Specify multiple layers. You can choose a base layer to use via the layer control.

{
  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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
    }
  }]
}

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.

{
  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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
    }
  }]
}

Demo

• 全国空气质量(Air quality in China)

Build

• yarn install
• rollup --config

Contributors

• Jing Zhou
• UltramanWeiLai
• Poyoman39

License

MIT

echarts-leaflet's Issues

about Option&API

1. How to use this? Not limited to your ECharts Option. It's better to list Option and API like echarts documentation.
2. Your Demo link cannot be accessed.
3. I hope you keep improving and look forward to new features.

使用谷歌地图为底图时，放大到一定倍数出现白屏,请问如何设置缩放大小？

如何使用百度地图？

作者，你好。
请问echarts-leaflet如何使用百度地图的瓦片？

Bug using the brush-mode

Current behaviour

Using the brush-mode with leaflet is currently not possible, as the map always is moved when dragging.

Expected behaviour

The map is not moved, when one uses the brush

Idea for implementation

I was wondering if one could listen to the brush and brushEnd events from echarts to deactivate the dragging from leaflet

I tried to implement it today, but I didn't succeed yet. @gnijuohz, do you have an idea how to implement it?

Thanks for your awesome work!

How can I get L in order to set bounds?

I want to set bounds and making map bounce back if moved away. I can get _map through this.echart.getModel().getComponent('leaflet').__map, but how can I get L to setMaxBounds().

I can set bounds using Leaflet library by using below code :
const southWest = Leaflet.latLng(-89.98155760646617, -180),
northEast = Leaflet.latLng(89.99346179538875, 180);
const bounds = Leaflet.latLngBounds(southWest, northEast);
map.setMaxBounds(bounds);

How can I achieve the same thing using 'echarts-leaflet'? Thanks in advance for any help.

如何能得到L？

您好 现在通过 this.chart.getModel().getComponent('leaflet').__map 我已经能得到_map，请问如何能得到L，用来绘制另一层geojson数据。谢谢！！！！！

does not match the corresponding path on disk `Leaflet.js`

Hi,
I am trying use this library on react.But i get error the following error:

Module not found: `/Users/admin/Projects/DashboardBootstrap/node_modules/leaflet/src/leaflet.js` does not match the corresponding path on disk `Leaflet.js`.

I've detected the cause of the error. echarts-leaflet is imported from leaflet library as leaft/src/leaflet if you can update to echarts-leaflet.js file as follows it is fixed this error for react-scripts.

  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('echarts/lib/echarts'), require('leaflet/src/Leaflet')) :

Wron coordinate

When the map has different coordinates than the Chinese, the point appears in wrong coordinates

how get instance of leaflet ?

how i can get the instance of leaflet to add others options to the map

typescript

The cache of zoom event -- variable's name bug

My god ! 😭
There's a bug of zoom cache's variable name -- this._oldZoomEndHandler, which should be this._oldZoomHandler at here.
It caused my other zoom events to be unusable. I even thought it was a problem of coordinate transformation. It trapped me for a few days. I found it after reading the source code for a long time . . .
And I suggest you add if conditional statements before deleting the listen event, so as not to affect other layers.

叠加多个图层

geoJSON support

I'm trying to use this plugin with the series of type 'map' in echarts. I have a geojson file that I can register with echarts. I know need to draw that geojson over the leaflet tile layer and have the ability to roam. Does this library support this use case, or am I limited to using lat/long points using the scatter series?

How to disable dragging on map?

I want to disable drag on map. Is there any way to achieve it? Thank you.

【Bug】When the map is shifted up or down to a certain level, an infinite loop occurs, causing the browser to fake death

When the map is shifted up or down to a certain level, an infinite loop occurs, causing the browser to fake death, and the page reproduces the problem：

Is it possible to use it with the original echarts files

Great work dude!
Is it possible to use it with the original echarts files, instead of replacing the echarts files? Thanks.

能否不通过地图的拖拽或者缩放刷新echarts

地图拖拽或者缩放刷新echarts，这种方式感觉效果不太友好，是否可以换一种实现方式。比如markerPane或者overlayPane？

Dragging map makes tooltip position away from mouse pointer

After moving the open street map in example (multiple layer), tooltip is rendered unproperly.

地图总是在最上层

弹窗什么的都会被地图overlap
测试过echarts+bmap 没有这种情况

Using a visualMap

I've been trying to display a visualMap component by adding the visualMap property to the chart's option object. Unfortunately, this does not display the visualMap. For instance removing the color configuration of the series and adding the following property to the option object in ./example/single-layer.js

  visualMap: {
    min: 0,
    max: 300,
    calculable: true,
    inRange: {
        color: ['#50a3ba', '#eac736', '#d94e5d']
    },
    textStyle: {
        color: '#fff'
    },
    dimension: 2,
    seriesIndex: 1
  }

does not lead to the visualMap display like in the example here https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter-map.

Is there any way to add a VisualMap on Maps displayed through echarts-leaflet? Thanks in advance for any help.

请教

你好，我按照你的示例来做，经纬度是美国(国外的)的就会跑到南极去，如下图

Is heatmap supported?

Hi,
Thanks for the library. It is very helpful. Does this support heatmap as in https://echarts.apache.org/examples/zh/editor.html?c=heatmap-map. I am getting echart error saying it cannot find visualMapModel in _renderOnGeo().

The options I have passed as exactly as in echarts link above, except
coordinateSystem: 'leaflet'. Any work arounds, tips would be really helpful.

-Thanks,
Suma

移动地图时 点线和地图分开移动

如题，请问如何解决？

myChart.convertToPixel 方法不能使用么？

使用 myChart.convertToPixel（'leaflet', geoCoord） 方法获取像素点时 出现错误