Leaflet - geoJSON 集成（从 GeoJSON 创建按钮）答案

【问题标题】：Leaflet - geoJSON integration (Creating buttons from GeoJSON)Leaflet - geoJSON 集成（从 GeoJSON 创建按钮）
【发布时间】：2020-02-22 03:38:32
【问题描述】：

（不适用于硬件）您好，我正在运行以下代码，但无法弄清楚为什么我的按钮无法创建。而不是按钮应该在哪里，而是代码的sn-ps。我添加了一个 javascript 函数来为 GeoJSON 中的每个功能创建按钮，但看起来按钮无法正常工作。任何帮助都会很棒。我的问题专门指从 var = geoJSONLayer new 开始的代码行。 geoJSON 层与索引 HTML 文件位于同一文件夹中。标记出现，但无法创建按钮。下面的草皮功能也不起作用。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>First Map</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="leaflet-ajax-gh-pages/dist/leaflet.ajax.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
        <style>
            #header {
                height: 75px;
                background-color: honeydew;
            }
            #mapdiv {
                height: 850px;
                background-color: gainsboro;
            }
            #side_panel {
                height: 850px;
                background-color: powderblue;
            }
            #footer {
                height: 90px;
                background-color: wheat;
            }
            .attraction{
                margin-bottom: 5px;
                background-color: azure;
            }
        </style>
    </head>
    <body>
        <div id="header" class="col-md-12">
            <hl class="text center">Mexico City</hl>
        </div>
        <div id="side_panel" class="col-md-3">
            <hl class="text center">Attractions</hl>
            <button id="zoomToZocalo" class="form-control btn-primary">Zocalo</button>
            <button id="btnBuffer" class="form-control btn-warning">Buffer</button>
        </div>
        <div id="mapdiv" class="col-md-9"></div>
        <div id="footer" class="col-md-12">
            <h4 id="map_coords" class="text-center">Latitude: 19.4 longitude: -99.1 Zoom Level: 11</h4>
            <h4 class="text-center">&copy;2016 <a href="http://millermountain.com">Miller Mountain LLC</a></h4>
        </div>
        
        <script>
            var mymap = L.map("mapdiv")
            mymap.setView([19.4, -99.1], 12);
            
            var backgroundLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png");
            mymap.addLayer(backgroundLayer);
            
//          var zocaloMarker = L.marker([19.43278, -99.13333]).addTo(mymap).bindPopup("<h3 class='text-center '>Zocalo</h3><a href='https://momento360.com/e/u/f427867d9e6a456a98d614d7e9f5c1ab?utm_campaign=embed&utm_source=other&utm_medium=other&heading=78.71035983306334&pitch=-41.283278407523014&field-of-view=75' target='blank'><img src='https://marriott-hotels.marriott.com/wp-content/uploads/sites/9/2019/08/Marriott_Logo.png' width='100px'></a>");
                        
            $("#zoomToZocalo").click(function(){
                mymap.setView([19.43278, -99.13333], 17);
            });
            
            var geojsonLayer = new L.GeoJSON.AJAX('GeoJSON/attractions.geojson', {pointToLayer: function(feature, latlng) {
                var string = "<button id = 'zoomTo"+feature.properties.name.replace(/ /g, '');
                str += "' class='form-control btn btn-primary attraction'>";
                str += feature.properties.name+"</button>";
                $("#side_panel").append(str);
                
                $("zoomTo"+feature.properties.name.replace(/ /g, '')).click(function(e){
                    mymap.setView([latlng.lat, latlng.lng], 17);
                });
                
                var str = "<h4>"+feature.properties.name+"</h4><hr>";
                str += "<a href='"+feature.properties.web+"' target='blank'>";
                str += "img src='img/"+feature.properties.image+"' width='200px'>";
                str += "</a>";
                return L.marker(latlng).bindPopup(str); 
            }});
            
            geojsonLayer.addTo(mymap);
            
            var bufferLayer;
            $("#btnBuffer").click(function(){
                if ($("#btnBuffer").html()=='Buffer'){
                    var bufferedAttractions = turf.buffer(geojsonLayer.toGeoJSON(), 1, 'miles');
                    bufferLayer = L.geoJSON(bufferedAttractions).addTo(mymap);
                    $("#btnBuffer").html("Remove Buffer");
                } else {
                    mymap.removeLayer(bufferLayer);
                    $("#btnBuffer").html("Buffer");
                }
            });
            
            // 74-79 is a way to add an event handler to the map using a 'mousemove' event //----
            
            mymap.on('mousemove', function(e){var str = "Latitude:"+e.latlng.lat.toFixed(5)+" Longitude: "+e.latlng.lng.toFixed(5)+" Zoom Level: "+mymap.getZoom();
            $("#map_coords").html(str);           
            });
        </script>
    </body>

</html>

【问题讨论】：

标签： javascript html leaflet geojson

【解决方案1】：

到 leaflet.ajax.js 的 Src 链接已损坏。您必须将其链接到工作链接。

替换这个标签

<script src="leaflet-ajax-gh-pages/dist/leaflet.ajax.js"></script>

有了这个：

<script src="https://calvinmetcalf.github.io/leaflet-ajax/dist/leaflet.ajax.js"></script>

【讨论】：

感谢您的快速回复。我继续并更改了链接，由于某种原因它仍然不适合我。