Как показать карты рядом? - PullRequest
Новая
       88

Как показать карты рядом?

0 голосов
/ 10 апреля 2020

У меня есть приложение flask, в котором я использую листовую карту со значениями, предлагаемыми https://aqicn.org/faq/2015-09-18/map-web-service-real-time-air-quality-tile-api/, для отображения pm2.5, индекса качества воздуха и других значений в соседней карте. До сих пор мне удалось отобразить все значения на слоях, и я не знаю, как заставить карту отображать все значения одновременно, как показано на рисунке: enter image description here

Пока у меня есть это: 

 <!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>

Код отображает следующее: Как показать все карты рядом?

enter image description here

1 Ответ

1 голос
/ 14 апреля 2020

Это работает. Вы можете играть с 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...