Im using gpx data to display routes with open layers 3 and my attempts of zooming to fit the gps trace have been thus far unsuccessful. I only ever got it working in debug mode on firefox, where it always zooms correctly, however when just loading the web page nothing happens. Also when drag-dropping a gpx file on the maps the zoom works again, but the same code without projection transformation does not work when displaying the original gpx without the dragAndDropInteraction interaction.
Here is the code snippet that is supposed to make the map zoom to fit the trace:
//fit view var extent = vector.getSource().getExtent(); var mapProjection = map.getView().getProjection(); ConvertedExtent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326'); mapSize = map.getSize(); map.getView().fitExtent(extent, mapSize);After calling .getSource().getExtent() the extent array contains the following: [1215055.5815933049, 6137851.406357965, 1286274.229579136, 6175156.521239913]which I transform to: [10.91503, 48.185981, 11.554798, 48.40892199999999]
In Chrome for some reasion the extent array contains infinite values: extent = [ Infinity Infinity -Infinity -Infinity]
function CreateDriveMap(urlToXml){ var transformedCenter = ol.proj.transform(centerPos, 'EPSG:4326', 'EPSG:3857'); // PROJECTION var projection = ol.proj.get('EPSG:3857'); // SOURCE var source = new ol.source.OSM(); // TILE // layer sources that provide pre-rendered, tiled images in grids // that are organized by zoom levels for specific resolutions. layer = new ol.layer.Tile({ source: source, name: 'OpenStreetMap' }); // VIEW view = new ol.View({ center: transformedCenter, zoom: 5 }); // STYLE var style = { 'Point': [new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: 'rgba(255,255,0,0.4)' }), radius: 2, stroke: new ol.style.Stroke({ color: '#f00', width: 1 }) }) })], 'MultiPoint': [new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: 'rgba(255,0,255,0.5)' }), radius: 5, stroke: new ol.style.Stroke({ color: '#f0f', width: 1 }) }) })], 'LineString': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(255,0,0,0.7)', width: '3' }) })], 'MultiLineString': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#0f0', width: 'rgba(255,0,0,0.7)' }) })], 'Polygon': [new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0,255,255,0.5)' }), stroke: new ol.style.Stroke({ color: '#0ff', width: 1 }) })], 'MultiPolygon': [new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0,0,255,0.5)' }), stroke: new ol.style.Stroke({ color: '#00f', width: 1 }) })] }; // Style Function var styleFunction = function (feature, resolution) { var featureStyleFunction = feature.getStyleFunction(); if (featureStyleFunction) { return featureStyleFunction.call(feature, resolution); } else { return defaultStyle[feature.getGeometry().getType()]; } }; // GPX layer var vector = new ol.layer.Vector({ source: new ol.source.GPX({ projection: projection, url: urlToXml //'data/gpx/fells_loop.gpx' }), style: function (feature, resolution) { return style[feature.getGeometry().getType()]; } }); // CREATE MAP var map = new ol.Map({ // targeted div target: 'map', // the layers layers: [layer, vector], // the view view: view, //projection: new OpenLayers.Projection("EPSG:900913"), projection: projection // interactions //interactions: ol.interaction.defaults().extend([dragAndDropInteraction]) }); //var View = map.getView(); // View.fitExtent(vector.getExtent(), /* @type {ol.Size} */ (map.getSize())); // CENTER & PUT START MARKER, DOES NOT WORK // ol.Layer.events.register("loadend", vector, function () { // this.map.zoomToExtent(this.getDataExtent()); // var startPoint = this.features[0].geometry.components[0]; // layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y), icon)); //}); // Add controls var zoomslider = new ol.control.ZoomSlider(); map.addControl(zoomslider); var scaleLine = new ol.control.ScaleLine(); map.addControl(scaleLine); //FIT VIEW TO GPX var extent = vector.getSource().getExtent(); var mapProjection = map.getView().getProjection(); ConvertedExtent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326'); mapSize = map.getSize(); map.getView().fitExtent(extent, mapSize); // STYLE FUNCTION var stylefunction = function (feature, resolution) { var featurestylefunction = feature.getstylefunction(); if (featurestylefunction) { return featurestylefunction.call(feature, resolution); } else { return style[feature.getgeometry().gettype()]; } }; // DRAG & DROP var dragAndDropInteraction = new ol.interaction.DragAndDrop({ formatConstructors: [ ol.format.GPX, ol.format.GeoJSON, ol.format.IGC, ol.format.KML, ol.format.TopoJSON ] }); dragAndDropInteraction.on('addfeatures', function (event) { var vectorSource = new ol.source.Vector({ features: event.features, projection: event.projection }); map.getLayers().push(new ol.layer.Vector({ source: vectorSource, style: styleFunction })); var view = map.getView(); view.fitExtent( vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize())); });}I have combated this issue for quit a while without any result, so any help is appreciated!Thanks!
أكثر...
Here is the code snippet that is supposed to make the map zoom to fit the trace:
//fit view var extent = vector.getSource().getExtent(); var mapProjection = map.getView().getProjection(); ConvertedExtent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326'); mapSize = map.getSize(); map.getView().fitExtent(extent, mapSize);After calling .getSource().getExtent() the extent array contains the following: [1215055.5815933049, 6137851.406357965, 1286274.229579136, 6175156.521239913]which I transform to: [10.91503, 48.185981, 11.554798, 48.40892199999999]
In Chrome for some reasion the extent array contains infinite values: extent = [ Infinity Infinity -Infinity -Infinity]
function CreateDriveMap(urlToXml){ var transformedCenter = ol.proj.transform(centerPos, 'EPSG:4326', 'EPSG:3857'); // PROJECTION var projection = ol.proj.get('EPSG:3857'); // SOURCE var source = new ol.source.OSM(); // TILE // layer sources that provide pre-rendered, tiled images in grids // that are organized by zoom levels for specific resolutions. layer = new ol.layer.Tile({ source: source, name: 'OpenStreetMap' }); // VIEW view = new ol.View({ center: transformedCenter, zoom: 5 }); // STYLE var style = { 'Point': [new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: 'rgba(255,255,0,0.4)' }), radius: 2, stroke: new ol.style.Stroke({ color: '#f00', width: 1 }) }) })], 'MultiPoint': [new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: 'rgba(255,0,255,0.5)' }), radius: 5, stroke: new ol.style.Stroke({ color: '#f0f', width: 1 }) }) })], 'LineString': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(255,0,0,0.7)', width: '3' }) })], 'MultiLineString': [new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#0f0', width: 'rgba(255,0,0,0.7)' }) })], 'Polygon': [new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0,255,255,0.5)' }), stroke: new ol.style.Stroke({ color: '#0ff', width: 1 }) })], 'MultiPolygon': [new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0,0,255,0.5)' }), stroke: new ol.style.Stroke({ color: '#00f', width: 1 }) })] }; // Style Function var styleFunction = function (feature, resolution) { var featureStyleFunction = feature.getStyleFunction(); if (featureStyleFunction) { return featureStyleFunction.call(feature, resolution); } else { return defaultStyle[feature.getGeometry().getType()]; } }; // GPX layer var vector = new ol.layer.Vector({ source: new ol.source.GPX({ projection: projection, url: urlToXml //'data/gpx/fells_loop.gpx' }), style: function (feature, resolution) { return style[feature.getGeometry().getType()]; } }); // CREATE MAP var map = new ol.Map({ // targeted div target: 'map', // the layers layers: [layer, vector], // the view view: view, //projection: new OpenLayers.Projection("EPSG:900913"), projection: projection // interactions //interactions: ol.interaction.defaults().extend([dragAndDropInteraction]) }); //var View = map.getView(); // View.fitExtent(vector.getExtent(), /* @type {ol.Size} */ (map.getSize())); // CENTER & PUT START MARKER, DOES NOT WORK // ol.Layer.events.register("loadend", vector, function () { // this.map.zoomToExtent(this.getDataExtent()); // var startPoint = this.features[0].geometry.components[0]; // layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y), icon)); //}); // Add controls var zoomslider = new ol.control.ZoomSlider(); map.addControl(zoomslider); var scaleLine = new ol.control.ScaleLine(); map.addControl(scaleLine); //FIT VIEW TO GPX var extent = vector.getSource().getExtent(); var mapProjection = map.getView().getProjection(); ConvertedExtent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326'); mapSize = map.getSize(); map.getView().fitExtent(extent, mapSize); // STYLE FUNCTION var stylefunction = function (feature, resolution) { var featurestylefunction = feature.getstylefunction(); if (featurestylefunction) { return featurestylefunction.call(feature, resolution); } else { return style[feature.getgeometry().gettype()]; } }; // DRAG & DROP var dragAndDropInteraction = new ol.interaction.DragAndDrop({ formatConstructors: [ ol.format.GPX, ol.format.GeoJSON, ol.format.IGC, ol.format.KML, ol.format.TopoJSON ] }); dragAndDropInteraction.on('addfeatures', function (event) { var vectorSource = new ol.source.Vector({ features: event.features, projection: event.projection }); map.getLayers().push(new ol.layer.Vector({ source: vectorSource, style: styleFunction })); var view = map.getView(); view.fitExtent( vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize())); });}I have combated this issue for quit a while without any result, so any help is appreciated!Thanks!
أكثر...