我的传单标记上的箭头尾部中心未对齐

问题描述 投票：0回答：1

我正在使用 Leaflet 添加带有箭头的标记，但箭头尾部的中心未正确对齐。我该如何解决这个对齐问题？ 传单版本是 [电子邮件受保护] 我在传单中有多对箭头作为标记，我正在动态旋转这些箭头，但该对箭头的中心未对齐。这是图标代码

arrowIconGreen = L.icon({
    iconUrl: '../../content/images/right-arrow-green.png',
    shadowUrl: '',
    iconSize: [33, 35], // size of the icon
    shadowSize: [0, 0], // size of the shadow
    iconAnchor: [16, 35], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62], // the same for the shadow
    popupAnchor: [0, -10] // point from which the popup should open relative to the iconAnchor
});
arrowIconBrown = L.icon({
    iconUrl: '../../content/images/right-arrow-light-brown.png',
    shadowUrl: '',
    iconSize: [33, 35], // size of the icon
    shadowSize: [0, 0], // size of the shadow
    iconAnchor: [16, 35], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62], // the same for the shadow
    popupAnchor: [0, -10] // point from which the popup should open relative to the iconAnchor
});
const nacellePositionCloseView = L.marker(new L.LatLng(marker.lat, marker.lng), {
    draggable: false,
    dragging: false,
    autoPan: false,
    icon: arrowIconBrown
}).addTo(satelliteMap)
nacellePositionCloseView.setRotationAngle(360 - Number(nacelleDegree.value));
nacellePositionCloseView.setRotationOrigin("center center");
const windDirectionCloseView = L.marker(new L.LatLng(marker.lat, marker.lng), {
    draggable: false,
    dragging: false,
    autoPan: false,
    icon: arrowIconGreen
}).addTo(satelliteMap)
windDirectionCloseView.setRotationAngle(360 - Number(windDegree.value));
windDirectionCloseView.setRotationOrigin("center center");

这是图片 as you can see the tails of the arrows are not concurrent

我希望两个箭头的尾部是并发的。 除了旋转角度外，它们的浏览器 CSS 属性也相同。 请帮忙。

angular leaflet google-maps-markers leaflet.markercluster
1个回答
0
投票

（此答案假设您正在使用 

Leaflet.RotatedMarker
。）

您的箭头原点位于左侧中心，因此您需要使用 

center left
而不是 
center center
作为旋转原点：

nacellePositionCloseView.setRotationOrigin("center left");

旁注：

Leaflet.RotatedMarker
的实现是使用CSS属性
transform-origin
。如果需要，您还可以使用像素值，例如，如果您的图标不对称。

这是一个工作示例（替换 

greenArrowImagePath
和 
brownArrowImagePath
的值；并注意我使用任意值作为旋转角度）：

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StackOverflow Question 79005640</title>

    <link rel="stylesheet" href="leaflet.css" />
    <script src="leaflet.js"></script>

    <script src="leaflet.rotatedMarker.js">
    </script>

    <style>
        body {
            margin: 0;
        }
        #map { 
            height: 100vh;
        }
        .reference-marker .circle {
            background-color: #f07819;
            border-radius: 50%;
            height: 20px; width: 20px;
        }
    </style>

</head>
<body>
    
    <div id="map"></div>

    <script>
        
        const coordinate = [46.43283, 9.76596];

        const map = L.map('map').setView(coordinate, 13);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            // add link to attribution, omitted in this code example
            // due to width limit, i.e., avoid horizontal scrolling
            attribution: '&copy; OpenStreetMap',
        }).addTo(map);

        const brownArrowImagePath = 'arrows/8x/[email protected]';
        const greenArrowImagePath = 'arrows/8x/[email protected]';

        const referenceMarker = L.marker(new L.LatLng(...coordinate), {
            icon: L.divIcon({
                className: 'reference-marker',
                iconSize: [20, 20],
                html: '<div class="circle"></div>',
            }),
        }).addTo(map);

        const nacellePositionMarker = L.marker(new L.LatLng(...coordinate), {
            icon: L.icon({
                iconUrl: brownArrowImagePath,
                iconSize: [80, 20],
                iconAnchor: [0, 10],
            }),
        }).addTo(map);

        nacellePositionMarker.setRotationAngle(360 - 42);  // arbitrary value
        nacellePositionMarker.setRotationOrigin("center left");
        
        const windDirectionMarker = L.marker(new L.LatLng(...coordinate), {
            icon: L.icon({
                iconUrl: greenArrowImagePath,
                iconSize: [80, 20],
                iconAnchor: [0, 10],
            }),
        }).addTo(map);

        windDirectionMarker.setRotationAngle(360 + 84);  // arbitrary value
        windDirectionMarker.setRotationOrigin("center left");

    </script>

</body>
</html>

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.