Jquery 使用json在传单地图中添加图像

我有一个json文件，每行包含文件名和边界框：

{ "type": "Feature", "properties": { "name": "images\/gis\/json_Andros1.png" }, "geometry": { "type" : "LineString", "coordinates": [[37.8416750531,24.7951207305],[37.8418346487,24.7954102608]] }  }

我通过以下方式访问该文件：

var raster_group = new L.featureGroup([]);
$.getJSON($('link[id="rasters_geojson"]').attr("href"), function(data) { 
    var geojson = L.geoJson(data, {  
        onEachFeature: function (feature, layer) {
            var rasterfilename = (String(feature.properties['name']));
            var rastercoordinates = L.GeoJSON.coordsToLatLngs(feature.geometry['coordinates'],0);
            alert(rasterfilename); alert(rastercoordinates);
            layer = new L.imageOverlay(rasterfilename, rastercoordinates); 
            return layer;
        }
    });
    geojson.addTo(raster_group);
});

错误为NS\u错误\u不可用：

还有一个问题。如何仅加载地图边界框内的图像？

您的行 var rastercoordinates=coordsToLatLngsfeature.properties['geometry']，0； 缺少该方法的类。 应该是这样的 var rastercoordinates=L.GeoJSON.coordsToLatLngsfeature.properties['geometry']，0；

---

我非常感谢斯克希斯的帮助。但事实证明情况更为复杂

首先，我遇到了一个问题，那就是将从json读取的坐标颠倒过来。然后我遇到了不同类型的对象的问题，这些对象将传单本身的错误转化为太多的递归、未定义的变量等

但以下代码有效，因此我将其上传给其他人使用：

mapinitialbounds = map.getBounds();
var raster_group = new L.featureGroup([]);
    $.getJSON($('link[id="rasters_geojson"]').attr("href"), function(data) { 
        var geojson = L.geoJson(data, {  
            onEachFeature: function (feature, layer) {
                var rasterfilename = (String(feature.properties['name']));
                var rastercoordinates = [feature.geometry['coordinates'][0],feature.geometry['coordinates'][1]];
                var line = new L.polyline(rastercoordinates);
                if (mapinitialbounds.contains(line.getBounds())) { 
                    layer = new L.imageOverlay(rasterfilename, rastercoordinates); 
                    layer.addTo(raster_group);
                }
                return layer;
            }
        });
    });
    map.addLayer(raster_group);

---

我发现需要创建一条多段线来获得不必要的复杂边界。你认为上面的代码可以简化吗？

最终这张地图上会有数百个光栅图像，因此我必须找到一种方法，只加载视图所需的光栅图像。谢谢，但光栅仍然没有加载。看起来onEachFeature根本没有运行。你能把它放在一个演示站点上，这样我们就可以看到它的运行吗？在中，你可以看到项目，但图像是隐式加载的。我想要的是在加载页面时仅加载地图中JSON中的光栅图像。若要仅在当前地图视口中加载图像，请使用contains。。它适用于LatLngBounds。var-bounds=map.getBounds；如果bounds.containsMasterCoordinates{show image}-文档位于