如何在缩放时反转传单折线箭头自动调整大小？答案

【问题标题】：How to invert leaflet polyline arrow auto resize on Zoom?如何在缩放时反转传单折线箭头自动调整大小？
【发布时间】：2020-08-31 01:32:13
【问题描述】：

我希望我的传单折线箭头在放大时增加它的大小并在缩小时减小它。但按照它的模式，发生的事情恰恰相反。有办法扭转它吗？这里有一个完整的例子：https://github.com/bbecquet/Leaflet.PolylineDecorator

function addLine(map, iniCoord, endCoord, desc, color, lineWeight, onClick) {
    var polyline = L.polyline([coordIni, coordFim], {
        color: color,
        offset: 0,
        weight: lineWeight
    });

    polyline.addTo(elements);

    L.polylineDecorator(polyline, {
        patterns: [{
            offset: '100%',
            symbol: L.Symbol.arrowHead({
                offset: 20,
                iconSize: 3,
                polygon: false,
                pathOptions: {
                    stroke: true,
                    color: color,
                    weight: 3
                }
            })
        }]
    }).addTo(elements);

    polyline.on('click', onClick);
}

【问题讨论】：

标签： leaflet polyline arrows

【解决方案1】：

我找到了解决办法：

var map = L.map('map');

**var arrowSize = 30;**

L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);

elements = L.layerGroup().addTo(map);

map.on('zoomend', function() {
        var currentZoom = map.getZoom();

        **arrowSize = 30/((20 - currentZoom )*2);**

        elements.clearLayers();
    });

function addLine(map, iniCoord, endCoord, desc, color, onClick) {
    var polyline = L.polyline([coordIni, coordFim], {
        color: color,
        offset: 0,
        weight: 1.5
    });

    polyline.addTo(elements);

    L.polylineDecorator(polyline, {
        patterns: [{
            offset: '100%',
            symbol: L.Symbol.arrowHead({
                offset: 20,
                **pixelSize: arrowSize,**
                polygon: false,
                pathOptions: {
                    stroke: true,
                    color: color,
                }
            })
        }]
    }).addTo(elements);
    polyline.on('click', onClick);
}

【讨论】：