Leaflet.js динамические несколько карт на одной странице - PullRequest
Новая
       16

Leaflet.js динамические несколько карт на одной странице

2 голосов
/ 27 мая 2019

Я создаю веб-приложение, в котором пользователь может загрузить свои собственные карты, а затем они отображаются с помощью Leaflet.js на навигационных вкладках Bootstrap. Это в приложении Python Flask.

Я получил его на работу, хотя используются только одни настройки карт для границ и т. Д. Так, скажем, если бы у меня была карта Вестероса и Средиземья, границы, рассчитанные для карты Средиземья, также использовались бы для карты Вестероса.

Вот мой код: 

$(document).ready(function(){
    {% for map_file in map_list %}
        var img = new Image();
        img.onload = function(){
            var h = img.height;
            var w = img.width;

            var map = L.map('{{ map_file[1] }}', {
                minZoom: 1,
                maxZoom: 5,
                center: [0,0],
                zoom:1,
                crs: L.CRS.Simple,
            });

            var southWest = map.unproject([0,h], map.getMaxZoom() -1);
            var northEast = map.unproject([w,0], map.getMaxZoom() -1);
            var bounds = new L.LatLngBounds(southWest, northEast);
            {% set map_img_dir = '/static/users/'+user+'/maps/'+map_file[0] %}
            var image = L.imageOverlay('{{ map_img_dir }}', bounds).addTo(map);
            map.setMaxBounds(bounds);
        }
        {% set map_img = 'users/'+user+'/maps/'+map_file[0] %}
        img.src = "{{ url_for('static', filename=map_img) }}"
    {% endfor %}
});

(небольшая заметка для контекста, map_list - это 2D список файлов с их расширениями и без них, например, ['middle_earth.jpg','middle_earth'])

Я приписал эту проблему map. Я понимаю, что с несколькими картами, которые я видел, используют разные переменные карты для каждой карты, однако, поскольку карты создаются динамически, и я не уверен в том, сколько карт будет, я не уверен, как я смогу реализовать это. .

Я ценю любую помощь / совет.

РЕДАКТИРОВАТЬ: Я решил это, используя {{ map_file[1] }} в качестве имени переменной вместо img, поэтому имена переменных будут примерно такими, как middle_earth или westeros. Другая проблема заключается в том, что при использовании колеса прокрутки масштабирование не анимируется, оно очень блочное и идет довольно быстро?

1 Ответ

0 голосов
/ 27 мая 2019

Я решил это, используя {{ map_file[1] }} вместо имени img. Кроме того, я добавил это, показано здесь : 

{% set map_tab_id = map_file[1]+'-tab-id' %}
$("a[href='#{{ map_tab_id }}']").on('shown.bs.tab', function(e) {
    map.invalidateSize();
});

После map.setMaxBounds(bounds);, которое решило блочный / не анимированный зум.

Для полноты, это панели вкладок карты, которые находятся внутри цикла jinja for: 

<div class="tab-pane fade" id="{{ map_tab_id }}" >
    <div id="{{ map_file[1] }}" style="width:500px; height:500px;"></div>
</div>

Где map_tab_id - это просто map_file[1] (например, westeros или middle_earth) с '-tab-id' на конце.

...