-
I am trying to display some pre-defined polygons on OpenLayers map. OpenLayers code// Import OpenLayers
import Map from 'ol/Map';
import View from 'ol/View';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {OSM, Vector as VectorSource} from 'ol/source';
import Polygon from 'ol/geom/Polygon';
import Feature from 'ol/Feature';
import {fromLonLat, toLonLat} from 'ol/proj';
// An example how my polygon looks like
let poly = {
"geometry": {
"disposed": false,
"pendingRemovals_": null,
"dispatching_": null,
"listeners_": {
"change": [
null
]
},
"revision_": 2,
"ol_uid": "1052",
"values_": null,
"extent_": [
165123.8742368748,
7575687.985418316,
990406.8027610166,
8337355.480032606
],
"extentRevision_": 2,
"simplifiedGeometryMaxMinSquaredTolerance": 0,
"simplifiedGeometryRevision": 0,
"layout": "XY",
"stride": 2,
"ends_": [
30
],
"flatInteriorPointRevision_": -1,
"flatInteriorPoint_": null,
"maxDelta_": -1,
"maxDeltaRevision_": -1,
"orientedRevision_": -1,
"orientedFlatCoordinates_": null,
"flatCoordinates": [
165123.8742368748,
8058194.798106767,
190541.8988476502,
8243332.77467022,
219088.74212551414,
8337355.480032606,
461505.4384724312,
8330723.247582969,
496156.1147971025,
8089901.4970778795,
696078.6551876899,
7900594.4475725405,
990406.8027610166,
7904937.674717132,
989444.7035610497,
7903864.868498758,
941577.322519942,
7887564.972623208,
888700.5643931371,
7862663.144423331,
560308.0665529618,
7677112.88588447,
361788.34507816465,
7575687.985418316,
290914.8988332394,
7677786.773959787,
218742.7994087826,
7947387.422397496,
165123.8742368748,
8058194.798106767
]
},
"fid": 45,
"code_color": "#ed91db",
"ol_color": "#1f78b4"
}
// Convert flatCoordinates from EPSG:3857 to EPSG:4326
let flatCoordinatesLonLat = [];
for (let i = 0; i < poly.geometry.flatCoordinates.length; i += 2) {
let lonLat = toLonLat([poly.geometry.flatCoordinates[i], poly.geometry.flatCoordinates[i + 1]]);
flatCoordinatesLonLat.push(lonLat[0], lonLat[1]);
}
// Create a polygon from the flatCoordinates
let polygon = new Polygon([flatCoordinatesLonLat]);
// Create a feature with the polygon
let feature = new Feature(polygon);
// Create a vector source and add the feature to it
let vectorSource = new VectorSource({
features: [feature]
});
// Create a vector layer from the vector source
let vectorLayer = new VectorLayer({
source: vectorSource
});
// Create a map
let map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
}),
vectorLayer
],
view: new View({
center: fromLonLat([12.56, 55.67]),
zoom: 12,
maxZoom: 20,
}),
controls: defaultControls().extend([scaleLineControl]),
}); There were no errors, but my polygon was not displayed on the map. I really appreciate if someone could show me my errors, thank you! |
Beta Was this translation helpful? Give feedback.
Answered by
ahocevar
Apr 11, 2024
Replies: 1 comment
-
You should not be converting the coordinates to EPSG:4326. The Vector source expects them in EPSG:3857 (or whatever your map view's projection is). |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
nmcdtu
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You should not be converting the coordinates to EPSG:4326. The Vector source expects them in EPSG:3857 (or whatever your map view's projection is).