关于 openlayers 入门开发系列结合 echarts 开发 文章，几个作者 抄来抄去，这几个作者没有抄明白。PV大法，实在垃圾。
github 搜索 echarts-openlayer
可以找到 https://github.com/sakitam-fdd/ol3Echarts 这个 大佬作者。
以下 是 我 做的 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#map {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
}
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol3-echarts/dist/ol3Echarts.js"></script>
<script>
var Map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
preload: 4,
source: new ol.source.OSM()
})
],
loadTilesWhileAnimating: true,
view: new ol.View({
projection: 'EPSG:4326',
center: [116.395723, 39.889544],
zoom: 9
})
});
var option = {
series: [
{
type: 'lines',
blendMode: 'lighter',
dimensions: ['value'],
data: [{ "coords": [[116.4383, 40.1471], [116.4372, 40.1458], [116.4373, 40.1409], [116.4347, 40.1395], [116.4446, 40.1225], [116.445, 40.1189], [116.4537, 40.1187], [116.4553, 40.1046], [116.4551, 40.1031], [116.4504, 40.1025], [116.4336, 40.1016], [116.4334, 40.1038], [116.426, 40.1034], [116.4122, 40.1044], [116.4134, 40.0892], [116.4143, 40.0837], [116.4126, 40.0726], [116.4139, 40.055], [116.4119, 40.0512], [116.412, 40.0455], [116.4151, 40.0401], [116.4179, 40.0316], [116.4174, 40.019], [116.4161, 40.0128], [116.4162, 40.0094], [116.4078, 40.0095], [116.4075, 39.9877], [116.409, 39.9883], [116.4168, 39.9885], [116.4172, 39.9833], [116.4242, 39.9834], [116.4249, 39.9692], [116.4348, 39.9694], [116.4369, 39.9689], [116.4598, 39.9539], [116.4614, 39.9516], [116.4614, 39.9336], [116.4782, 39.9337], [116.4778, 39.908], [116.486, 39.908], [116.4893, 39.9058], [116.4971, 39.9078]], "lineStyle": { "color": "#409eff" } }, { "coords": [[116.4383, 40.1471], [116.4372, 40.1458], [116.4373, 40.1409], [116.4347, 40.1395], [116.4446, 40.1225], [116.445, 40.1189], [116.4537, 40.1187], [116.4553, 40.1046], [116.4551, 40.1031], [116.4504, 40.1025], [116.4336, 40.1016], [116.4334, 40.1038], [116.426, 40.1034], [116.4122, 40.1044], [116.4134, 40.0892], [116.4143, 40.0837], [116.4126, 40.0726], [116.4139, 40.055], [116.4119, 40.0512], [116.412, 40.0455], [116.4151, 40.0401], [116.4179, 40.0316], [116.4174, 40.019], [116.4161, 40.0128], [116.4162, 40.0094], [116.4078, 40.0095], [116.4075, 39.9877], [116.409, 39.9883], [116.4168, 39.9885], [116.4172, 39.9833], [116.4242, 39.9834], [116.4249, 39.9692], [116.4348, 39.9694], [116.4369, 39.9689], [116.4598, 39.9539], [116.4614, 39.9516], [116.4614, 39.9336], [116.4782, 39.9337], [116.4778, 39.908], [116.486, 39.908], [116.4893, 39.9058], [116.4971, 39.9078]], "lineStyle": { "color": "#409eff" } }, { "coords": [[116.4311, 39.9594], [116.4319, 39.9595], [116.4352, 39.9595], [116.4408, 39.9596], [116.4437, 39.9599], [116.4467, 39.9626], [116.4475, 39.9621], [116.4496, 39.9607], [116.4499, 39.9605], [116.45, 39.9604], [116.4496, 39.9601], [116.4483, 39.9588], [116.4462, 39.9569], [116.4453, 39.956], [116.4437, 39.9551], [116.4344, 39.9545], [116.4352, 39.9595], [116.4252, 39.9594], [116.4251, 39.9594], [116.408, 39.9591], [116.4079, 39.9591], [116.4079, 39.959], [116.4079, 39.9582], [116.4079, 39.9567], [116.408, 39.9559], [116.408, 39.9531], [116.408, 39.9527], [116.4081, 39.9516], [116.4081, 39.9497], [116.4081, 39.9485], [116.4083, 39.9463], [116.4084, 39.9437], [116.4085, 39.9412], [116.4085, 39.9387], [116.4086, 39.9363], [116.4086, 39.9359], [116.4088, 39.9334], [116.4088, 39.9333], [116.4088, 39.9326], [116.4089, 39.9298], [116.4091, 39.9273], [116.4108, 39.9243], [116.4108, 39.9242], [116.4108, 39.924], [116.411, 39.9185], [116.4066, 39.9184], [116.4066, 39.9152], [116.4067, 39.9152], [116.4115, 39.9155], [116.4126, 39.9155], [116.4138, 39.9121], [116.4138, 39.9114], [116.4114, 39.9105], [116.4114, 39.9093], [116.4115, 39.9081], [116.4115, 39.908], [116.4122, 39.908], [116.413, 39.908], [116.4138, 39.908], [116.4179, 39.9081], [116.418, 39.9071], [116.418, 39.9067], [116.4181, 39.9062], [116.4181, 39.9056], [116.4181, 39.9053], [116.4183, 39.9032], [116.4184, 39.902], [116.4184, 39.9012], [116.4184, 39.901], [116.4186, 39.901], [116.4217, 39.9004], [116.4223, 39.9004], [116.4274, 39.9006], [116.4274, 39.9007], [116.4204, 39.9007], [116.4211, 39.902], [116.4218, 39.9025], [116.4248, 39.9047], [116.4249, 39.9048]], "lineStyle": { "color": "#409eff" } }, { "coords": [[116.4311, 39.9594], [116.4319, 39.9595], [116.4352, 39.9595], [116.4408, 39.9596], [116.4437, 39.9599], [116.4467, 39.9626], [116.4475, 39.9621], [116.4496, 39.9607], [116.4499, 39.9605], [116.45, 39.9604], [116.4496, 39.9601], [116.4483, 39.9588], [116.4462, 39.9569], [116.4453, 39.956], [116.4437, 39.9551], [116.4344, 39.9545], [116.4352, 39.9595], [116.4252, 39.9594], [116.4251, 39.9594], [116.408, 39.9591], [116.4079, 39.9591], [116.4079, 39.959], [116.4079, 39.9582], [116.4079, 39.9567], [116.408, 39.9559], [116.408, 39.9531], [116.408, 39.9527], [116.4081, 39.9516], [116.4081, 39.9497], [116.4081, 39.9485], [116.4083, 39.9463], [116.4084, 39.9437], [116.4085, 39.9412], [116.4085, 39.9387], [116.4086, 39.9363], [116.4086, 39.9359], [116.4088, 39.9334], [116.4088, 39.9333], [116.4088, 39.9326], [116.4089, 39.9298], [116.4091, 39.9273], [116.4108, 39.9243], [116.4108, 39.9242], [116.4108, 39.924], [116.411, 39.9185], [116.4066, 39.9184], [116.4066, 39.9152], [116.4067, 39.9152], [116.4115, 39.9155], [116.4126, 39.9155], [116.4138, 39.9121], [116.4138, 39.9114], [116.4114, 39.9105], [116.4114, 39.9093], [116.4115, 39.9081], [116.4115, 39.908], [116.4122, 39.908], [116.413, 39.908], [116.4138, 39.908], [116.4179, 39.9081], [116.418, 39.9071], [116.418, 39.9067], [116.4181, 39.9062], [116.4181, 39.9056], [116.4181, 39.9053], [116.4183, 39.9032], [116.4184, 39.902], [116.4184, 39.9012], [116.4184, 39.901], [116.4186, 39.901], [116.4217, 39.9004], [116.4223, 39.9004], [116.4274, 39.9006], [116.4274, 39.9007], [116.4204, 39.9007], [116.4211, 39.902], [116.4218, 39.9025], [116.4248, 39.9047], [116.4249, 39.9048]], "lineStyle": { "color": "#409eff" } }],
polyline: true,
large: true,
lineStyle: {
color: '#409eff',
width: 3,
opacity: 1
}
},
]
};
var echartslayer = new ol3Echarts(option, {
source: '',
destination: '',
hideOnMoving: true,
forcedRerender: false,
forcedPrecomposeRerender: false
});
echartslayer.appendTo(Map)
</script>
</body>
</html>
