@joakimono/echarts-extension-leaflet
Version:
Leaflet map extension for Apache Echarts 5
138 lines (132 loc) • 4.69 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<meta http-equiv="cleartype" content="on" />
<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Example using heatmap with echarts-extension-leaflet</title>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha512-Zcn6bjR/8RZbLEpLIeOwNtzREBAJnUKESxces60Mpoj+2okopSAcSUIUOseddDm0cxnGQzxIR7vJgsLZbdLE3w=="
crossorigin="anonymous"
/>
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha512-BwHfrr4c9kmRkLw6iXFdzcdWV/PGkVgiIyIWLLlTSXzWQzxuSg4DiQUCpauz/EWjgk5TYQqX/kvn9pG1NpYfqg=="
crossorigin="anonymous"
></script>
<!-- ECharts CDN -->
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.js"
></script>
<!-- echarts leaflet extension -->
<script
type="text/javascript"
src="../dist/echarts-extension-leaflet.js"
></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body,
#echarts-lmap {
width: 100%;
height: 100%;
overflow: hidden;
}
#map {
height: 300px;
}
</style>
</head>
<body>
<div id="echarts-lmap"></div>
<script type="text/javascript">
var heatmapDataURI =
"https://cdn.jsdelivr.net/gh/apache/echarts-examples/public/data/asset/data/hangzhou-tracks.json";
var option = {
lmap: {
// Initial options of Leaflet
// See https://leafletjs.com/reference.html#map-option for details
// NOTE: note that this order is reversed from Leaflet's [lat, lng]!
center: [120.2, 30.2], // [lng, lat]
zoom: 10,
// Whether the map and echarts automatically handles browser window resize to update itself.
resizeEnable: true,
// Whether echarts layer should be rendered when the map is moving. Default is true.
// if false, it will only be re-rendered after the map `moveend`.
// It's better to set this option to false if data is large.
renderOnMoving: true,
// echarts layer is interactive. Default: true
echartsLayerInteractive: true,
// enable large mode. Default: false
largeMode: false,
// Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
// Do it after you have retrieved the leaflet instance.
},
visualMap: {
show: true,
left: 20,
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ["blue", "blue", "green", "yellow", "red"],
},
},
animation: false,
series: [
{
type: "heatmap",
// use `lmap` as the coordinate system
coordinateSystem: "lmap",
data: [
// will be replaced
[120.14322240845, 30.236064370321, 1],
[120.14280555506, 30.23633761213, 1],
],
pointSize: 5,
blurSize: 6,
},
],
};
// initialize echart
var chart = echarts.init(document.getElementById("echarts-lmap"));
//chart.setOption(option);
// fetch the heatmap data
fetch(heatmapDataURI)
.then((response) => response.json())
.then((data) => {
// convert
var points = [].concat.apply(
[],
data.map(function (track) {
return track.map(function (seg) {
return seg.coord.concat([1]);
});
})
);
// set the data for heatmap
option.series[0].data = points;
chart.setOption(option);
// get Leaflet extension component and Leaflet instance
var lmapComponent = chart.getModel().getComponent("lmap");
var lmap = lmapComponent.getLeaflet();
L.tileLayer(
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
{
attribution:
"Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community",
}
).addTo(lmap);
});
</script>
</body>
</html>