Does OpenLayers 3 support LineString and Polygon rendering on WebGL? I have set renderer to 'webgl' and tried to render a TopoJSON format Vector Tile but got the following error: "Uncaught TypeError: vectorSource.loadFeatures is not a function".
The following example from the OL3 web site only works if i remove the 'renderer' attribute from the map properties so the map is rendered using an HTML5 canvas:
var map = new ol.Map({
renderer: 'webgl',
layers: [
new ol.layer.VectorTile({
source: new ol.source.VectorTile({
attributions: [new ol.Attribution({
html: '© Mapbox ' +
'© ' +
'OpenStreetMap contributors'
})],
format: new ol.format.MVT(),
tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
tilePixelRatio: 16,
url: 'http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
'{z}/{x}/{y}.vector.pbf?access_token=' + key
})
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
Only the canvas renderer supports vector tiles with ol.layer.VectorTile.
As already mentioned, only points are currently supported for WebGL rendering, but there certainly appears to be a desire to expand this out to lines and polygons. With the VectorTile support (granted canvas only) already being there, I couldn't imagine them not including full WebGL.
There was a code sprint last year where they did a proof of concept. There were a number of limitations, but it proved it was possible.
http://www.camptocamp.com/en/actualite/openlayers-3-towards-drawing-lines-and-polygons-with-webgl/
renderer ol.renderer.Type | Array.<ol.renderer.Type> | undefined
Renderer. By default, Canvas and WebGL renderers are tested for support in that order, and the first supported used. Specify a ol.renderer.Type here to use a specific renderer. Note that the Canvas renderer fully supports vector data, but WebGL can only render Point geometries.
http://openlayers.org/en/latest/apidoc/ol.Map.html
Related
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 hot stack with reprojection of GeoJson
I have GeoJson object loaded by ajax from server
Object has CRS set to EPSG:2180
I want to overlay it on OpenStreet Map that has CRS EPSG:3857
var buildingsFeatures = (new ol.format.GeoJSON()).readFeatures($buildings, {
dataProjection: 'EPSG:2180',
featureProjection: 'EPSG:3857'
});
$building is GeoJson FeatureCollection object and above code is as per OpenLayers documentation but coordinates are not changed.
I hit a wall with it :(
Things to do to make it working:
get proj4.js from https://github.com/proj4js/proj4js/releases
define EPSG:2180 either inside your code or in proj4-defs.js file as
proj4.defs([
[
'EPSG:2180',
'+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +units=m +no_defs'
]
]);
and that's all.
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 followed the migration guidelines specified here.
I converted my various ol.source layers as specified from:
var source = new ol.source.GeoJSON({
url: 'features.json',
projection: 'EPSG:3857'
});
to the new form:
var source = new ol.source.Vector({
url: 'features.json',
format: new ol.format.GeoJSON()
});
My feature extents are fine, zoom and position of the map are correct, but I do not see any points/areas on the map (invisible features ?). Could it be related to the vector styles or the render-time loading ?
It worked with 3.4.0 and the old way using ol.source.GeoJSON.
Is there a way to click a Google Maps overlay with capybara-webkit? What about Capybara using Selenium? I want to test the content of the info window once the marker is selected. I also want to test that there are n markers on the page.
To test that there are n markers on the page:
expect(find('.gmap_container')['data-markers'].split('},{').count).to eq(n)
This can be done, but requires a change to how you create your markers. You must instruct them to render as images rather than canvas elements:
new google.maps.Marker({
position: latLng,
animation: google.maps.Animation.DROP,
name: business.get('name'),
id: business.get('id'),
optimized: false, // <-- this is the stuff
title: business.get('name')
});
Then in your test, you can find('div[title="Business\ Title"]').click
If possible, you might want to consider doing this just for a test environment, but that's up to you and your needs.
Credit: http://blog.mojotech.com/selecting-google-maps-v3-markers-with-selenium-or-jquery/
Hope this helps!