I have a map I have created in QGIS 3.8. It is using OSM as the base map and I have a simple raster layer which is a georeferenced map.
QGIS has a useful plugin qgis2web that exports a complete set of files for Openlayers (and Leaflet).
Once in Openlayer format and viewed in a browser it is possible to rotate the complete view to rotate say the north-point 40 degrees (i.e. about 0.7 Radians) east by using Alt+Shift+Drag. You can see a demo of this working here: https://openlayers.org/en/latest/examples/rotation.html
What I am trying to do is to modify the generated code to show the map already rotated to the required angle. (This is because the georeferenced map does not have its north point at the top of the page.)
This is the layers.js code that I am trying to modify, presumably, I need a rotation: 0.7 but I cannot figure out where!
var wms_layers = [];
var lyr_OpenStreetMap_0 = new ol.layer.Tile({
'title': 'OpenStreetMap',
'type': 'base',
'opacity': 1.000000,
source: new ol.source.XYZ({
attributions: '',
url: 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
});var lyr_MyMap = new ol.layer.Image({
opacity: 1,
title: "King's Park",
source: new ol.source.ImageStatic({
url: "./layers/MyMap.png",
attributions: '',
projection: 'EPSG:3857',
alwaysInRange: true,
imageExtent: [-100073.533268, 6847294.601171, -93832.319311, 6852417.437192]
})
});
lyr_OpenStreetMap_0.setVisible(true);lyr_MyMap.setVisible(true);
var layersList = [lyr_OpenStreetMap_0,lyr_MyMap];
Thank you pavlos
Just adding one line at the end of the body of html file sorted it:
<script>map.getView().setRotation(Math.PI / 2.6 );</script>
Related
I am using Openlayer3 to add a raster layer via MapServer WMS.
When loading the page CRS value is changing to 3857 in the WMS URL.
Working Mapserver URL
http://localhost/cgi-bin/mapserv.exe?map=D:\mapserver\actualimage.map&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&LAYERS=Gujarat&STYLES=&CRS=EPSG:32643&BBOX=361600.51891405135,2404154.8014285564,366487.01241288986,2409041.294927395&WIDTH=800&HEIGHT=500&FORMAT=image/png
The openlayer is requesting the URL below
http://localhost/cgi-bin/mapserv.exe?map=D:%5Cmapserver%5Cactualimage.map&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=Gujarat&CRS=EPSG%3A3857&BBOX=360378.8955393417%2C2402933.1780538466%2C367708.6357875995%2C2410262.918302105&WIDTH=1&HEIGHT=1&STYLES=
decoded as
http://localhost/cgi-bin/mapserv.exe?map=D:\mapserver\actualimage.map&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=Gujarat&CRS=EPSG:3857&BBOX=360378.8955393417,2402933.1780538466,367708.6357875995,2410262.918302105&WIDTH=1&HEIGHT=1&STYLES=
Below is the Openlayer code
var layers = [
new ol.layer.Image({
extent: [361600.51891405135,2404154.8014285564,366487.01241288986,2409041.294927395],
source: new ol.source.ImageWMS({
url: encodeURI('http://localhost/cgi-bin/mapserv.exe?map=D:\\mapserver\\actualimage.map'),
params: {
'LAYERS': 'Gujarat',
'CRS': 'EPSG:32643',
'BBOX': '361600.51891405135,2404154.8014285564,366487.01241288986,2409041.294927395',
'WIDTH': '800',
'HEIGHT': '500',
'FORMAT': 'image/png'
},
serverType: 'mapserver',
projection: ol.proj.get('EPSG:32643'),
})
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [361600.51891405135, 2404154.8014285564],
zoom: 1
})
});
Unless you have registered 'EPSG:32643' as projection (e.g. by using and configuring proj4js), ol.proj.get('EPSG:32643') will return null. If you have the projection registered properly, OpenLayers will raster reproject your WMS layer to the view projection ('EPSG:3857'), which you may or may not want.
To go without raster reprojection, configure projection: 'EPSG:32643' on both yourol.source.ImageWMSand yourol.View. Also note that the coordinates of the view'scenterneed to be in ``'EPSG:32643' in this case.
I need to display a raster image in GeoTiff format, it was georeferenced with QGIS. It looks like Openlayers 3.15 doesn't support this kind of format. Do you know anything about that?
var agentUrl = 'http://localhost:9925/Wgis/assets/img/allertaMeteoGeo.tif';
var bounds = [ 713101.704, 4044061.027, 713101.704, 4044061.027];
var view2 = new ol.View({
center : [ -87.7302542509315, 43.744459064634 ],
projection : "EPSG:3857",
zoom : 12
});
var sorgente = new ol.source.ImageMapGuide({
projection : "EPSG:3857",
url : agentUrl,
metersPerUnit : 111319.4908,
imageSize: [792, 452],
ratio : 2
});
var raster = new ol.layer.Image({
extent : bounds,
source : sorgente
});
var map2 = new ol.Map({
layers : [ raster ],
target : 'map2',
view : view2
});
I agree with chrki, that it is not currently possible to display a TIFF (or GeoTiFF) in an OpenLayers map as stated here: https://gis.stackexchange.com/a/98029. Browsers do not display TIFF images natively.
As an experiment, I exported both TIFF and PNG files from an ArcGIS raster image. Then in an openlayers map (using v3.18.2), I used the following function to successfully add a PNG as an ol.layer.Image, but it failed without notice for the TIFF:
function addImage() {
extent = [-13602803.9769, 4920816.12423, -13599949.5192, 4923458.74552]; // [left, bottom, right, top]
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var StaticImage = new ol.layer.Image({
source: new ol.source.ImageStatic({
attributions: 'yada yada',
url: /robs/gis_data/LiDAR Elevations2.png',
projection: projection,
imageExtent: extent
})
});
map.addLayer(StaticImage);
map.getView().fit(extent, map.getSize());
}
Actually you could tile your image before, load it in IIS and get it from something like this:
var newLayer = new ol.layer.Tile({
source: new ol.source.OSM({
url: 'maps/{z}/{x}/{y}.png'
})});
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
Is there any way to transform from Zoomify (with a specific width and height) to [long, lat] coordinates ?
I saw the documentation (for 3.6) and it seems that ol.proj.transform method does not accept ZOOMIFY as ol.proj.ProjectionLike parameter.
Currently, I have some marker coordinates saved by LeafletJS library into database and I need to project them into [long, lat] coordinates to display them with a OpenLayer 3.6 map. The tiles for the map are the same as it was for Leaflet library.
If needed, here is the code for initiating the ol3 map:
var proj = new ol.proj.Projection({
code: 'ZOOMIFY',
units: 'pixels',
extent: [0, 0, width, height]
}),
map = new ol.Map({
target: this.get('view').$().attr('id'),
view: new ol.View({
projection: proj,
center: [width/2, - height/2],
zoom: 1,
extent: [0, -height, width, 0]
}),
controls: []
});
......
var layer = new ol.source.Zoomify({
url: url,
size: [width, height],
crossOrigin: 'anonymous'
});
map.addLayer(layer);
Also, the code that I'm using to add the markers is:
pos = ol.proj.transform([posX, posY], 'ZOOMIFY', 'EPSG:4326'),
marker = new ol.Overlay({
position: pos,
positioning: 'center-center',
element: domElement,
stopEvent: false
});
map.addOverlay(marker);
I need to mention that I am really new with this framework, so any hint can be helpful.
Thanks,
It seems that you did not need to transform the coordinates since the frameworks know that the coordinates are in the ZOOMIFY format (from the map creation, see above lines).
I solved the problem with the following code:
pos = [posX, posY],
marker = new ol.Overlay({
position: pos,
positioning: 'center-center',
element: domElement,
stopEvent: false
});
map.addOverlay(marker);