leaflet流动线
效果图：
主要使用Leaflet.Path.DashFlow动态流向线插件，可以配置每个折线的颜色，宽度。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!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数据：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 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], }, ],}; |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具