So I use Openlayers 3.9.0 and I use a loader to get a vector layer from Geoserver. Here is the code that currently works.
var sourceVector = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent) {
$.ajax('http://localhost:5550/geoserver/mymap/wfsservice=WFS&version=1.0.0&request=GetFeature&typeName=mymap:mylayer&outputFormat=application/json',
{type: 'GET'})
.done(
function(response) {
var geojsonFormat = new ol.format.GeoJSON({});
sourceVector.addFeatures(geojsonFormat.readFeatures(response,{dataProjection :projection,featureProjection : projection}));
})
.fail(function () {alert("BAD");});
},
strategy: new ol.loadingstrategy.tile(ol.tilegrid.createXYZ({maxZoom: 20}))
});
By setting a maxFeatures (...&maxFeatures=50&...) to my url I dont get all the features. Does this means that if I zoom in I will see more features and if I zoom out I will see less? Is maxFeatures related to the bbox and renders features according to the current map view and zoom levels? Or this isnt the concept? Because in my case , I always see a fixed number of features.
Thanks
The loader function of an ol.source.Vector is called with an extent, a resolution and a projection. The semantic expectation is that the loader function is responsible for loading all features within that extent.
ol.source.Vector maintains a history of all loaded extents, and will not try to load an extent that is within the already loaded extents.
So if you use the tile loading strategy at a low zoom level, and your maxFeatures causes some features to be ignored, zooming in will not make them appear (because loading that extent should already have been done be the parent tile load).
Because of this, using the WFS parameter maxFeatures with ol.source.Vector is generally a bad idea. If you really need to limit the number of features per request, consider limiting your layer to higher zoom levels or making several request for each loader call.
Additionally, your loader code does not use the extent parameter, making each request identical. Your loaders only responsibility is to load the features within the given extent. If you want to load all features independently of their location, use the all loading strategy.
Related
Consider the following toy example: jsfiddle
chart: {
events: {
render: myfunc
}
},
...
function myfunc() {
var chart = this;
chart.series.forEach(function(s) {
s.setState('inactive', true);
});
chart.series[0].setState('hover');
}
The intended behavior is to set the state of the first series as hover while setting all other series as inactive after load and redraw events.
The code works as intended after load
However, it doesn't work after redraw (via the select box). After selecting an option in the box, the series are rendered as normal instead of as inactive UNLESS any series had been previously hovered. That is, the code works if you interact with any series AND THEN select an option in the box, but it doesn't work if you select an option in the box immediately after the loading without interacting on the series.
Surprisingly, after some inspection in the console, I noted that in any case the intended states are properly passed to the series object. So, why the states are not properly rendered?
*NOTE: In my actual application the hovered series is not necessarily the first one, but it varies depending on the output of other function. I'm aware that "myfunc" could be simplified in the current example, but for general purposes please suggest an answer keeping the basic structure if possible.
This seems to be related to this issue from HighChart's GitHub. In your case, HighCharts is correctly updating the series' state. However, while rendering it fails to set the proper opacity value associated with the 'inactive' state. The workaround is to explicitly set the opacity of the series to the same value it should have in the 'inactive' state.
// F U N C T I O N S E T S T A T E
function myfunc() {
var chart = this;
chart.series.forEach(function(s) {
//explicit opacity
s.opacity = 0.2;
s.setState('inactive', true);
});
chart.series[0].setState('hover');
}
Thank you for sharing this issue, it seems that it is a regression after the last release.
In the previous version it used to work fine: https://jsfiddle.net/BlackLabel/Lbpvdwam/
<script src="https://code.highcharts.com/8.1.0/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.0/highcharts-more.js"></script>
I reported it on Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/13719
If you don't need any new features/bugfixes use the previous version as a temporary workaround.
Im trying to make a WMS Request using OpenLayers3, with a OSM Base map (EPSG:3857).
The raster data on geoserver is on EPSG:32629.
Somehow(?!) my setup worked fine till recently.
The raster image correctly appeared on the map even with different projections.
After the update to 2.15.2 my layers are no longer displayed.
I traced the problem to a reprojection issue but couldn't quite figure it out.
my request is basically:
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://mygeo/geoserver/ws/wms',
params: {
'FORMAT': 'image/png',
'VERSION': '1.1.1',
"LAYERS": 'ws:myraster'
}
})
});
i've tried setting the 'SRS' parameter on the request (adding it to the params) but OL forces the 3857.
On the geoserver, the raster layer is configured with both native and declared SRS with 32629 and "Force Declared".
Any Thoughts that might help ?
Regards
I am having a problem showing a few points on the map where the geojson file is loaded from the server. The geojson file changes so I want a good way to refresh the map layer. To do this, I created the source.Vector (Version 3.17.1 of OpenLayers)
var locationSource = new ol.source.Vector({
format: new ol.format.GeoJSON({
defaultDataProjection :'EPSG:4326'
}),
loader: vectorLoader,
strategy: ol.loadingstrategy.all
});
function vectorLoader which executes a XHR call to retrieve the latest version of the geojson file. This has been simulated in the jsfiddle below
jsfiddle
The geojson file has valid json because the points on the map show if I use a source.Vector object which uses the url property instead of a loader like this:
var locationSource = new ol.source.Vector({
url: '/openlayers/location.geojson',
format: new ol.format.GeoJSON({
defaultDataProjection :'EPSG:4326'
})
});
I would use this but it is horrible about using cached versions of the geojson file when a new file is available. I want something that is more reliable which is why I'm trying to get this to work with a loader.
The jsfiddle link above has all the code and it seems to run fine but the the points never show up on the map after addFeatures, located here:
onSuccess: function(response) {
var format = new ol.format.GeoJSON();
var features = format.readFeatures(response, {
featureProjection: 'EPSG:4326'
});
source.addFeatures(features);
console.info(source.getFeatures());
map.updateSize();
source.changed();
You will see that no points show on the map for the data provided in the jsfiddle. I feel like I am missing something basic here but after finding many solutions, none work..I seems like the style function needs to be executed again after the 'addFeatures` load completes. This can be seen in the console log for the jsfiddle above.
Indeed this is just a minor issue you were missing.
First of all radius was not defined, this is probably pulled from a variable which you haven't copied to your fiddle.
The main issue though is the wrong projection used when you read your features featureProjection: 'EPSG:4326', it should be changed to featureProjection: 'EPSG:3857', since the default projection in an OpenLayers view is Web Mercator. It could also be the case, that you wanted to define the data projection explicitly while reading your GeoJSON, for this you should set dataProjection: 'EPSG:4326'.
A working example can be found in this fiddle: https://jsfiddle.net/9oukr51t/
I have a map with a Vector layer, containing features from a GeoJSON source:
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: new ol.source.Vector({
url: 'http://example.com:5000/geo/data/zones/1',
format: new ol.format.GeoJSON()
}),
})],
renderer: 'canvas',
target: 'map',
view: new ol.View({
center: [737514.438475665, 5864533.629390752],
zoom: 13
})
});
I have multiple URLs that returns s GeoJSON string:
http://example.com:5000/geo/data/zones/1
http://example.com:5000/geo/data/zones/2
http://example.com:5000/geo/data/zones/n
I need to be able to switch the URL of my Layer source (or fetch and display features from another URL).
I have tried to find the 'url' property on the ol.Layer.Vector instance:
l=m.getLayers().getArray()[1]
l.getProperties()
and on the ol.source.Vector instance:
s = l.getSource()
s.getProperties()
but I haven't found anything about the 'url' property.
Could you provide a way to do that ?
is it possible to simply update the source URL (and automagically refresh the layer features) ?
shall I remove existing features, load new features using my own logic and add the loaded ones ?
shall I remove the whole Layer, re-create it, and re-add it ?
is it possible to simply update the source URL (and automagically refresh the layer features) ?
You can create a new source and set it on the target layer using ol.layer.Layer.setSource.
s=new ol.source.Vector(/* your source config goes here */);
l=m.getLayers().getArray()[1];
l.setSource(s);
If both layers are visible, the map will automagically refresh the features.
shall I remove existing features, load new features using my own logic and add the loaded ones ?
You can add or remove features on your Vector Layer using:
ol.layer.Vector.addFeature
ol.layer.Vector.addFeatures
ol.layer.Vector.removeFeature
See also: ol.Feature and ol.layer.Vector.forEachFeature
var feature = new ol.Feature({
geometry: new ol.geom.Polygon(polyCoords),
labelPoint: new ol.geom.Point(labelCoords),
name: 'My Polygon'
});
l=m.getLayers().getArray()[1];
s=l.getSource();
s.addFeature(feature);
s.addFeatures(/* array of features */);
s.removeFeature(feature);
shall I remove the whole Layer, re-create it, and re-add it ?
You can do that using ol.Map.addLayer and ol.Map.removeLayer.
// m is your map variable
v = new ol.layer.Vector(cfg);
m.addLayer(v);
m.removeLayer(v);
Final answer
All options listed above will switch the URL of your Layer. Each option triggers its own set of events and works with different parameters and objects. Based on my personal understanding, I would suggest:
Use option 1, if you are loading a new layer with the same properties of your old layer, but with new data.
Use option 2, if you have very few changes regarding some features on a Vector layer.
Use option 3, if you have a whole new layer, with different properties than your previous layer.
I'm trying to get the current center of an Openlayers map in lat/lon coordinates. I've got the following event handler setup:
this.map.on('pointermove', function (e) {
if (e.dragging) {
console.log(that.map.getView().getCenter());
}
});
This works, but I'm getting weird values. Here's an example:
[9318218.659044644, 3274618.6225819485]
Those are obviously not lat/lon values :) Do I need to transform this somehow? Thanks!
I'm not super familiar with openlayers but it sounds like the map is in different projection.
Check out the following on spherical_mercator, transform,
Open Layers projections
UPDATED
I've done a little more research, check out this example. Not sure what the projection your view is in. the map in this example is in ''EPSG:21781' if you go to a js console and enter map.getView().getCenter() you get [693230.7161150641, 179010.3389264635] but if you enter ol.proj.transform(map.getView().getCenter(), 'EPSG:21781', 'EPSG:4326') you get [8.658936030357363, 46.75575224283748] hope that helps.
For those who are working with angular.
Also, I would consider searching the projection of the map, instead of entering it manually.
import * as olProj from 'ol/proj'
import Map from 'ol/Map'
// ...
olProj.transform(
this.map.getView().getCenter(),
this.map.getView().getProjection(),
'EPSG:4326',
)
Update for OpenLayers 6 (assuming your map is called 'map') the following gives an array of [lon, lat] for the centre of your map's view.
ol.proj.toLonLat( map.getView().getCenter() )