时间戳

首页 > 解决方案 > 如何在缩放时反转传单折线箭头自动调整大小？

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

问题描述

我希望我的传单折线箭头在放大时增加它的大小并在缩小时减小它。但按照它的模式，发生的事情恰恰相反。有办法扭转它吗？这里有一个完整的例子：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);
}

标签： leafletpolylinearrows

解决方案

我找到了解决方案：

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);
}

推荐阅读