leaflet流动线
效果图：
主要使用Leaflet.Path.DashFlow动态流向线插件，可以配置每个折线的颜色，宽度。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<script src="./js/L.Path.DashFlow.js"></script>
</head>
<body>
<div id="map" style="width: 1920px; height: 1000px; border: 1px solid #ccc"></div>
<script src="./json/line.js"></script>
<script>
let data1 = L.geoJSON(data);
var map = L.map('map').setView([32.050678, 118.792199], 7.5);
L.tileLayer('http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7', {
attribution: ''
}).addTo(map);
let path1 = [];
let pthLayer = [];
for (let k in data1._layers) {
path1.push(data1._layers[k]._latlngs)
var path = L.polyline(data1._layers[k]._latlngs, {
dashArray: "5,15",
dashSpeed: data1._layers[k].feature.properties.direction ? 10 : -10,
weight: data1._layers[k].feature.properties.width,
opacity: 1,
color: data1._layers[k].feature.properties.color,
});
pthLayer.push(path)
}
L.polyline(path1,{
weight:5,
opacity:0.7,
color:'rgba(15, 237, 56, 1)',
}).addTo(map);
for(let k in pthLayer){
pthLayer[k].addTo(map)
}
</script>
</body>
</html>
data数据：
let data = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {
width: 5,
color: "#fff",
direction: true,
},
geometry: {
type: "LineString",
coordinates: [
[110.0187305, 36.70533393],
[111.2656403, 36.73864916],
[112.18003606, 35.96875303],
[113.84257481, 35.0552942],
[114.50758862, 34.54334469],
],
},
},
{
type: "Feature",
properties: {
width: 3,
color: "blue",
direction: false,
},
geometry: {
type: "LineString",
coordinates: [
[109.39527141, 35.63164715],
[110.51748546, 34.85089594],
[112.59566413, 34.64598873],
[114.13351106, 33.82129797],
[110.93311367, 33.3017828],
[109.35370159, 34.0626664],
],
},
bbox: [109.35370159, 33.3017828, 114.13351106, 35.63164715],
},
{
type: "Feature",
properties: {
width: 5,
color: "red",
direction: false,
},
geometry: {
type: "LineString",
coordinates: [
[114.46602555, 34.61178814],
[116.04545595, 36.20387478],
[118.33144661, 35.29311379],
[118.16517169, 33.26703751],
[116.79355937, 31.5831425],
[116.75199618, 31.61854285],
],
},
bbox: [114.46602555, 31.5831425, 118.33144661, 36.20387478],
},
],
};
浙公网安备 33010602011771号