leaflet 中 geojson的坐标xy与polyline,polygon,rectangle,circle等元素的坐标xy颠倒的情况总结

acoolgiser

发布于 2019-01-17 10:33:34

1.9K0

发布于 2019-01-17 10:33:34

在leaflet绘制地图要素时，在CRS.Simple坐标系中，存在(x,y)坐标顺序颠倒为（y,x）的情况：

geojson 数据格式：

{
    "type": "FeatureCollection",
    "name": "pm1-1",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [{
            "type": "Feature",
            "properties": {
                "id": 22,
                "featureName": "主",
                "stroke": false,
                "opacity": 0.5,
                "fillOpacity": 1.0,
                "color": "#333",
                "strokeWidth": 0.01,
                "fillColor": "grey"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [2902.459300397822062, 268.340840104235099],
                            [2902.459300397822062, 260.817506376886911],
                            [2909.91029437779207, 260.889846124265262],
                            [3341.484706002808252, 273.343585758868812],
                            [3426.478257629610198, 273.313067427943679],
                            [3456.498122483073075, 263.323400438414296],
                            [3462.205050366093474, 263.3132276614391],
                            [3462.205050366093474, 278.979304203063634],
                            [3453.578535491225011, 280.200037440073345],
                            [3430.201494002489198, 295.845768427747657],
                            [3422.765194033705029, 295.835595650772575],
                            [3235.291087159939707, 370.788616403168248],
                            [3195.668463246498504, 370.69822159760605],
                            [3090.023831955786136, 328.35796364010605],
                            [3082.394249224475516, 328.296926978255556],
                            [2902.459300397822062, 268.340840104235099]
                        ]
                    ]
                ]
            }
        },{
            "type": "Feature",
            "properties": {
                "id": 121,
                "featureName": "体",
                "stroke": false,
                "opacity": 0.7,
                "fillOpacity": 1,
                "color": "#eee",
                "strokeWidth": 0.01,
                "fillColor": "#444"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [3260.330537207918951, 360.791775726079209],
                            [3301.437284319264563, 360.831801770004461],
                            [3321.49033232587044, 368.816997533114034],
                            [3325.422891141537093, 368.837010555076404],
                            [3422.777487292863952, 295.832008062963894],
                            [3260.330537207918951, 360.791775726079209]
                        ]
                    ]
                ]
            }
        }
    ]
}

这里面的每一个点的坐标与下面的：

1. polygon：

// create a red polygon from an array of LatLng points
var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polygon
map.fitBounds(polygon.getBounds());

2. polyline：

var latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polyline
map.fitBounds(polyline.getBounds());

3. rectangle：

// define rectangle geographical bounds
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
// zoom the map to the rectangle bounds
map.fitBounds(bounds);

坐标x,y颠倒顺序，即[x, y]变成[y, x]。

意味着如果在同一个坐标系中这两种数据都存在，需要考虑颠倒顺序才能正常显示。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018年12月05日，如有侵权请联系 cloudcommunity@tencent.com 删除

geojson