Есть ли способ создать событие при нажатии, которое загружает данные, хранящиеся локально - PullRequest
Новая
       308

Есть ли способ создать событие при нажатии, которое загружает данные, хранящиеся локально

0 голосов
/ 19 апреля 2019

Я работаю над листовой картой, которая позволит пользователю щелкнуть по области на карте и загрузить соответствующие данные о реках, основанные на области щелчка, однако я борюсь за функциональность загрузки.Я включил мой текущий код и изображение вывода кода.Как сделать так, чтобы скрипт загружал файл в зависимости от того, на какую плитку (см. Изображение ниже) нажимает пользователь?В идеале я хотел бы использовать тег загрузки или иметь событие JavaScript при нажатии, чтобы при каждом щелчке плитки загружались соответствующие данные. 

<!DOCTYPE html>
<html>
<head>
    <title>GRWL test</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
        <style>
            #mapid {
                height: 1920px;
                width: 1080px;
            }
        </style>

        <script src="leaflet-src.js"></script>
        <script type="text/javascript" src="../dist/leaflet.ajax.js"></script>
        <script src="spin.js"></script>
        <script src="leaflet.spin.js"></script>

    </head>
    <body>
    <div id="mapid"></div>
      <script>

        var map = L.map('mapid').setView([0.478320099108, -79.381377894799996], 14);
            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: 'mapbox.streets',
                    accessToken: 'pk.eyJ1IjoiamltbXlzd2lzaGVyIiwiYSI6ImNqc29vYW02ejAxYjI0YW94NnBlcDhpYWEifQ.6DiOztwTzMJu3eBEyHHfrw'
            }).addTo(map);

        function popUp(f,l){
            var out = [];
            if (f.properties){
                for(key in f.properties){
                    out.push(key+": "+f.properties[key]);
                }
                l.bindPopup(out.join("<br />"));
                var anchor = document.createElement('a');
                anchor.href = "C:\leaflet\leaflet-ajax-gh-pages\example\NA17.geojson";
                anchor.target = '_blank';
                anchor.download = "NA17.geojson";
                anchor.click();
            }
        }
        var jsonTest = new L.GeoJSON.AJAX(["tiles.geojson"],{onEachFeature:popUp}).addTo(map);
</script>
    </body>
</html>

Вывод кода создает систему сетки на карте:

Ответы [ 2 ]

0 голосов
/ 19 апреля 2019

Похоже, что вы после Layer.click событие , которое:

Запускается, когда пользователь щелкает (или нажимает) слой.

Поскольку leaflet-ajax плагин расширяет L.GeoJSON объект , вы можете зарегистрировать событие click для слоя : 

function onEachFeature(feature, layer) {
    layer.on({
      click: downloadContent
    });
  }

где 

new L.GeoJSON.AJAX(
  [
      "https://raw.githubusercontent.com/calvinmetcalf/leaflet-ajax/gh-pages/example/counties.geojson"
    ],
    { onEachFeature: onEachFeature }
).addTo(map);

Затем, когда пользователь щелкает (или нажимает) слой, связанный с ним объект GeoJSON может быть загружен следующим образом: 

function downloadContent(event) {
    var fileName = event.target.feature.properties.COUNTY + ".json";
    var featureJson = event.target.feature;
    downloadJson(featureJson, fileName);
}

Пример 

var map = L.map("map").setView([42.2, -71], 8);
var url =        "https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ";
var options = {
        attribution:
          '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
};
L.tileLayer(url, options).addTo(map);

function downloadContent(event) {
        var fileName = event.target.feature.properties.COUNTY + '.json';
        var featureJson = event.target.feature;
        downloadJson(featureJson,fileName)
}

//from https://stackoverflow.com/a/30800715/1375553 
function downloadJson(json, fileName) {
        var data =
          "data:text/json;charset=utf-8," +
          encodeURIComponent(JSON.stringify(json));
        var link = document.createElement("a");
        link.setAttribute("href", data);
        link.setAttribute("download", fileName);
        document.body.appendChild(link); // required for firefox
        link.click();
        link.remove();
}

function onEachFeature(feature, layer) {
        layer.on({
          click: downloadContent
        });
      }
      new L.GeoJSON.AJAX(
        [
          "https://raw.githubusercontent.com/calvinmetcalf/leaflet-ajax/gh-pages/example/counties.geojson"
        ],
        { onEachFeature: onEachFeature }
).addTo(map);
#map {
   width: 960px;
   height: 550px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.js"></script>
<div id="map"></div>
0 голосов
/ 19 апреля 2019

Почему бы вам не попробовать функцию щелчка для карты.Вы можете начать отсюда, а затем узнать, что вы нажали с ответом на щелчок.Например, вы можете проверить широту и сравнить ее с массивом, чтобы увидеть, нажали ли вы на какую-то часть карты, на которой был какой-то загружаемый элемент.Оттуда его легко скачать. 

map.on('click', function(e) {
    alert(e.latlng);
    console.log(e);
    // download something
    /* if(something == something){
          e.preventDefault(); 
          window.location.href = 'downloadMe/riverData.doc';
       }
    */
} );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...