Question

我正在构建Leaflet网络地图，并使用OpenStreetMap作为基础层。

我有一个.shp的地块，并已通过QGIS转换为GeoJSON。

我还能够获取Web地图，并在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>

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);
});

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

1 个答案: