I have a polygon in (longitude, latitude) points I'd like to draw:
var maxPoint = [36.283, -114.368];
var geoSquare = [ minPoint, [minPoint[0], maxPoint[1]], maxPoint, [maxPoint[0], minPoint[1]]];
var polygonFeature = new Feature(
new Polygon(geoSquare));
I am drawing a map in the following way:
var map = new Map({
interactions: defaultInteractions().extend([new Drag()]),
layers: [
new TileLayer({
source: new TileJSON({
url: 'https://maps.siemens.com/styles/osm-bright.json'
})
}),
new VectorLayer({
source: new VectorSource({
features: [polygonFeature]
}),
style: new Style({
stroke: new Stroke({
width: 3,
color: [255, 0, 0, 1]
}),
fill: new Fill({
color: [0, 0, 255, 0.6]
})
})
})
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});
This Polygon is near Southern California, but I don't see the square on the map at all. What is wrong??
EDIT
Here is a jsfiddle
Feature coordinates must be in LonLat format and must be transformed to the view projection. A polygon ring must start and end at the same point and a polygon needs an extra pair of []
as they can have addition internal rings (holes). Alternative you can create a polygon from an extent. Any of these would work.
var minPoint = [-121.091, 32.92];
var maxPoint = [-114.368, 36.283];
var geoSquare = [[minPoint, [minPoint[0], maxPoint[1]], maxPoint, [maxPoint[0], minPoint[1]], minPoint]];
var polygonFeature = new Feature(
new Polygon(geoSquare).transform('EPSG:4326','EPSG:3857'));
var minPoint = [-121.091, 32.92];
var maxPoint = [-114.368, 36.283];
var polygonFeature = new Feature(
Polygon.fromExtent(minPoint.concat(maxPoint)).transform('EPSG:4326','EPSG:3857'));
var minPoint = fromLonLat([-121.091, 32.92]);
var maxPoint = fromLonLat([-114.368, 36.283]);
var geoSquare = [[minPoint, [minPoint[0], maxPoint[1]], maxPoint, [maxPoint[0], minPoint[1]], minPoint]];
var polygonFeature = new Feature(
new Polygon(geoSquare));
var minPoint = fromLonLat([-121.091, 32.92]);
var maxPoint = fromLonLat([-114.368, 36.283]);
var polygonFeature = new Feature(
Polygon.fromExtent(minPoint.concat(maxPoint)));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.