leaflet 中 geojson的座標xy與polyline,polygon,rectangle,circle等元素的座標xy顛倒的情況總結
阿新 • • 發佈:2018-12-22
在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]。
意味著如果在同一個座標系中這兩種資料都存在,需要考慮顛倒順序才能正常顯示。