Question

我正在创建一个Web应用程序，用户可以在其中上传自己的地图，然后将它们与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或{{ 1}}。 另一个问题是，当我使用滚轮时，缩放不会显示动画，它非常块状并且运行速度很快？

Answer 1

我通过使用{{ map_file[1] }}而不是名称img来解决它。此外，我还添加了shown here：

{% 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'的地方。

Leaflet.js在同一页面上动态绘制多个地图

1 个答案: