Загрузка слоя GeoJSON поверх слоя OpenStreetMap на веб-карте Leaflet - PullRequest
Новая
       26

Загрузка слоя GeoJSON поверх слоя OpenStreetMap на веб-карте Leaflet

0 голосов
/ 31 октября 2018

Я создаю веб-карту Leaflet и использую OpenStreetMap в качестве базового слоя.

У меня есть файл .shp земельных участков, который я преобразовал в GeoJSON с помощью QGIS.

Мне также удалось получить веб-карту с корректным отображением базового слоя в Leaflet.

Я избавлю вас от всех инъекций кода заголовка, как это стандартно, но я застрял, пытаясь загрузить слой GeoJSON поверх моей базовой карты. Я впервые делаю что-нибудь с Leaflet, и я довольно заблудился.

Как я могу отобразить (удаленно размещенный) слой GeoJSON? И, в идеале, как я могу довести его до 30% непрозрачности при наложении?

Вот код, который у меня есть: 

<div id="mapid" style="width: 75%; height: 600px;"></div>
<script>

    var mymap = L.map('mapid').setView([31.807, -99.040], 50);

  // loading GeoJSON file - Here my html and usa_adm.geojson file resides in same folder
$.getJSON("https://www.mywebsite.com/testing/testmap1.geojson",function(data){
// L.geoJson function is used to parse geojson file and load on to map
L.geoJson(data).addTo(mymap);
});

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eythisisthekey', {
        maxZoom: 13,
        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>',
        id: 'mapbox.streets'
    }).addTo(mymap);

</script>

1 Ответ

0 голосов
/ 31 октября 2018

Вот простое решение с L.geoJson и onEachFeature https://leafletjs.com/examples/geojson/

var myGeojson; // Your layer will be stored here
$.getJSON("https://www.mywebsite.com/testing/testmap1.geojson",function(data){
    myGeojson = L.geoJson(data, {
        onEachFeature: function (feature, layer) {
            // Loop inside each features of your geojson file
            layer.name = 'If you want to add a custom name';
            //creation of the popup
            var popup = L.popup().setContent('Your popup content');
            layer.bindPopup(popup);

            // Set default layer style
            layer.setStyle({
                fillColor: black,
                opacity: 1,
                fillOpacity: 1,
                color: black,
            });

            // When layer hovered
            layer.on('mouseover', function () {
                layer.setStyle({
                    opacity: 0.3,
                    fillOpacity: 0.3,
                });
            });

            // Then when your mouse is out change back
            layer.on('mouseout', function () {
                layer.setStyle({
                    opacity: 1,
                    fillOpacity: 1,
                });
            });
        }
    });
    // If you want to add a custom property/name
    myGeojson['layer_name'] = 'Custom name';
    // Add to your map
    myGeojson.addTo(mymap);
});
...