Leaflet - интеграция geo JSON (Создание кнопок из Geo JSON) - PullRequest
Новая
       14

Leaflet - интеграция geo JSON (Создание кнопок из Geo JSON)

0 голосов
/ 21 февраля 2020

(Не для HW) Привет, я запускаю следующий код и не могу понять, почему мои кнопки не создаются. Вместо того, где кнопки должны быть, есть фрагменты кода. Я добавил функцию javascript для создания кнопок для каждой функции в Geo JSON, но похоже, что кнопка работает неправильно. Любая помощь будет отличной. Мой вопрос касается конкретно строк кода, начинающихся с var = geoJSONLayer new. Слой geo JSON существует в той же папке, что и файл index 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>

1 Ответ

0 голосов
/ 21 февраля 2020

Sr c ссылка на листовку . ajax. js не работает. Вы должны связать его с рабочей ссылкой.

Заменить этот тег 

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

этим: 

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