@joakimono/echarts-extension-leaflet
Version:
Leaflet map extension for Apache Echarts 5
149 lines (144 loc) • 4.88 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" />
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
<title>Example using line chart 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.min.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;
}
</style>
</head>
<body>
<div id="echarts-lmap"></div>
<!-- data comes from Baidu Map, just for example -->
<script type="text/javascript">
var linesDataURI =
"https://cdn.jsdelivr.net/gh/apache/echarts-examples/public/data/asset/data/lines-bus.json";
// initialize echart
var chart = echarts.init(document.getElementById("echarts-lmap"));
// fetch the lines data
fetch(linesDataURI)
.then((response) => response.json())
.then((data) => {
// convert
var hStep = 300 / (data.length - 1);
var busLines = [].concat.apply(
[],
data.map(function (busLine, idx) {
var prevPt;
var points = [];
for (var i = 0; i < busLine.length; i += 2) {
var pt = [busLine[i], busLine[i + 1]];
if (i > 0) {
pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
}
prevPt = pt;
points.push([pt[0] / 1e4, pt[1] / 1e4]);
}
return {
coords: points,
lineStyle: {
color: echarts.color.modifyHSL(
"#5A94DF",
Math.round(hStep * idx)
),
},
};
})
);
chart.setOption({
// lmap component option
lmap: {
center: [116.46, 39.92],
zoom: 10,
resizeEnable: true,
// It's better to set this option to false if data is large.
renderOnMoving: false,
echartsLayerInteractive: true,
largeMode: true,
// 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.
},
series: [
{
type: "lines",
coordinateSystem: "lmap",
polyline: true,
data: busLines,
silent: true,
lineStyle: {
opacity: 0.2,
width: 1,
},
progressiveThreshold: 500,
progressive: 200,
},
{
type: "lines",
coordinateSystem: "lmap",
polyline: true,
data: busLines,
lineStyle: {
width: 0,
},
effect: {
constantSpeed: 20,
show: true,
trailLength: 0.1,
symbolSize: 1.5,
},
zlevel: 1,
},
],
});
// get Leaflet extension component and Leaflet instance
var lmapComponent = chart.getModel().getComponent("lmap");
var lmap = lmapComponent.getLeaflet();
L.tileLayer(
"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
{
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: "abcd",
maxZoom: 20,
}
).addTo(lmap);
});
</script>
</body>
</html>