在 Leaflet 网络地图中的 OpenStreetMap 图层上加载 GeoJSON 图层

Question

我正在构建一个 Leaflet web 地图，我使用 OpenStreetMap 作为基础层。

我有一个地块的 .shp 文件，我使用 QGIS 将其转换为 GeoJSON。

我还能够获得在 Leaflet 中正确显示基础图层的 web 地图。

我将免除所有标头代码注入，因为它是标准的，但我一直在尝试在我的基础地图上加载 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>

Answer 1

这是一个简单的解决方案，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);
});