Question

我正在制作一份传单地图，该地图将允许用户单击地图上的某个区域，并根据单击的区域下载相应的河流数据，但是在下载功能方面却步履维艰。我已经包括了我当前的代码和代码输出的图像。我如何让脚本根据用户单击的图块（请参见下图）下载文件？理想情况下，我想使用download标签或有一个on click 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>

代码输出，在地图上创建一个网格系统：

Answer 1

为什么不尝试点击地图功能。您可以从这里开始，然后根据点击的响应找出点击的内容。例如，您可以检查经纬度并将其与数组比较，以查看是否单击了地图上具有可下载项的某些部分。从那里可以轻松下载。

map.on('click', function(e) {
    alert(e.latlng);
    console.log(e);
    // download something
    /* if(something == something){
          e.preventDefault(); 
          window.location.href = 'downloadMe/riverData.doc';
       }
    */
} );

Answer 2

您似乎在Layer.click event之后，

在用户点击（或点击）图层时触发。

由于leaflet-ajax plugin 扩展了 L.GeoJSON object，因此您可以考虑为layer注册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>

有没有一种方法可以创建点击事件，该事件可以下载本地存储的数据

2 个答案: