I am trying to label vector tile point features but they always gets cropped at the tile border. I have tried (among many other things) using the renderBuffer option with no success.
I am using OL 3.19 and the vector tiles are served with Geoserver 2.10RC1 and I get the same errors in my production environment as well as editing an Boundless example (http://suite.opengeo.org/docs/latest/dataadmin/vectortiles/index.html).
I think maybe the tiles are served correctly from Geoserver and that Openlayers somehow render and then slices the tiles before presentation but I am kind of stuck on this.
Any ideas?
Screenshot of the way it looks
And the code snippet:
<script>
var style_simple = new ol.style.Style({
fill: new ol.style.Fill({
color: '#ADD8E6'
}),
stroke: new ol.style.Stroke({
color: '#880000',
width: 1
}),
text: new ol.style.Text({
text:'LOREMIPSUM'})
});
function simpleStyle(feature) {
return style_simple;
}
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0,0],
zoom: 4
}),
layers: [new ol.layer.VectorTile({
renderBuffer:50, //doesn't matter
style:simpleStyle,
source: new ol.source.VectorTile({
tilePixelRatio: 1,
tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
format: new ol.format.MVT(),
url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/testlayer#EPSG%3A3857#pbf/{z}/{x}/{-y}.pbf'
})
})]
});
</script>
I have the same problem with ol.layer.VectorTile and text labels.
All labels are sliced on the tile boundaries.
Full example: https://jsfiddle.net/rn3qc4ca/
I asked the openlayers developers for help: https://github.com/openlayers/ol3/issues/6275
-> This is not a bug in openlayers. The mapbox tiles really repeat the label points in neighbored tiles. If you use very big fonts the label will still be cropped.
My (unimplemented) idea is to place all labels into a separate ol.layer.Vector layer. As this type of layer is not sliced into tiles it is always printed completely.
Related
For clustered features I would like to make the following style in OL3:
A square, and on top of it another smaller square at the right-top corner. The bigger square would hold the symbol, and the smaller square would hold the number of the clustered features.
Similar to this
Is it possible to achieve this? In the API I've seen that ol.style.Icon and ol.style.Text has anchor and offset properties, but not RegularShape...
I have eventually overcome on this problem with using a single png image which included the square AND the smaller square, too, and overlayed the dynamic text on it, like this:
var clusterStyle = [new ol.style.Style({
image: new ol.style.Icon({
src: clustericon.png
}),
text: new ol.style.Text({
text: feature.get('features').length.size.toString(),
offsetY: -18,
offsetX: 18,
font: '12px Arial',
fill: new ol.style.Fill({
color: '#fff'
}),
scale: 1
}),
zIndex: 20
}), new ol.style.Style({
image: new ol.style.Icon({
src: 'overlayicon.png'
}),
zIndex: 21
})];
You can also insert an overlay image on it. Hope it helps you anyways
I draw features on a map (WKT POINTs). Now I would like to give those points a radius. Before I even add Features and the layer to the map I do the following:
var src = new ol.source.Vector();
var layer = new ol.layer.Vector({
source: src,
style: new ol.style.Circle({
radius: 30
})
});
This throws the following error:
AssertionError: Assertion failed: obj geometry must be an ol.style.Style instance
at goog.asserts.DEFAULT_ERROR_HANDLER (http://localhost:33464/app/lib/openLayers/ol-debug.js:4330:52)
at goog.asserts.doAssertFailure_ (http://localhost:33464/app/lib/openLayers/ol-debug.js:4365:3)
at goog.asserts.assertInstanceof (http://localhost:33464/app/lib/openLayers/ol-debug.js:4575:5)
at ol.style.createStyleFunction (http://localhost:33464/app/lib/openLayers/ol-debug.js:56402:7)
at ol.layer.Vector.prototype.setStyle (http://localhost:33464/app/lib/openLayers/ol-debug.js:58228:3)
at ol.layer.Vector (http://localhost:33464/app/lib/openLayers/ol-debug.js:58115:3)
If instead I add the same style to the "new ol.layer.Tile" I'm using to display the OpenStreetMap (ol.source.OSM) in the background everything works perfect:
map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
style: new ol.style.Circle({
radius: 30
})
})
]
});
I don't really understand that. I guess it has something to do with ol.style.Circle extending ol.style.Image (which doesn't sound like something for a vector layer - rather the raster layer "Tile"). But if I add the style to the Tile-Layer, why are the features on the vector-Layer rendering with this style?
My questions:
What is the correct way of doing this?
Is there a "style-Inheritance" going on?
style is not a valid option of the ol.layer.Tile object, thus it is simply ignored. See its documentation: http://openlayers.org/en/v3.10.1/apidoc/ol.layer.Tile.html
The style definition defined in the ol.layer.Vector has to be either of the following:
a ol.style.Style object
an array of ol.style.Style objects
a style function, i.e. ol.style.StyleFunction.
So, in order for your example to work, you could define a style that looks like this:
var src = new ol.source.Vector();
var layer = new ol.layer.Vector({
source: src,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 30,
fill: new ol.style.Fill({color: 'red'})
})
})
});
This example demonstrates custom style: http://openlayers.org/en/v3.10.1/examples/custom-interactions.html
See also the API documentation: http://openlayers.org/en/v3.10.1/apidoc/ol.layer.Vector.html
I've got a vector layer with a GeoJSON source, consisting of Points and a LineString. When I click on a point I want to open a popup with additional information.
Here's some code:
var style = {
'Point': [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgb(255,0,0)'
}),
radius: 5,
stroke: new ol.style.Stroke({
color: '#000000',
width: 1
}),
})
})],
'LineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 3
})
})],
'MultiLineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0000ff',
width: 3
})
})]
};
var map = new ol.Map({
target: 'map-ol-canvas',
interactions: ol.interaction.defaults({mouseWheelZoom: false}),
layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
view: new ol.View({
zoom: 8,
maxZoom: 16
})
});
map.getView().fit(extent, map.getSize());
var trackSource = new ol.source.Vector({
url: '/test.geojson',
format: new ol.format.GeoJSON()
});
var track = new ol.layer.Vector({
source: trackSource,
style: function(feature, resolution) {
return style[feature.getGeometry().getType()];
}
});
map.addLayer(track);
var select = new ol.interaction.Select({
filter: function (feature, layer) {
return feature.getGeometry().getType() === 'Point';
}
});
map.addInteraction(select);
// When user clicks on a waypoint, show a tooltip.
function onMouseClick(browserEvent) {
var coordinate = browserEvent.coordinate;
var pixel = map.getPixelFromCoordinate(coordinate);
map.forEachFeatureAtPixel(pixel, function(feature) {
if (feature.getGeometry().getType() === 'Point') {
console.log(feature.get('date'));
}
});
}
map.on('click', onMouseClick);
The problem:
When I click directly on a point nothing happens. When I click a couple of pixels below and a bit right or left (depends on zoom level!), the point gets selected and the console.log is triggered.
I can fix this by using Firebox WebDeveloper Addon and activating "Disable all styles".
However, when I manually remove all CSS one by one that behavior never goes away.
In the first place I thought this might be some inherited padding or margin, but currently I think the canvas shouldn't be affected by any CSS at all.
Any ideas about what could be wrong?
I'm experiencing the same issue. It appears to be linked to navigating to the page from a specific modal (I'm using ajax hash paging). The footer doesn't load and after I interact with the first feature on the map the following happens;
The map jumps and stretches/smears slightly
The footer shows up on my page
The vertical scroll bar appears
The issue doesn't seem to occur when i link from another page.
I have the same problem.Here are some advices may help you:
check the the size of map's container(may be a Div).
check the size of map(openlayers's map object).
compare that two size to confirm whether the two size are equal.
if not, you can use the map.setSize([width,height])to adjust the map's size.
I have a vector layer with a lot of close together data, each rendered by an icon. When rendered in Open Layers 3 using icons of any type/design I often get tearing of elements trying to get through others, I'm sure many people using Open Layers will have seen this happen.
Is there a way of solving this issue?
My code is fairly standard:
var styleCache2 = {};
var WFS_layer_Dangerous_Bends = new ol.layer.Vector({
source : new ol.source.GeoJSON({
projection : 'EPSG:3857',
url : "Vector_Data/A_Vector_Data_Set.geojson"
}),
style : function(feature, resolution) {
if (!styleCache2[path]) {
styleCache2[path] = [new ol.style.Style({
fill : new ol.style.Fill({
color : 'rgba(255, 255, 255, 0.1)'
}),
stroke : new ol.style.Stroke({
color : '#319FD3',
width : 1
}),
image: new ol.style.Icon(({
anchor: [x_anchor, y_anchor],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
src: path
}))
}),
zIndex : 1
})];
}
return styleCache2[path];
}
});
/*Creating the map object linked to the map selector/div in the HTML */
map_object = new ol.Map({
target: 'map',
controls: controls_list,
interactions: interactions_list,
overlays: [overlay],
layers: [OSM_raster, WFS_layer_Dangerous_Bends],
view: view
});
Obviously overlay, controls_list, interactions_list and the OSM_raster are defined somewhere too, but I don't think they're relevant to the question so I haven't included them.
I tried to capture an example, it's quite difficult because its intermittent, this shows about 5 icons overlapping normally, but a couple in the middle are tearing through each other:
A style of an ol.layer.Vector can be set as ol.style.Style, a style function or an array of ol.style.Style. What's the array for and what does it do -- compared to just passing an ol.style.Style object?
I cannot find any information on this, neither in the official API docs nor in the tutorials.
If you look at the draw features example, when drawing lines, they are displayed in blue with a white border/outline.
These is achieved by styling the line twice, first with a large white line, then a thin blue line above.
There are 2 styles for the same geometry. It can’t be done with a single ol.style.Style, so to achieve this you need to pass an array of 2 styles: see the source for this.
Because I think this is still relevant and the edit queue is full for the approved answer, I'm posting this with the links updated and with code examples.
The most common way to see the array of styles in action is when drawing features since this is default style in Openlayers. For the line to appear blue with a white border it has to have two styles since it can't be done with a single Style. Openlayers does this by default like this:
styles['LineString'] = [
new Style({
stroke: new Stroke({
color: white,
width: width + 2,
}),
}),
new Style({
stroke: new Stroke({
color: blue,
width: width,
}),
}),
];
source
To expand on how usefull this feature could be you could check the custom polygons example. To have the vertices highlighted, they use two styles, one for the vertices and another for the polygon contour itself. Relevant piece of code:
const styles = [
new Style({
stroke: new Stroke({
color: 'blue',
width: 3,
}),
fill: new Fill({
color: 'rgba(0, 0, 255, 0.1)',
}),
}),
new Style({
image: new CircleStyle({
radius: 5,
fill: new Fill({
color: 'orange',
}),
}),
geometry: function (feature) {
// return the coordinates of the first ring of the polygon
const coordinates = feature.getGeometry().getCoordinates()[0];
return new MultiPoint(coordinates);
},
}),
];