I have a layer with maxResolution set, such that the layer is displayed only when you zoom in at a certain level. My issue is that the layer source data is loaded only when zooming at that level. Is there a way to preload the vector source data?
var source = new ol.source.Vector({
url: '/mapsource/source.geojson',
format: new ol.format.GeoJSON()
});
// how do I force loading the source here, and not wait for the map to render at 80 zoom?
var layer = new ol.layer.Vector({
title: 'Test layer',
source: source,
style: my_style,
maxResolution: 80
});
You can load data over ajax and add to your source.
var source = new ol.source.Vector();
$.getJSON('/mapsource/source.geojson').done(function(data){
var features = (new ol.format.GeoJSON()).readFeatures(data);
source.addFeatures(features);
});
Related
I have to load some Features in a Vector layer and have a style function.
var features = new ol.format.GeoJSON().readFeatures( geojsonStr, {
featureProjection: 'EPSG:3857'
});
var vectorSource = new ol.source.Vector({
features: features,
});
/*
var clusterSource = new ol.source.Cluster({
distance: 15,
source: vectorSource
});
*/
var customStyleFunction = function( feature, resolution ) {
....
}
var vectorLayer = new ol.layer.Vector({
//source: clusterSource,
source: vectorSource,
style : customStyleFunction
});
map.addLayer( vectorLayer );
I don't know what kind of geometry I will get in geojsonStr. The problem is: When my collection is of type "Point" I can cluster it, but with any other types I can't see the Layer... How can I cluster Points and ignore Polygons and Lines? or let OL3 be clever enough to decide?
EDIT: I've read https://github.com/openlayers/openlayers/pull/4917
I would recommend you to create 2 different layers: One for clustering and a another one for a common vector layer.
To solve your problem, you can loop through the features and check the geometry type of each, and add it to an already existing source with the addFeature method:
for (var i = 0; i < geojsonFeatures.length; i++) {
if (geojsonFeatures[i].getGeometry().getType() === 'Point') {
clusterSource.addFeature(geojsonFeatures[i]);
} else {
vectorSource.addFeature(geojsonFeatures[i]);
}
}
I have created a jsfiddle which gets a couple of features from a GeoJSON object and add them to different sources depending on the geometry type. If you want to see more points in the cluster souce to make sure that it is working properly, you can use the commented lines as well.
I've tried this
layer_info.ol_layer.getSource().setTileLoadFunction(function (img, src) {
img.getImage().src = src + "&seq=" + (new Date()).getTime();
});
but it only changes the params on the first call and all subsequent calls just use the cached tiles.
Strangely When Using this on an Image source like Mapguide it works wonderfully and requests a new image every time.
opLayer.getSource().setImageLoadFunction(function(img, src){
img.getImage().src = src + "&seq=" + (new Date()).getTime();
});
EDIT: Here is the full layer before it is pushed in.
layer_info.ol_layer = new ol.layer.Tile({
opacity: 1 - (conf_layer.transparency / 100),
style: layer_info.display_name,
source: new ol.source.TileWMS({
attributions: [new ol.Attribution({html: conf_layer.attribution})],
//cacheSize: 0,
crossOrigin: (conf_layer.crossOrigin != 'null') ? conf_layer.crossOrigin : null,
url: conf_layer.url,
projection: Model.Projection,
params: {'LAYERS': conf_layer.layers}
})
});
I've discovered that setting cacheSize zero makes it ignore caching, however that only works on layers that aren't being reprojected. I need this layer to be reprojected and always request new tiles when zoomed or panned. (background data is somewhat live, in my arcgis layer it is live)
I have a Tile layer using an XYZ source in OpenLayers 3 (version 3.13.1) with url property set to http://my.server/map/z{z}/row{y}/{z}_{x}_{y}.jpg. On my server Tile images in folders z2 to z8 are available. But OpenLayers also tries to fetch images from folder z1 which doesn't exist. The map displays correctly, but my browser's console shows a file not found error. Is there a way to stop loading obviously non-existent tiles in the tileloadstart event? My code is as follows:
function createTileLayer() {
var xyzSource = new ol.source.XYZ({
url: 'http://my.server/map/z{z}/row{y}/{z}_{x}_{y}.jpg'
});
xyzSource.on('tileloadstart', function(evt) {
if (evt.tile.tileCoord[0] == 1) {
// Stop loading the Tile ?!?!
}
});
return new ol.layer.Tile({
extent: _maxExtent,
preload: 1,
source: xyzSource
});
}
Any help is greatly appreciated.
The solution is to set up the source properly so it does not try to fetch images for zoom levels that you do not have available:
var xyzSource = new ol.source.XYZ({
url: 'http://my.server/map/z{z}/row{y}/{z}_{x}_{y}.jpg',
tileGrid: ol.tilegrid.createXYZ({
minZoom: 2,
maxZoom: 8
})
});
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);
})