I have a simple task to do, supposedly OL4 and format.GEOJson.readfeatures should do that automatically. But it doesn't. Remembering that is a FeatureCollection and has CRS set.
I have a map with EPSG:4326 projection which works fine with same projection. If I change the map projection to EPSG:3857 and use format.GEOJson.readfeatures it all goes well. But when I try to use the other way, it doesn't.
I tried all properties and methods, searched all over Google, but no luck.
<script>
$(document).ready(function () {
$('.tap-target').tapTarget('open');
var typeSelect = 'None';
<!-- Creating Basic Map -->
var styles = [
'Road',
'Aerial',
'AerialWithLabels',
'collinsBart',
'ordnanceSurvey'
];
var layers = [];
var i, ii;
for (i = 0, ii = styles.length; i < ii; ++i) {
layers.push(new ol.layer.Tile({
visible: false,
preload: Infinity,
source: new ol.source.BingMaps({
key: '#mykey',
imagerySet: styles[i]
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// maxZoom: 19
})
}));
}
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([new app.Drag()]),
layers: layers,
// Improve user experience by loading tiles while dragging/zooming. Will make
// zooming choppy on mobile or slow devices.
loadTilesWhileInteracting: true,
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
//center: [0, 0],
//projection: 'EPSG:4326',
center: [-48.669159, -26.904534],
zoom: {{ geo|length > 0 ? 17 : 13 }}
})
});
var select = document.getElementById('layer-select');
function onChange()
{
var style = select.value;
for (var i = 0, ii = layers.length; i < ii; ++i)
{
layers[i].setVisible(styles[i] === style);
}
}
select.addEventListener('change', onChange);
onChange();
<!-- Creating Basic Map -->
<!-- Draw Feature -->
var source = new ol.source.Vector({
wrapX: true
});
var fill = new ol.style.Fill({
color: 'rgba(255,255,255,0.4)'
});
var stroke = new ol.style.Stroke({
color: '#3399CC',
width: 3
});
var sourceStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 36],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: '{{ asset('/images/material-icons/maps/1x_web/ic_place_black_36dp.png') }}'
})),
stroke: stroke,
fill: fill
});
var vector = new ol.layer.Vector({
//projection: 'EPSG:25830',
style: sourceStyle,
source: source
});
map.addLayer(vector);
vector.setVisible(true);
$.ajax({
type: 'get',
url: 'http://datosabiertos.malaga.eu/recursos/urbanismoEInfraestructura/sedesWifi/sedesWifi-25830.geojson',
type: 'json',
success: function (r) {
// eval pode incomodar, verificar isso para evitar problemas, mas feito assim para testes
//EPSG::3857
//console.log(r);
//console.log(new ol.format.GeoJSON().readProjection(r));
var feats = (new ol.format.GeoJSON()).readFeatures(r);
//I've tried to use featureProjection and dataProjection with no luck
source.reportError = true;
source.addFeatures(feats);
}
});
});
</script>
Best Answer
Ok, i got it what was wrong, the GEOJson provided had one or more features without or something wrong with geometry information. The strange thing is when I did my way it not throwed any exception at all. But OL has a more straightforward way to do it, that's actually:
When using this method, if GeoJson has one of the collection items with invalid geometry it throws an error (example provided throws it, I tested with mine that hasn't). So I found that is relative easy to reproject since you know what method use and has a complete valid GeoJson. But I think OL4 could be more fault tolerant and only not render that invalid feature or something. Should I fill a bug? Or does anyone knows how to validate a GeoJson or an option that could do that? I searched with no luck.
Well, anyway, this is the right way (for projections other than 3857 and 4326 you need to include proj4).