I'm trying to display some WMS with tiles, but at every zoom (in or out) the images are displaying wrong, with wrong proportions. This is how I'm creating the tile:
var map = this.state.map;
var layers =
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://XX.XX.XX:8080/geoserver/cite/wms',
params: {'LAYERS': 'cite:clientes_ex', 'TILED': true, 'VERSION': '1.3.0',
'FORMAT': 'image/png8', 'WIDTH': 256, 'HEIGHT': 256, 'CRS': 'EPSG:3857'},
serverType: 'geoserver'
})
})
map.addLayer(layers);
This is what happens.
This is another example, in zooms very far way from the map:
Any idea how could I fix it?
Related
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.
I am trying to display two layers using Openlayers 3, one is a map of Greenland, and the other one is an area of interest. Both layers are tiled.
It seems to be working, but all I get are transparent tiles, so somehow I am placing the view in an area where there is nothing. I am using a UTM 24 N projection (which is the original projection of the layers involved, so no transformation is needed).
Here is my code:
var utm24_projection = new ol.proj.Projection({
code: 'EPSG:32624',
extent: [-396882, 6394710, 1280839.6, 9750153.2],
units: 'm',
axisOrientation: 'neu'
});
ol.proj.addProjection(utm24_projection);
layer1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://www.ourmapserver.gl/geoserver/wms',
params: {'LAYERS': 'ourcompany:greenland', 'TILED': true},
serverType: 'geoserver',
})
});
layer2 = new ol.layer.Tile({
//extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.TileWMS({
url: 'http://www.ourmapserver.gl/geoserver/wms',
params: {'LAYERS': 'ourcompany:interestarea', 'TILED': true},
//projection = ol.proj.get('EPSG:32624');
serverType: 'geoserver'
})
});
var layers = [
layer1,
layer2
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
projection: utm24_projection,
center: [-48864, 7491452],
zoom: 4
})
});
It worked fine when using Web Mercator.
So I have found a solution.
First of all, I removed the extent from my projection:
var utm24_projection = new ol.proj.Projection({
code: 'EPSG:32624',
units: 'm',
axisOrientation: 'neu'
});
Then when defining the view, I only configure the projection, but no center or zoom.
Finally, I adjust the view to the map size and bounds:
map.getView().fit(bounds, map.getSize());
The map is being displayed correctly.
I think that all is in the question, i'm looking for a way to fixed the scrollable area of the map to the size of it's layer.
In my case i use a static image which has 2722 px in width and 3850 px in height.
I also check the "extent" property but i can't really anderstand how to make it work, for my purpose.
That's it, can't wait for some clues or other answers :)
Have a nice day & code.
EDIT:
var extent = [0, 0, 2722, 3850];
var projection = new ol.proj.Projection({
code: 'xcd-image',
units: 'pixels',
extent: extent
});
var map = new ol.Map({
interactions: ol.interaction.defaults({mouseWheelZoom: false, doubleClickZoom: false}),
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://www.tarsis.paris/bundles/tarsisfront/carte.png',
projection: projection,
imageExtent: extent
})
})
],
controls: [],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 3
})
});
What you would like to achieve is not yet supported by OpenLayers. See this answer by one of the OL developers.
As indicated by a comment in the question referenced above, you can though restrict zoomlevels by adding the minZoom parameter. You would have to change this part of your code:
controls: [],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 3
})
to this:
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 3,
minZoom: 2
})
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: