I have my map object created like this:
new ol.Map({
...
view: new ol.View({
center: ol.proj.transform([15,49], 'EPSG:4326', 'EPSG:3857'),
zoom: 10,
minZoom: 7,
maxZoom: 18,
extent: ol.proj.transformExtent([11.8, 48.4, 19.2, 51.2], 'EPSG:4326', 'EPSG:3857')
})
});
Let's say I have a big polygon "A" ( see the picture below ). I have a smaller polygon "B", which sticks to one side of the polygon "A". An external system calculates polygon "B" coordinates using WGS coordinates - points "pt1" and "pt2" are positioned on connection between point "pt3" and "pt4". When I draw both polygon on my map, points "pt1" and "pt2" are not positioned on connection between point "pt3" and "pt4". I think, it's because OpenLayers connect points "pt3" and "pt4" by direct line. This connection is straight line on the globe, so on my map, it should be curve. And that's why, I think, the polygon "B" is not aligned with the polygon "A" although it is on the globe. Is there a way, how to fix this?
Related
I am new to OpenLayers and would appreciate any help I can get. How do you convert from pixel-based-coordinates to lat/lon? I'm using OL3 to view and draw features on a static image (6494 x 7687 jpg) using projection:
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: [0, 0, 6494, 7687]
});
At the end of a polygan draw I have this, which works fine:
draw.on('drawend', function (event) {
var coord = event.feature.getGeometry().getCoordinates();
console.log("YOU DREW A Polygon with coord="+coord);
});
Is there an easy way to convert the above pixel-based coordinates of the polygon to Lat/Lon coordinates? I do have the lat/lons of the four corners of the image.
Instead of specifying a custom pixel projection, configure your static image source with the imageExtent set to your corner coordinates, and set its projection to 'EPSG:4326':
new ol.source.ImageStatic({
// ...
imageExtent: [minLon, minLat, maxLon, maxLat],
projection: 'EPSG:4326'
})
If you want to show your image without being distorted, you have to configure your view with projection: 'EPSG:4326' as well. You'll then be working with geographic coordinates throughout.
Something similar is also shown in one of the official examples: http://openlayers.org/en/latest/examples/reprojection-image.html. The difference is that raster reprojection is used there, because image and view are in different projection.
The goal is to be able to zoom onto a high-res picture (11520x11520) that I have split into 256x256 squares. I took the large image and resized it to 80%, 60%, 40%, 20% and 8.89%. Then, for each of the images from 100% to 8.89%, I split them. It's to make an interactive video game map like this: http://www.ark-survival.net/en/dynamic-livemap/
I have tried this:
var map = new ol.Map({
target: 'ark_map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'images/map/{z}/map_{x}_{y}.png',
tileSize: 256,
maxZoom: 5
})
})
],
view: new ol.View({
center: [50, 50],
zoom: 5,
minZoom: 0
})
});
The result: I only see the top left corner on any zoom used. I've seen many examples and many questions, but combining static tiles and XYZ (on pixels) has never come up.
Here is the JS Fiddle.
How do you combine static tiles and XYZ coordinates based on a pixel system?
You have a very weird tile layout. What you describe maps to this set of resolutions:
var resolutions = [
45/4,
45/4/2*0.889,
45/4/4*0.889,
45/4/6*0.889,
45/4/8*0.889
];
With that, you can configure an ol.tilegrid.TileGrid:
new ol.tilegrid.TileGrid({
origin: [0, 11520],
resolutions: resolutions
})
See updated fiddle for the full code: https://jsfiddle.net/6moqu7q8/4/.
I just want to convert the default projection of an Openlayers 3.9.0 from the default EPSG:3857 to EPSG:4326.
So I edited a basic code like
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var center = [-1.812, 52.443];
var proj = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'm'
});
var view = new ol.View({
center: center,
zoom: 6,
projection:proj
});
var map = new ol.Map({
loadTilesWhileAnimating: false,
loadTilesWhileInteracting:false,
target: 'map',
layers: [layer],
view: view
});
If center is like var center = [-1.812, 52.443]; it does not go in the UK, as is should be, it goes in the center of the map.
If I do like var center = new ol.geom.Point(-1.812, 52.443); I see no map at all. What am I missing here?
Thanks
You have two issues:
You should not instantiate the EPSG:4326 projection by yourself, it's done by OpenLayers 3. You get the projection by calling ol.proj.get('EPSG:4326').
The ol.source.OSM source loads it's tiles from services that only support EPSG:3857. Since it's a XYZ-based tilesource, you might actually get the map working (if the tilecoords are valid), but the layer will not be positioned correctly and still be in EPSG:3857. You can use EPSG:4326 as the view projection, but then you have to use a background map that supports it.
A working demo can be found in the official examples.
OL does not currently transform tiles, but that is being worked.
https://github.com/openlayers/ol3/issues/3785
I create a text box where I can put the coordinates X,Y then I move the pin to the location and find which roads are there.
The pin move, but forEachFeatureAtPixel only return one feature instead of four. Also the feature I got doesn't have NOMBRE property
I'm using Openlayer 3 and my WMS server map.
As you can see in MapInfo (picture right side) I got all 4 features. Horizontal 2x "Calle 6" and Vertical 2x "Calle 1 Norte", and have NOMBRE property.
I'm using the same x, y from mapinfo where all 4 feature instersect.
new info: My layer is ol.layer.Tile instead of ol.layer.Vector, maybe that is the problem (checking)
wmsLyr09 = new ol.layer.Tile({
source: wmsSource
});
// move the pin to new position
geometry.translate(deltaX, deltaY);
var coordinate = geometry.getCoordinates();
var pixel = map.getPixelFromCoordinate(coordinate);
console.log('pixel: ' + pixel);
var allFeaturesAtPixel = [];
map.forEachFeatureAtPixel(pixel, function (feature) {
allFeaturesAtPixel.push(feature);
});
// feature[len]:1
console.log("feature[len]:" + allFeaturesAtPixel.length);
//feature[Name]: undefined
feature= allFeaturesAtPixel[0];
console.log("feature[Name]: " + feature.get('NOMBRE'));
In your map you probably have two layers, the WMS tile layer and the vector layer for the pin. So, OpenLayers doesn't know about the road features. If you are calling forEachFeatureAtPixel you are getting the only feature OpenLayers knows about: the pin.
What you want to do is make a WFS GetFeature request to get the features at the current pin position. Take a look at this example: http://openlayers.org/en/master/examples/getfeatureinfo-tile.html
I have the following very simple code:
#map_center = [-32.951106, -60.669952]
#map = new ol.Map({
target: 'map-canvas',
layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
view: new ol.View({
center: #map_center,
zoom: 5
})
})
It's in coffeescript, but you will get the idea. The problem is, the map does not center at all. It gets stuck in [0, 0]
Am I doing something wrong?
By default the view's projection is Web Mercator (EPSG:3857). This means the view center's coordinates should be expressed in that projection.
If you have latitudes and longitudes you can use the ol.proj.transform function to transform the latitudes longitudes to Web Mercator coordinates. For example:
var view = new ol.View({
zoom: 4,
center: ol.proj.transform([-60, -32], 'EPSG:4326', 'EPSG:3857')
});