传单地理JSON展示

Leaflet GeoJSON display

本文关键字：展示 JSON 单地理      更新时间：2023-11-26

>我遇到了一个任务，需要使用带有geojson的传单js库作为数据存储。几乎立即遇到以下问题：从geojson对象创建的多边形不会显示在地图上。而多边形，通过本地传单方法创建 - 完美工作。

这是我的代码：

        var map = new L.Map('map');
        var bingLayer = new L.BingLayer('AhVaalRWmmprMAMHj6lw18ALO-iVnIGzvkq7gYAX3U_bisCT8Q_lgGV25YOa0kiV', 'Aerial');
        map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(bingLayer);
        var polygon = {
            "type": "Feature",
            "properties": {
                    "style": {
                        "color": "#004070",
                        "weight": 4,
                        "opacity": 1
                    }
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [[
                    [51.509, -0.08],
                    [51.503, -0.06],
                    [51.51, -0.047],
                    [51.509, -0.08]
                ]]
            }
        };
        var geojsonLayer = new L.GeoJSON(polygon);
        map.addLayer(geojsonLayer);

如您所见，它几乎复制了传单提供的一个例子。并且不起作用。我完全被这个麻烦所困扰，并将非常感谢任何帮助。

问题是GeoJSON规范中，坐标应该以[lon, lat]的形式传递，而 Leaflet 对其对象使用 [lat, lon]。只需将其更改为 [-008, 51.509] 等，您应该没问题。:)

我只想补充一些我的观点-

只是一个令人困惑和矛盾的标准问题。

在谈论地理位置时，我们通常使用纬度。

map.setView以l.LatLong作为输入，其中第一个 cordinate 是 Latitude，第二个是 Longitude 。

示例 ：- 因此，当您想要52.23N, 4.97E时，您传入[52.23943, 4.97599]

GeoJSON 标准说，对于任何一点，第一个参数是X Coordinate (i.e. Longitude)，第二个参数是Y coordinate (i.e. Latitude);

因此，当您想51.505N, 0.09E GeoJSON时，您需要传递[-0.09, 51.505] 

var map = new L.Map('map');
var bingLayer = new L.BingLayer('AhVaalRWmmprMAMHj6lw18ALO-iVnIGzvkq7gYAX3U_bisCT8Q_lgGV25YOa0kiV', 'Aerial');
map.setView(new L.LatLng(-0.09, 51.505), 13).addLayer(bingLayer);
var polygon = {
    "type": "Feature",
        "properties": {
        "style": {
            "color": "#004070",
                "weight": 4,
                "opacity": 1
        }
    },
        "geometry": {
        "type": "Polygon",
            "coordinates": [
            [
                [51.509, -0.08],
                [51.503, -0.06],
                [51.51, -0.047],
                [51.509, -0.08]
            ]
        ]
    }
};
var geojsonLayer = new L.GeoJSON(polygon);
map.addLayer(geojsonLayer);

您可以通过修改此视图来调整视图。 

map.setView(new L.LatLng(-0.09, 51.505), 13).addLayer(bingLayer);

自

map.setView(new L.LatLng(-008, 51.509), 13).addLayer(bingLayer);

我认为这个解释会有所帮助！！欲了解更多信息，请单击此处

相关文章：