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'
})});
Related
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>
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 serve TMS tile with in two flavours: 256px or 384px through renderd option scale=1.5.
With Openlayers 3, the only way I found to display these 384px tiles their original size is to transform the canvas context like this:
map.getViewport().getElementsByTagName('canvas')[0].getContext("2d").setTransform(1.5, 0, 0, 1.5, -w, -h);
I think it's not the proper way to go, so what would be the right one?
I played a bit with a special ol.tilegrid but with no success, see here:
https://jsfiddle.net/yvecai/owwc5bo8/8/
The output I aim for is on the right map.
There is no need to create a special tile grid or to apply any canvas scaling. All you need to do is set the tilePixelRatio of the source properly, which would be 1.5 in your case:
source: new ol.source.XYZ({
url: "http://www5.opensnowmap.org/base_snow_map_high_dpi/{z}/{x}/{y}.png?debug",
attributions: [/* ... */],
tilePixelRatio: 1.5
})
Also note that your expectation of the result is wrong. I updated your fiddle to compare the standard 256px tiles (on the right) with the hidpi 384px tiles (on the left). If you are viewing the fiddle on a hidpi display, you'll notice the difference. https://jsfiddle.net/owwc5bo8/9/
To summarize:
If you want to display high-dpi tiles on a mobile device with good sharpness, use tilePixelRatio :
https://jsfiddle.net/owwc5bo8/9/
If you want to display tiles with a size differnet than 256x256, create a proper ol.tilegrid, and a proper ol.view:
https://jsfiddle.net/owwc5bo8/12/
var extent = ol.proj.get('EPSG:3857').getExtent();
var tileSizePixels = 384;
var tileSizeMtrs = ol.extent.getWidth(extent) / 384;
var resolutions = [];
for (var i = -1; i <= 20; i++) {
resolutions[i] = tileSizeMtrs / (Math.pow(2, i));
}
var tileGrid = new ol.tilegrid.TileGrid({
extent: extent,
resolutions: resolutions,
tileSize: [384, 384]
});
var center = ol.proj.fromLonLat(
ol.proj.toLonLat([2, 49], 'EPSG:4326'),
'EPSG:3857');
var zoom = 5;
var view1 = new ol.View({
center: center,
zoom: zoom,
maxResolution: 40075016.68557849 / 384
});
I use a geojson file to build the layer added to a map. What I want is to customize style of the layer's polygons in order to have hatched polygons such as we can do that with mapserver symbols. Is it possible to do this with ol3? I tried to create an image and use it but it only works for point geometry. Thank you for your help.
Regards.
Fill patterns for polygons are not (yet) supported in OpenLayers 3, see also https://github.com/openlayers/ol3/issues/2208
It is possible by now. The ol.style.Style object accepts a CanvasRenderingContext2D instance, where you can apply an image pattern to your polygons.
Example Code Snippet
var geojsonObject = 'someGeoJSON'
var source = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var layer = new ol.layer.Vector({
source: source
});
var cnv = document.createElement('canvas');
var ctx = cnv.getContext('2d');
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
var pattern = ctx.createPattern(img, 'repeat');
layer.setStyle(new ol.style.Style({
fill: new ol.style.Fill({
color: pattern
})
}));
};
A full example can be seen here: jsfiddle
I'm using Openlayer 3.5 and load an OSM map "EPSG:3857".
var extent = [116.826673, 4.854776, 126.748593, 18.697146];
var philiExtent = ol.extent.applyTransform(extent, ol.proj.getTransform("EPSG:4326", "EPSG:3857"));
var view = new ol.View({
center: ol.proj.transform([121.787633, 11.775961], 'EPSG:4326', 'EPSG:3857'),
zoom: 0,
extent: philiExtent,
resolutions: [2560, 1280, 640, 320, 160, 80, 40, 20, 10, 5, 2.5, 1.2, 0.6],
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map'
});
But my features from webService are in "EPSG:4326"
function showData(data) {
var format = new ol.format.WKT();
var feature;
$.each(data, function (i, link) {
feature = format.readFeature(link.geom);
wktTraffic.addFeature(feature);
})
console.log('done load map');
}
So how I make the map be on 4326 or the new feature be on 3857.
I prefer first option.
Check out the FAQ section: http://openlayers.org/en/master/doc/faq.html#how-do-i-change-the-projection-of-my-map-
How do I change the projection of my map?
There is a good chance that you want to change the default projection of OpenLayers to something more appropriate for your region or your specific data.
The projection of your map can be set through the view-property. Here are some examples:
// OpenLayers comes with support for the World Geodetic System 1984, EPSG:4326:
var map = new ol.Map({
view: new ol.View({
projection: 'EPSG:4326'
// other view properties like map center etc.
})
// other properties for your map like layers etc.
});
// To use other projections, you have to register the projection in OpenLayers:
//
// By default OpenLayers does not know about the EPSG:21781 (Swiss) projection.
// So we create a projection instance for EPSG:21781 and pass it to
// ol.proj.addProjection to make it available to the library for lookup by its
// code.
var swissProjection = new ol.proj.Projection({
code: 'EPSG:21781',
// The extent is used to determine zoom level 0. Recommended values for a
// projection's validity extent can be found at http://epsg.io/.
extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
units: 'm'
});
ol.proj.addProjection(swissProjection);
// we can now use the projection:
var map = new ol.Map({
view: new ol.View({
projection: swissProjection
// other view properties like map center etc.
})
// other properties for your map like layers etc.
});
We recommend to lookup parameters of your projection (like the validity extent) over at epsg.io.
To reproject your features to EPSG:3857, you can set the options dataProjection and featureProjection when parsing the features from the WKT string. See also ol.format.WKT#readFeature
var format = new ol.format.WKT();
var feature;
$.each(data, function (i, link) {
feature = format.readFeature(link.geom, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
wktTraffic.addFeature(feature);
})