Question

我使用Leaflet绘制OpenStreetMap并使用自定义图标标记

附加它

var mymap = L.map('mapid').setView([x, y], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        maxZoom: 18,
        id: ID,
        accessToken: accessToken
    }).addTo(mymap);

    var busIcon = new L.Icon({
        iconUrl: 'images/marker/bus.png',
        // shadowUrl: 'images/leaflet/marker-shadow.png',
        iconSize: [12, 12],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        // shadowSize: [41, 41]
    });

    var marker = L.marker([x, y],{icon:busIcon}).addTo(mymap);

    mymap.on('zoomed', function() {
        var currentZoom = mymap.getZoom();
        busIcon = new L.Icon({
            iconUrl: 'images/marker/bus.png',
            iconSize: [mymap.getZoom*2, mymap.getZoom*2],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
        });
        marker.setIcon(busIcon);
    });

现在我想根据缩放级别调整标记图标的大小。我上面的代码有问题。我该怎么办？如果marker是CircleMaker，那么我可以轻松处理setRadius函数。但在这种情况下，标记是一个自定义图标，我尝试如上，但失败了。如何解决？

Answer 1

正如YaFred所说，有一些拼写错误，例如mymap.getZoom，但mymap.getZoom()也应该是className

我对这个老问题做了一个新答案，提出了一个更有效的解决方案。您可以在图标中添加zoomend（请参阅leaflet documentation）。这意味着我们可以通过CSS编辑图标的高度和宽度！在var newzoom = '' + (2*(mymap.getZoom())) +'px'; $('#mapid .YourClassName').css({'width':newzoom,'height':newzoom});函数中，只需调用此JQuery：

，而不是创建新图标

class test {
            let myDispatchGroup = DispatchGroup()

            func receive () {
                myDispatchGroup.enter()
                var inputBuffer = Array<UInt8>(repeating: 0, count: BUFFER_MAX);
                let bytesRead = self.inputStream.read(&inputBuffer, maxLength: BUFFER_MAX);
                if(bytesRead > 0){
                      let string = convertToString(byteArray: inputBuffer, length: bytesRead);
                      myDispatchGroup.leave()
                }
                 myDispatchGroup.notify(queue: DispatchQueue.main) {
                        // Call if previous is finished
                        CommandHandler.convert(string);
                }
             }

对于大量标记，这将显着提高您的性能，如此stackoverflow问题中所述： Leaflet custom icon resize on zoom. Performance icon vs divicon

Answer 2

你有一个错字：缩放应该是zoomend

map.on('zoomend', function() {
});

http://plnkr.co/edit/72ywrO8pgmmxLW6Y8mcL?p=preview

除此之外，我会创建并保持图标不受zoomend回调的影响。

实际上，每次缩放变化时，您的代码都会创建一个图标。

单张自定义标记图标缩放以缩放

2 个答案: