如何并排显示地图？

Question

我有一个烧瓶应用程序，我在其中使用带有 https://aqicn.org/faq/2015-09-18/map-web-service-real-time-air-quality-tile-api/ 提供的值的传单地图，并排显示 pm2.5、空气质量指数和其他值。到目前为止，我已经设法在图层上显示所有值，但我不知道如何让地图同时显示所有值，如图所示：

到目前为止我有这个：

 <!DOCTYPE html>
<html>
{% extends "menu.html" %}
<head>

    <title>{% block title %}Map{% endblock %}</title>

    <meta charset="utf-8"/>

    {% block dependencies %}
        <style>
            html {
                height: 100%
            }

            body {
                height: 100%;
                margin: 0;
            }


            #map {
                height: 800px;

            }


        </style>
    {% endblock %}

</head>
<body>
{% block content %}
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css"/>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
    <div id='map' class="a"></div>

    <script>
        var mbUrl_aqi = 'https://tiles.aqicn.org/tiles/usepa-' + 'aqi' + '/{z}/{x}/{y}.png?token=?';
        var mbUrl_pm25 = 'https://tiles.aqicn.org/tiles/usepa-' + 'pm25' + '/{z}/{x}/{y}.png?token=?';
        var mbUrl_pm10 = 'https://tiles.aqicn.org/tiles/usepa-' + 'pm10' + '/{z}/{x}/{y}.png?token=?';
        var mbUrl_o3 = 'https://tiles.aqicn.org/tiles/usepa-' + 'o3' + '/{z}/{x}/{y}.png?token=?';
        var mbUrl_no2 = 'https://tiles.aqicn.org/tiles/usepa-' + 'no2' + '/{z}/{x}/{y}.png?token=?';
        var mbUrl_so2 = 'https://tiles.aqicn.org/tiles/usepa-' + 'so2' + '/{z}/{x}/{y}.png?token=?';
        var mbUrl_co = 'https://tiles.aqicn.org/tiles/usepa-' + 'co' + '/{z}/{x}/{y}.png?token=?';
        var aqi = L.tileLayer(mbUrl_aqi);
        var pm25 = L.tileLayer(mbUrl_pm25);
        var pm10 = L.tileLayer(mbUrl_pm10);
        var o3 = L.tileLayer(mbUrl_o3);
        var no2 = L.tileLayer(mbUrl_no2);
        var so2 = L.tileLayer(mbUrl_so2);
        var co = L.tileLayer(mbUrl_co);
        var map = L.map('map', {
            center: [45.657974, 25.601198],
            zoom: 11,
            layers: [aqi]
        });

        var baseLayers = {
            "aqi": aqi,
            "pm25": pm25,
            "pm10": pm10,
            "no2": no2,
            "so2": so2,
            "co": co,
            "o3": o3
        };

        {#    resize #}
        document.getElementById("map").style.resize = "both";
        var WAQI_ATTR = '&copy;  <a  href="http://waqi.info">waqi.info</a>';

        var credits_url = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var credits_attrib = '&copy;  <a  href="http://openstreetmap.org/copyright">OpenStreetMap</a>';
        var osmLayer = L.tileLayer(credits_url, {attribution: [credits_attrib, WAQI_ATTR]});
        map.addLayer(osmLayer);
        L.control.layers(baseLayers).addTo(map);

    </script>
{% endblock %}
</body>
</html>

代码显示如下：如何并排显示所有地图？

Answer 1

这行得通。您可以使用 CSS 或 DOM 来更改地图的显示，但是您可以使用一些东西（另外，您可以改进代码，因为有重复，重复永远不会好） .

$( document ).ready(function() {
  var layerTypes = ['aqi', 'pm25', 'pm10', 'o3', 'no2', 'so2', 'co']
  var maps = []
  layerTypes.forEach(function(layer){
    var t = document.createElement('div');
    t.setAttribute("id", "map_"+layer);
    t.setAttribute("class", "map");
    document.getElementById("maps").appendChild(t);
    var m = L.tileLayer('https://tiles.aqicn.org/tiles/usepa-' + layer + '/{z}/{x}/{y}.png?token=?');
    var map = L.map('map_'+layer, {
      center: [45.657974, 25.601198],
      zoom: 11,
      layers: [m]
    });

    map.on("zoomend", function (e) {
      var zoom = map.getZoom();
      var center = map.getCenter();
      maps.forEach(function(everyMap){
        everyMap.setView(center, zoom);
      })
    });
    map.on("moveend", function (e) {
      var zoom = map.getZoom();
      var center = map.getCenter();
      maps.forEach(function(everyMap){
        everyMap.setView(center, zoom);
      })
    });

    var baseLayers = {};
    baseLayers[layer] = m,
    document.getElementById("map_"+layer).style.resize = "both";
    var WAQI_ATTR = '&copy;  <a  href="http://waqi.info">waqi.info</a>';

    var credits_url = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var credits_attrib = '&copy;  <a  href="http://openstreetmap.org/copyright">OpenStreetMap</a>';
    var osmLayer = L.tileLayer(credits_url, {attribution: [credits_attrib, WAQI_ATTR]});
    map.addLayer(osmLayer);
    L.control.layers(baseLayers).addTo(map);
    maps.push(map)
  });

});

    html {
        height: 100%
    }

    body {
        height: 100%;
        margin: 0;
    }


    .map {
        height: 200px;
 width: 200px;

    }

<link href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" rel="stylesheet"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maps"></div>

如何并排显示地图？

How to show maps side by side?

javascript

dictionary

layer

flask

leaflet