Leaflet地图标记旋转角度、线条方向箭头示例

最新推荐文章于 2025-06-03 15:58:16 发布

lihefei_coder

最新推荐文章于 2025-06-03 15:58:16 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：地图文章标签： leaflet 地图标记旋转角度线条方向箭头

本文链接：https://blog.youkuaiyun.com/lihefei_coder/article/details/121115675

地图专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何使用Leaflet JavaScript库在地图上添加可旋转标记及带箭头的线条，包括设置地图中心点、缩放级别、添加OpenStreetMap瓦片、定义标记旋转角度及线条样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标记旋转角度

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
    <title>标记旋转角度</title>
</head>

<body>
    <div id="map"></div>
    <script src="./js/leaflet/plugins/leaflet.rotatedMarker.js"></script>
    <script>
    	// 初始化地图
        const map = L.map(document.getElementById("map"), {
            center: L.latLng(39.91589994226363, 116.39079093933107),
            zoom: 16,
            minZoom: 10,
            maxZoom: 20
        });

        // 添加底图瓦片
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
        
        // 添加标记
        const marker = new L.marker(
            { lat: 39.920598, lng: 116.390576 }, 
            { 
                rotationAngle: 80 // 旋转角度 
            },
        ).addTo(map);
        marker.setRotationAngle(120); // 更新角度
    </script>
</body>
</html>

线条添加箭头

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
    <title>线条添加箭头</title>
</head>

<body>
    <div id="map"></div>
    <script src="./js/leaflet/plugins/leaflet.polylineDecorator.js"></script>
    <script>
    	//初始化地图
        const map = L.map(document.getElementById("map"), {
            center: L.latLng(39.91589994226363, 116.39079093933107),
            zoom: 16,
            minZoom: 10,
            maxZoom: 20
        });

        //添加底图瓦片
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);


        //画线
        const points = [
            [39.91710957679779, 116.38731479644777],
            [39.91656647822125, 116.39079093933107],
            [39.91707666185516, 116.39465332031251]
        ];
        const lineStyle = {
            color: "#15d069", //颜色
            opacity: 1, //透明度
            weight: 10, //粗细
            dashArray: '<svg t="1632815394855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2561" width="200" height="200"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2562" fill="#ffffff"></path></svg>',
            dashOffset: 10
        };
        const line = L.polyline(points, lineStyle).addTo(map); // 创建线条
        // 给线条添加箭头
        const decorator = L.polylineDecorator(line, {
            patterns: [
                { 
                    offset: 20, 
                    endOffset: 10, 
                    repeat: 30, 
                    symbol: L.Symbol.arrowHead({ 
                        pixelSize: 5, 
                        polygon: false, 
                        pathOptions: { 
                            stroke: true, 
                            weight: 2, 
                            color: '#fff' 
                        }
                    }) 
                }
            ]
        }).addTo(this.map);
    </script>
</body>
</html>