isnicc / 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