Question

我花了一整天时间试图弄清楚如何加载多个GeoJSON。最后通过早期的SE问题弄明白了。现在我不得不试图象征每个GeoJSON

当然，我想以不同的方式象征每个GeoJSON，但我真的不知道下一步该去哪里。旧代码（在底部）在单个图层上运行良好，但我不知道如何为单个geojsons修改它。

我希望我的代码不是太糟糕或不可读！

//blahblahblah, initial headers, etc

//load breweries GeoJSONs from external file
var breweries = new L.geoJson();
breweries.addTo(map);

$.ajax({
    dataType: "json",
    url: "breweries.geojson",
    success: function(data) {
        $(data.features).each(function(key, data) {
            breweries.addData(data);
        });
    }
}).error(function() {});

//load wineries GeoJSON from external file
var wineries = new L.geoJson();
wineries.addTo(map);

$.ajax({
    dataType: "json",
    url: "winetest.geojson",
    success: function(data) {
        $(data.features).each(function(key, data) {
            wineries.addData(data);
        });
    }
}).error(function() {});


//skip this intermediate stuff


//load Brewery GeoJSON from an external file
$.getJSON("breweries.geojson", function(data) {
    var pintGlass = L.icon({
        iconUrl: 'glass.png',
        iconSize: [24, 48]
    });

    var popupMarker = L.geoJson(data, {
        pointToLayer: function(feature, latlng) {
            var marker = L.marker(latlng, {
                icon: pintGlass
            });
            //popup shows NAME, ADDRESS, URL and opens the URL in a new window/tab
            marker.bindPopup("<strong>" + feature.properties.NAME + "</strong><br/>" + feature.properties.STREETNUM + " " + feature.properties.STREET + ", " + feature.properties.CITY + "<br/>" + "<a target = _blank href=" +
                feature.properties.URL + ">" + feature.properties.URLDISPLAY + "</a>");
            return marker;
        }
    });
});

Answer 1

首先，您可以将pintGlass图标定义移到$.getJSON回调函数之外，因为它不依赖于返回数据的值：

var pintGlass = L.icon({
  iconUrl: 'glass.png',
  iconSize: [24, 48]
});

然后，如果您想要访问L.geoJson回调函数之外的$.getJSON图层（例如，如果您稍后在构建图层控件时引用它），您还需要在$.getJSON之外定义第一个。实际上，您可以通过传递L.geoJson作为其第一个参数来创建一个空的false对象，同时仍然设置选项，这些选项将应用于您稍后添加到其中的任何数据：

var popupMarker = L.geoJson(false, {
    pointToLayer: function(feature, latlng) {
        var marker = L.marker(latlng, {
            icon: pintGlass
        });
        //popup shows NAME, ADDRESS, URL and opens the URL in a new window/tab
        marker.bindPopup("<strong>" + feature.properties.NAME + "</strong><br/>" + feature.properties.STREETNUM + " " + feature.properties.STREET + ", " + feature.properties.CITY + "<br/>" + "<a target = _blank href=" +
            feature.properties.URL + ">" + feature.properties.URLDISPLAY + "</a>");
        return marker;
    }
}).addTo(map);

然后，您的$.getJSON函数除了将数据添加到您的图层外，不必做任何事情：

$.getJSON("breweries.geojson", function(data) {
    popupMarker.addData(data);
});

现在复制和修改此代码以处理酿酒厂应该相对简单。假设您有一个名为grapes.png的图标，它将如下所示：

var wineIcon = L.icon({
  iconUrl: 'grapes.png',
  iconSize: [32, 32]
});

var wineMarker = L.geoJson(false, {
  pointToLayer: function(feature, latlng) {
    var marker = L.marker(latlng, {
      icon: wineIcon
    });
    //popup shows NAME, ADDRESS, URL and opens the URL in a new window/tab
    marker.bindPopup("<strong>" + feature.properties.NAME + "</strong><br/>" + feature.properties.STREETNUM + " " + feature.properties.STREET + ", " + feature.properties.CITY + "<br/>" + "<a target = _blank href=" +
      feature.properties.URL + ">" + feature.properties.URLDISPLAY + "</a>");
    return marker;
  }
}).addTo(map);

$.getJSON("winetest.geojson", function(data) {
  wineMarker.addData(data);
});

至于图层控件，这是一个单独的问题，但应该很容易通过查看layer control tutorial来回答。

这是一个示例小提琴，其中包含一些显示工作中的所有内容的虚拟数据：

http://jsfiddle.net/nathansnider/tuppLt0b/

另一个示例，其中L.geoJson将pointToLayer和onEachFeature划分为单独的函数：

http://jsfiddle.net/nathansnider/Lo8cmuvt/

（顺便提一下，代码开头的$.ajax例程是多余的，因为$.getJSON是一种完全相同的简写方法。）

加载多个GeoJSON，如何为每个

1 个答案: