2016-04-27 3 views
0

я использую листовку рисовать 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); 
    }); 

Теперь я хочу, чтобы изменить свою иконку маркеров в зависимости от уровня масштабирования. В моем предыдущем коде есть что-то не так. Что мне делать? Если маркер CircleMaker, то для меня это легко сделать с помощью функции setRadius. Но в этом случае маркер - это пользовательский значок, я пробовал, как указано выше, и не смог. Как это исправить?

ответ

1

У вас есть опечатка: масштаб изображения должен быть zoomend

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

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

Кроме того, я хотел бы создать и сохранить иконки из zoomend обратного вызова.

Как бы то ни было, ваш код создает значок при каждом изменении масштаба.

+0

я намереваюсь для создания нового значка при каждом масштабировании, потому что для меня не существует функция 'setSize', чтобы изменить ее размер. – necroface

+0

Проблема в вашем коде - увеличенная опечатка. Вы пытались исправить это? – YaFred

+0

@YaFred, я использовал ваш код, но ничего не изменилось. У меня все еще есть поведение по умолчанию для увеличения. – nermiiine

0

Как сказал YaFred, были некоторые опечатки, как zoomend, но и mymap.getZoom, которые должны быть mymap.getZoom()

Я сделал новый ответ на этот старый вопрос, чтобы предложить более эффективное решение. Вы можете добавить className к своим значкам (см. leaflet documentation). Это означает, что мы можем редактировать высоту и ширину значка через css! В вашей zoomend функции, вместо того, чтобы создать новую иконку, просто вызовите эту JQuery:

var newzoom = '' + (2*(mymap.getZoom())) +'px'; 
$('#mapid .YourClassName').css({'width':newzoom,'height':newzoom}); 

Для большего количества маркеров, это позволит значительно повысить производительность, как указано в этом StackOverflow вопрос: Leaflet custom icon resize on zoom. Performance icon vs divicon

Смежные вопросы