I want to limit rendering of a vector layer to a bounding box, but the extent property on ol.layer.Vector does not change the geographic bounds of what is rendered in the vector layer.
Here is a simple example:
var base = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.TopoJSON(),
url: 'https://gist.githubusercontent.com/quizzicol/7068241/raw/4f6ced3a2412a48141843bee07f6ae2034eea21b/world110.json'
}),
extent: [-180, 0, 180, 70]
});
var map = new ol.Map({
layers: [base],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
And here it is in action: http://codepen.io/mikeskaug/pen/XKOGLN. I expected this to limit rendering to objects in the northern hemisphere, yet the entire world is still rendered.
What am I missing? I'm using OpenLayers 3.17.1
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.
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);
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);
})
How is it possible to change the rotation icon (picture), points (Feature) after creating and adding to the map?
Set the rotation icons on create a point I know, but how to change the rotation later?
For uses such as icons, which follows the direction of rotation?
How to do this correctly with respect to performance? (set point again all parameters???)
thanks... very much
Live demonstration:
http://jsfiddle.net/91mLh1j7/
JS Code:
var map = new ol.Map({
target: 'mapID',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({
layer: 'osm'
})
})],
view: new ol.View({
center: ol.proj.transform([14, 50], 'EPSG:4326', 'EPSG:3857'),
zoom: 11
})
});
var Features = [];
// define style for features
var iconStyle = {
src: "http://google-maps-icons.googlecode.com/files/library-publ.png",
anchorOrigin: "bottom-left", // v KML je počítáno od levého spodního rohu
anchor: [0.5, 0],
anchorXUnits: "fraction",
anchorYUnits: "fraction",
scale: 0.9,
opacity: 0.75,
rotation: 45 * 0.01745329251, // in rad / 360° = 6.28318531 rad = 2PI rad
rotateWithView: "true"
};
var point1 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([14.01, 50.01], 'EPSG:4326',
'EPSG:3857')),
name: 'Point One'
});
point1.setStyle(new ol.style.Style({
image: new ol.style.Icon(iconStyle)
}));
var point2 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([13.99, 49.99], 'EPSG:4326',
'EPSG:3857')),
name: 'Point Two'
});
point2.setStyle(new ol.style.Style({
image: new ol.style.Icon(iconStyle)
}));
// add point1, point2 to Features
Features.push(point1);
Features.push(point2);
var vectorSource = new ol.source.Vector({
features: Features // add an array of features
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource // add source for vectorLayer
});
map.addLayer(vectorLayer) // add vectorLayer to map
////////////////////
// how to change the rotation of one point (feature) ? after cration point and add it on map
////////////////////
The ol.style.Image class, which the ol.style.Icon extends, has a setRotation method you can use to set the rotation of the icon. You can try this in your example by adding:
Feature1.getStyle().getImage().setRotation(135 * 0.01745329251);
See live on the updated fiddle: http://jsfiddle.net/91mLh1j7/1/
I am trying to make web map application with openlayers 3. I have a problem which i want to fix.
I am loading OSM layer as my base map of the application. But the problem with the OSM layer is that it shows whole world and I can pan my map all around the world.
I want my application to be fixed in certain part. I have map extent set but still it doesn't work.
I am using minZoom but it doesn't help.
Is there any other way to fix this prolem?
var centerpos = [84.2, 28.2];
var newpos = ol.proj.transform(centerpos,'EPSG:4326','EPSG:900913');
var baseLayerOSM = new ol.layer.Tile({
source: new ol.source.MapQuest({
layer: 'osm'
}),
isBaseLayer:true
});
var map = new ol.Map({
layers: [baseLayerOSM],
target: 'map',
controls: [new CustomControl()],
view: new ol.View({
extent:[80.05844110726194,26.34796712822462,88.2015218371264,30.44742963310623],
projection : 'EPSG:900913', // OSM projection
center : newpos,
minZoom:7,
zoom: 7
})
});
This is my code.
AJ
Basically your example should work, but I think you forgot to transform your extent to EPSG:900913 / EPSG:3857 as well.
var maxExtent = [80.05844110726194,26.34796712822462,88.2015218371264,30.44742963310623];
var map = new ol.Map({
layers: [baseLayerOSM],
target: 'map',
controls: [new CustomControl()],
view: new ol.View({
extent: ol.proj.transformExtent(maxExtent, 'EPSG:4326', 'EPSG:900913'),
projection : 'EPSG:900913', // OSM projection
center : newpos,
minZoom:7,
zoom: 7
})
});