From bdb326c3107477954705ccda50e0b0bb157a8296 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Fri, 3 Apr 2015 22:15:55 +0200 Subject: [PATCH] Port vector examples to new vector API --- examples_src/box-selection.js | 9 +- examples_src/center.js | 9 +- examples_src/earthquake-clusters.js | 9 +- examples_src/export-map.js | 9 +- examples_src/geojson.js | 158 +++++++++++------------ examples_src/gpx.js | 8 +- examples_src/heatmap-earthquakes.js | 9 +- examples_src/igc.js | 31 +++-- examples_src/image-vector-layer.js | 9 +- examples_src/kml-earthquakes.js | 9 +- examples_src/kml-timezones.js | 9 +- examples_src/kml.js | 8 +- examples_src/modify-features.js | 9 +- examples_src/modify-test.js | 188 ++++++++++++++-------------- examples_src/polygon-styles.js | 89 ++++++------- examples_src/select-features.js | 9 +- examples_src/sphere-mollweide.js | 9 +- examples_src/topojson.html | 2 +- examples_src/topojson.js | 9 +- examples_src/vector-labels.js | 21 ++-- examples_src/vector-layer.js | 1 + examples_src/vector-osm.js | 16 +-- examples_src/vector-wfs.js | 25 ++-- src/ol/loadingstrategy.js | 2 +- 24 files changed, 346 insertions(+), 311 deletions(-) diff --git a/examples_src/box-selection.js b/examples_src/box-selection.js index 5a7941e126..33af212a55 100644 --- a/examples_src/box-selection.js +++ b/examples_src/box-selection.js @@ -1,19 +1,20 @@ goog.require('ol.Map'); goog.require('ol.View'); goog.require('ol.events.condition'); +goog.require('ol.format.GeoJSON'); goog.require('ol.interaction.DragBox'); goog.require('ol.interaction.Select'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); -goog.require('ol.source.GeoJSON'); goog.require('ol.source.OSM'); +goog.require('ol.source.Vector'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); -var vectorSource = new ol.source.GeoJSON({ - projection: 'EPSG:3857', - url: 'data/geojson/countries.geojson' +var vectorSource = new ol.source.Vector({ + url: 'data/geojson/countries.geojson', + format: new ol.format.GeoJSON() }); diff --git a/examples_src/center.js b/examples_src/center.js index 2c63b99bf8..c154b19ebf 100644 --- a/examples_src/center.js +++ b/examples_src/center.js @@ -1,20 +1,21 @@ goog.require('ol.Map'); goog.require('ol.View'); goog.require('ol.control'); +goog.require('ol.format.GeoJSON'); goog.require('ol.geom.Point'); goog.require('ol.geom.SimpleGeometry'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); -goog.require('ol.source.GeoJSON'); goog.require('ol.source.OSM'); +goog.require('ol.source.Vector'); goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); -var source = new ol.source.GeoJSON({ - projection: 'EPSG:3857', - url: 'data/geojson/switzerland.geojson' +var source = new ol.source.Vector({ + url: 'data/geojson/switzerland.geojson', + format: new ol.format.GeoJSON() }); var style = new ol.style.Style({ fill: new ol.style.Fill({ diff --git a/examples_src/earthquake-clusters.js b/examples_src/earthquake-clusters.js index 0850960250..17c8f5ef66 100644 --- a/examples_src/earthquake-clusters.js +++ b/examples_src/earthquake-clusters.js @@ -1,13 +1,14 @@ goog.require('ol.Map'); goog.require('ol.View'); goog.require('ol.extent'); +goog.require('ol.format.KML'); goog.require('ol.interaction'); goog.require('ol.interaction.Select'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); goog.require('ol.source.Cluster'); -goog.require('ol.source.KML'); goog.require('ol.source.Stamen'); +goog.require('ol.source.Vector'); goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.RegularShape'); @@ -122,10 +123,10 @@ function selectStyleFunction(feature, resolution) { var vector = new ol.layer.Vector({ source: new ol.source.Cluster({ distance: 40, - source: new ol.source.KML({ + source: new ol.source.Vector({ extractStyles: false, - projection: 'EPSG:3857', - url: 'data/kml/2012_Earthquakes_Mag5.kml' + url: 'data/kml/2012_Earthquakes_Mag5.kml', + format: new ol.format.KML() }) }), style: styleFunction diff --git a/examples_src/export-map.js b/examples_src/export-map.js index f55f940a53..4b22a09ce8 100644 --- a/examples_src/export-map.js +++ b/examples_src/export-map.js @@ -1,10 +1,11 @@ goog.require('ol.Map'); goog.require('ol.View'); goog.require('ol.control'); +goog.require('ol.format.GeoJSON'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); -goog.require('ol.source.GeoJSON'); goog.require('ol.source.OSM'); +goog.require('ol.source.Vector'); var map = new ol.Map({ layers: [ @@ -12,9 +13,9 @@ var map = new ol.Map({ source: new ol.source.OSM() }), new ol.layer.Vector({ - source: new ol.source.GeoJSON({ - projection: 'EPSG:3857', - url: 'data/geojson/countries.geojson' + source: new ol.source.Vector({ + url: 'data/geojson/countries.geojson', + format: new ol.format.GeoJSON() }) }) ], diff --git a/examples_src/geojson.js b/examples_src/geojson.js index 4674cf4a33..6d7ce5d26f 100644 --- a/examples_src/geojson.js +++ b/examples_src/geojson.js @@ -2,11 +2,12 @@ goog.require('ol.Feature'); goog.require('ol.Map'); goog.require('ol.View'); goog.require('ol.control'); +goog.require('ol.format.GeoJSON'); goog.require('ol.geom.Circle'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); -goog.require('ol.source.GeoJSON'); goog.require('ol.source.OSM'); +goog.require('ol.source.Vector'); goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); @@ -88,91 +89,92 @@ var styleFunction = function(feature, resolution) { return styles[feature.getGeometry().getType()]; }; -var vectorSource = new ol.source.GeoJSON( - /** @type {olx.source.GeoJSONOptions} */ ({ - object: { - 'type': 'FeatureCollection', - 'crs': { - 'type': 'name', - 'properties': { - 'name': 'EPSG:3857' - } - }, - 'features': [ +var geojsonObject = { + 'type': 'FeatureCollection', + 'crs': { + 'type': 'name', + 'properties': { + 'name': 'EPSG:3857' + } + }, + 'features': [ + { + 'type': 'Feature', + 'geometry': { + 'type': 'Point', + 'coordinates': [0, 0] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'LineString', + 'coordinates': [[4e6, -2e6], [8e6, 2e6]] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'LineString', + 'coordinates': [[4e6, 2e6], [8e6, -2e6]] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'Polygon', + 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'MultiLineString', + 'coordinates': [ + [[-1e6, -7.5e5], [-1e6, 7.5e5]], + [[1e6, -7.5e5], [1e6, 7.5e5]], + [[-7.5e5, -1e6], [7.5e5, -1e6]], + [[-7.5e5, 1e6], [7.5e5, 1e6]] + ] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'MultiPolygon', + 'coordinates': [ + [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]], + [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]], + [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]] + ] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'GeometryCollection', + 'geometries': [ { - 'type': 'Feature', - 'geometry': { - 'type': 'Point', - 'coordinates': [0, 0] - } + 'type': 'LineString', + 'coordinates': [[-5e6, -5e6], [0, -5e6]] }, { - 'type': 'Feature', - 'geometry': { - 'type': 'LineString', - 'coordinates': [[4e6, -2e6], [8e6, 2e6]] - } + 'type': 'Point', + 'coordinates': [4e6, -5e6] }, { - 'type': 'Feature', - 'geometry': { - 'type': 'LineString', - 'coordinates': [[4e6, 2e6], [8e6, -2e6]] - } - }, - { - 'type': 'Feature', - 'geometry': { - 'type': 'Polygon', - 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]] - } - }, - { - 'type': 'Feature', - 'geometry': { - 'type': 'MultiLineString', - 'coordinates': [ - [[-1e6, -7.5e5], [-1e6, 7.5e5]], - [[1e6, -7.5e5], [1e6, 7.5e5]], - [[-7.5e5, -1e6], [7.5e5, -1e6]], - [[-7.5e5, 1e6], [7.5e5, 1e6]] - ] - } - }, - { - 'type': 'Feature', - 'geometry': { - 'type': 'MultiPolygon', - 'coordinates': [ - [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]], - [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]], - [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]] - ] - } - }, - { - 'type': 'Feature', - 'geometry': { - 'type': 'GeometryCollection', - 'geometries': [ - { - 'type': 'LineString', - 'coordinates': [[-5e6, -5e6], [0, -5e6]] - }, - { - 'type': 'Point', - 'coordinates': [4e6, -5e6] - }, - { - 'type': 'Polygon', - 'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]] - } - ] - } + 'type': 'Polygon', + 'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]] } ] } - })); + } + ] +}; + +var vectorSource = new ol.source.Vector({ + features: (new ol.format.GeoJSON()).readFeatures(geojsonObject) +}); vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6))); diff --git a/examples_src/gpx.js b/examples_src/gpx.js index d98dceba31..02257ad9b8 100644 --- a/examples_src/gpx.js +++ b/examples_src/gpx.js @@ -5,7 +5,7 @@ goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); goog.require('ol.proj'); goog.require('ol.source.BingMaps'); -goog.require('ol.source.GPX'); +goog.require('ol.source.Vector'); goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); @@ -48,9 +48,9 @@ var style = { }; var vector = new ol.layer.Vector({ - source: new ol.source.GPX({ - projection: projection, - url: 'data/gpx/fells_loop.gpx' + source: new ol.source.Vector({ + url: 'data/gpx/fells_loop.gpx', + format: new ol.format.GPX() }), style: function(feature, resolution) { return style[feature.getGeometry().getType()]; diff --git a/examples_src/heatmap-earthquakes.js b/examples_src/heatmap-earthquakes.js index 277ed7fbe3..e93509658c 100644 --- a/examples_src/heatmap-earthquakes.js +++ b/examples_src/heatmap-earthquakes.js @@ -1,18 +1,19 @@ goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.format.KML'); goog.require('ol.layer.Heatmap'); goog.require('ol.layer.Tile'); -goog.require('ol.source.KML'); goog.require('ol.source.Stamen'); +goog.require('ol.source.Vector'); var blur = $('#blur'); var radius = $('#radius'); var vector = new ol.layer.Heatmap({ - source: new ol.source.KML({ + source: new ol.source.Vector({ extractStyles: false, - projection: 'EPSG:3857', - url: 'data/kml/2012_Earthquakes_Mag5.kml' + url: 'data/kml/2012_Earthquakes_Mag5.kml', + format: new ol.format.KML() }), blur: parseInt(blur.val(), 10), radius: parseInt(radius.val(), 10) diff --git a/examples_src/igc.js b/examples_src/igc.js index 95b380dc1e..4b023bd3e1 100644 --- a/examples_src/igc.js +++ b/examples_src/igc.js @@ -4,12 +4,13 @@ goog.require('ol.FeatureOverlay'); goog.require('ol.Map'); goog.require('ol.View'); goog.require('ol.control'); +goog.require('ol.format.IGC'); goog.require('ol.geom.LineString'); goog.require('ol.geom.Point'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); -goog.require('ol.source.IGC'); goog.require('ol.source.OSM'); +goog.require('ol.source.Vector'); goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); @@ -40,16 +41,24 @@ var styleFunction = function(feature, resolution) { return styleArray; }; -var vectorSource = new ol.source.IGC({ - projection: 'EPSG:3857', - urls: [ - 'data/igc/Clement-Latour.igc', - 'data/igc/Damien-de-Baenst.igc', - 'data/igc/Sylvain-Dhonneur.igc', - 'data/igc/Tom-Payne.igc', - 'data/igc/Ulrich-Prinz.igc' - ] -}); +var vectorSource = new ol.source.Vector(); + +var igcUrls = [ + 'data/igc/Clement-Latour.igc', + 'data/igc/Damien-de-Baenst.igc', + 'data/igc/Sylvain-Dhonneur.igc', + 'data/igc/Tom-Payne.igc', + 'data/igc/Ulrich-Prinz.igc' +]; + +var igcFormat = new ol.format.IGC(); +for (var i = 0; i < igcUrls.length; ++i) { + $.ajax(igcUrls[i]).then(function(data) { + var features = igcFormat.readFeatures(data, + {featureProjection: 'EPSG:3857'}); + vectorSource.addFeatures(features); + }); +} var time = { start: Infinity, diff --git a/examples_src/image-vector-layer.js b/examples_src/image-vector-layer.js index 6cf67e6450..6e7eaf352b 100644 --- a/examples_src/image-vector-layer.js +++ b/examples_src/image-vector-layer.js @@ -1,11 +1,12 @@ goog.require('ol.FeatureOverlay'); goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.format.GeoJSON'); goog.require('ol.layer.Image'); goog.require('ol.layer.Tile'); -goog.require('ol.source.GeoJSON'); goog.require('ol.source.ImageVector'); goog.require('ol.source.MapQuest'); +goog.require('ol.source.Vector'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); @@ -18,9 +19,9 @@ var map = new ol.Map({ }), new ol.layer.Image({ source: new ol.source.ImageVector({ - source: new ol.source.GeoJSON({ - projection: 'EPSG:3857', - url: 'data/geojson/countries.geojson' + source: new ol.source.Vector({ + url: 'data/geojson/countries.geojson', + format: new ol.format.GeoJSON() }), style: new ol.style.Style({ fill: new ol.style.Fill({ diff --git a/examples_src/kml-earthquakes.js b/examples_src/kml-earthquakes.js index 10ae729347..1844d77069 100644 --- a/examples_src/kml-earthquakes.js +++ b/examples_src/kml-earthquakes.js @@ -1,9 +1,10 @@ goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.format.KML'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); -goog.require('ol.source.KML'); goog.require('ol.source.Stamen'); +goog.require('ol.source.Vector'); goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); @@ -38,10 +39,10 @@ var styleFunction = function(feature, resolution) { }; var vector = new ol.layer.Vector({ - source: new ol.source.KML({ + source: new ol.source.Vector({ extractStyles: false, - projection: 'EPSG:3857', - url: 'data/kml/2012_Earthquakes_Mag5.kml' + url: 'data/kml/2012_Earthquakes_Mag5.kml', + format: new ol.format.KML() }), style: styleFunction }); diff --git a/examples_src/kml-timezones.js b/examples_src/kml-timezones.js index 8b8038e167..0683480d5d 100644 --- a/examples_src/kml-timezones.js +++ b/examples_src/kml-timezones.js @@ -1,9 +1,10 @@ goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.format.KML'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); -goog.require('ol.source.KML'); goog.require('ol.source.Stamen'); +goog.require('ol.source.Vector'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); @@ -45,10 +46,10 @@ var styleFunction = function(feature, resolution) { }; var vector = new ol.layer.Vector({ - source: new ol.source.KML({ + source: new ol.source.Vector({ extractStyles: false, - projection: 'EPSG:3857', - url: 'data/kml/timezones.kml' + url: 'data/kml/timezones.kml', + format: new ol.format.KML() }), style: styleFunction }); diff --git a/examples_src/kml.js b/examples_src/kml.js index 33236288f3..90eae50ea1 100644 --- a/examples_src/kml.js +++ b/examples_src/kml.js @@ -5,7 +5,7 @@ goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); goog.require('ol.proj'); goog.require('ol.source.BingMaps'); -goog.require('ol.source.KML'); +goog.require('ol.source.Vector'); var projection = ol.proj.get('EPSG:3857'); @@ -17,9 +17,9 @@ var raster = new ol.layer.Tile({ }); var vector = new ol.layer.Vector({ - source: new ol.source.KML({ - projection: projection, - url: 'data/kml/2012-02-10.kml' + source: new ol.source.Vector({ + url: 'data/kml/2012-02-10.kml', + format: new ol.format.KML() }) }); diff --git a/examples_src/modify-features.js b/examples_src/modify-features.js index d3b6948502..90709d6a8b 100644 --- a/examples_src/modify-features.js +++ b/examples_src/modify-features.js @@ -1,12 +1,13 @@ goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.format.GeoJSON'); goog.require('ol.interaction'); goog.require('ol.interaction.Modify'); goog.require('ol.interaction.Select'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); -goog.require('ol.source.GeoJSON'); goog.require('ol.source.MapQuest'); +goog.require('ol.source.Vector'); var raster = new ol.layer.Tile({ @@ -16,9 +17,9 @@ var raster = new ol.layer.Tile({ }); var vector = new ol.layer.Vector({ - source: new ol.source.GeoJSON({ - projection: 'EPSG:3857', - url: 'data/geojson/countries.geojson' + source: new ol.source.Vector({ + url: 'data/geojson/countries.geojson', + format: new ol.format.GeoJSON() }) }); diff --git a/examples_src/modify-test.js b/examples_src/modify-test.js index 1d88793c46..795932f902 100644 --- a/examples_src/modify-test.js +++ b/examples_src/modify-test.js @@ -1,10 +1,11 @@ goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.format.GeoJSON'); goog.require('ol.interaction'); goog.require('ol.interaction.Modify'); goog.require('ol.interaction.Select'); goog.require('ol.layer.Vector'); -goog.require('ol.source.GeoJSON'); +goog.require('ol.source.Vector'); goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); @@ -60,106 +61,107 @@ var styleFunction = (function() { /* jshint +W069 */ })(); -var source = new ol.source.GeoJSON( - /** @type {olx.source.GeoJSONOptions} */ ({ - object: { - 'type': 'FeatureCollection', - 'crs': { - 'type': 'name', - 'properties': { - 'name': 'EPSG:3857' - } - }, - 'features': [ +var geojsonObject = { + 'type': 'FeatureCollection', + 'crs': { + 'type': 'name', + 'properties': { + 'name': 'EPSG:3857' + } + }, + 'features': [ + { + 'type': 'Feature', + 'geometry': { + 'type': 'Point', + 'coordinates': [0, 0] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'MultiPoint', + 'coordinates': [[-2e6, 0], [0, -2e6]] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'LineString', + 'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'LineString', + 'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'Polygon', + 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], + [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6], + [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'MultiLineString', + 'coordinates': [ + [[-1e6, -7.5e5], [-1e6, 7.5e5]], + [[-1e6, -7.5e5], [-1e6, 7.5e5], [-5e5, 0], [-1e6, -7.5e5]], + [[1e6, -7.5e5], [15e5, 0], [15e5, 0], [1e6, 7.5e5]], + [[-7.5e5, -1e6], [7.5e5, -1e6]], + [[-7.5e5, 1e6], [7.5e5, 1e6]] + ] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'MultiPolygon', + 'coordinates': [ + [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], + [-3e6, 6e6], [-5e6, 6e6]]], + [[[-3e6, 6e6], [-2e6, 8e6], [0, 8e6], + [0, 6e6], [-3e6, 6e6]]], + [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], + [3e6, 6e6], [1e6, 6e6]]] + ] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'GeometryCollection', + 'geometries': [ { - 'type': 'Feature', - 'geometry': { - 'type': 'Point', - 'coordinates': [0, 0] - } + 'type': 'LineString', + 'coordinates': [[-5e6, -5e6], [0, -5e6]] }, { - 'type': 'Feature', - 'geometry': { - 'type': 'MultiPoint', - 'coordinates': [[-2e6, 0], [0, -2e6]] - } + 'type': 'Point', + 'coordinates': [4e6, -5e6] }, { - 'type': 'Feature', - 'geometry': { - 'type': 'LineString', - 'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]] - } - }, - { - 'type': 'Feature', - 'geometry': { - 'type': 'LineString', - 'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]] - } - }, - { - 'type': 'Feature', - 'geometry': { - 'type': 'Polygon', - 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], - [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6], - [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]] - } - }, - { - 'type': 'Feature', - 'geometry': { - 'type': 'MultiLineString', - 'coordinates': [ - [[-1e6, -7.5e5], [-1e6, 7.5e5]], - [[-1e6, -7.5e5], [-1e6, 7.5e5], [-5e5, 0], [-1e6, -7.5e5]], - [[1e6, -7.5e5], [15e5, 0], [15e5, 0], [1e6, 7.5e5]], - [[-7.5e5, -1e6], [7.5e5, -1e6]], - [[-7.5e5, 1e6], [7.5e5, 1e6]] - ] - } - }, - { - 'type': 'Feature', - 'geometry': { - 'type': 'MultiPolygon', - 'coordinates': [ - [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], - [-3e6, 6e6], [-5e6, 6e6]]], - [[[-3e6, 6e6], [-2e6, 8e6], [0, 8e6], - [0, 6e6], [-3e6, 6e6]]], - [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], - [3e6, 6e6], [1e6, 6e6]]] - ] - } - }, - { - 'type': 'Feature', - 'geometry': { - 'type': 'GeometryCollection', - 'geometries': [ - { - 'type': 'LineString', - 'coordinates': [[-5e6, -5e6], [0, -5e6]] - }, - { - 'type': 'Point', - 'coordinates': [4e6, -5e6] - }, - { - 'type': 'Polygon', - 'coordinates': [ - [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]] - ] - } - ] - } + 'type': 'Polygon', + 'coordinates': [ + [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]] + ] } ] } - })); + } + ] +}; + +var source = new ol.source.Vector({ + features: (new ol.format.GeoJSON()).readFeatures(geojsonObject) +}); var layer = new ol.layer.Vector({ source: source, diff --git a/examples_src/polygon-styles.js b/examples_src/polygon-styles.js index 70d18b1510..550f5465b8 100644 --- a/examples_src/polygon-styles.js +++ b/examples_src/polygon-styles.js @@ -1,8 +1,9 @@ goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.format.GeoJSON'); goog.require('ol.geom.MultiPoint'); goog.require('ol.layer.Vector'); -goog.require('ol.source.GeoJSON'); +goog.require('ol.source.Vector'); goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); @@ -40,51 +41,53 @@ var styles = [ }) ]; -var source = new ol.source.GeoJSON(/** @type {olx.source.GeoJSONOptions} */ ({ - object: { - 'type': 'FeatureCollection', - 'crs': { - 'type': 'name', - 'properties': { - 'name': 'EPSG:3857' +var geojsonObject = { + 'type': 'FeatureCollection', + 'crs': { + 'type': 'name', + 'properties': { + 'name': 'EPSG:3857' + } + }, + 'features': [ + { + 'type': 'Feature', + 'geometry': { + 'type': 'Polygon', + 'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], + [-3e6, 6e6], [-5e6, 6e6]]] } }, - 'features': [ - { - 'type': 'Feature', - 'geometry': { - 'type': 'Polygon', - 'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], - [-3e6, 6e6], [-5e6, 6e6]]] - } - }, - { - 'type': 'Feature', - 'geometry': { - 'type': 'Polygon', - 'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], - [0, 6e6], [-2e6, 6e6]]] - } - }, - { - 'type': 'Feature', - 'geometry': { - 'type': 'Polygon', - 'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], - [3e6, 6e6], [1e6, 6e6]]] - } - }, - { - 'type': 'Feature', - 'geometry': { - 'type': 'Polygon', - 'coordinates': [[[-2e6, -1e6], [-1e6, 1e6], - [0, -1e6], [-2e6, -1e6]]] - } + { + 'type': 'Feature', + 'geometry': { + 'type': 'Polygon', + 'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], + [0, 6e6], [-2e6, 6e6]]] } - ] - } -})); + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'Polygon', + 'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], + [3e6, 6e6], [1e6, 6e6]]] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'Polygon', + 'coordinates': [[[-2e6, -1e6], [-1e6, 1e6], + [0, -1e6], [-2e6, -1e6]]] + } + } + ] +}; + +var source = new ol.source.Vector({ + features: (new ol.format.GeoJSON()).readFeatures(geojsonObject) +}); var layer = new ol.layer.Vector({ source: source, diff --git a/examples_src/select-features.js b/examples_src/select-features.js index 15514d6f05..c59d0893d2 100644 --- a/examples_src/select-features.js +++ b/examples_src/select-features.js @@ -1,20 +1,21 @@ goog.require('ol.Map'); goog.require('ol.View'); goog.require('ol.events.condition'); +goog.require('ol.format.GeoJSON'); goog.require('ol.interaction.Select'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); -goog.require('ol.source.GeoJSON'); goog.require('ol.source.MapQuest'); +goog.require('ol.source.Vector'); var raster = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }); var vector = new ol.layer.Vector({ - source: new ol.source.GeoJSON({ - projection: 'EPSG:3857', - url: 'data/geojson/countries.geojson' + source: new ol.source.Vector({ + url: 'data/geojson/countries.geojson', + format: new ol.format.GeoJSON() }) }); diff --git a/examples_src/sphere-mollweide.js b/examples_src/sphere-mollweide.js index d15affded3..232c75ae53 100644 --- a/examples_src/sphere-mollweide.js +++ b/examples_src/sphere-mollweide.js @@ -1,9 +1,10 @@ goog.require('ol.Graticule'); goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.format.GeoJSON'); goog.require('ol.layer.Vector'); goog.require('ol.proj.Projection'); -goog.require('ol.source.GeoJSON'); +goog.require('ol.source.Vector'); proj4.defs('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' + @@ -22,9 +23,9 @@ var map = new ol.Map({ keyboardEventTarget: document, layers: [ new ol.layer.Vector({ - source: new ol.source.GeoJSON({ - projection: sphereMollweideProjection, - url: 'data/geojson/countries-110m.geojson' + source: new ol.source.Vector({ + url: 'data/geojson/countries-110m.geojson', + format: new ol.format.GeoJSON() }) }) ], diff --git a/examples_src/topojson.html b/examples_src/topojson.html index c88ffe2598..1b233d183b 100644 --- a/examples_src/topojson.html +++ b/examples_src/topojson.html @@ -3,7 +3,7 @@ template: example.html title: TopoJSON example shortdesc: Demonstrates rendering of features from a TopoJSON topology. docs: > - This example uses a vector layer with a `ol.source.TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki). + This example uses a vector layer with `ol.format.TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki). tags: "topojson, vector, style" ---
diff --git a/examples_src/topojson.js b/examples_src/topojson.js index 827fa28c90..df0ff4075d 100644 --- a/examples_src/topojson.js +++ b/examples_src/topojson.js @@ -1,9 +1,10 @@ goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.format.TopoJSON'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); goog.require('ol.source.TileJSON'); -goog.require('ol.source.TopoJSON'); +goog.require('ol.source.Vector'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); @@ -26,9 +27,9 @@ var styleArray = [new ol.style.Style({ })]; var vector = new ol.layer.Vector({ - source: new ol.source.TopoJSON({ - projection: 'EPSG:3857', - url: 'data/topojson/world-110m.json' + source: new ol.source.Vector({ + url: 'data/topojson/world-110m.json', + format: new ol.format.TopoJSON() }), style: function(feature, resolution) { // don't want to render the full world polygon, which repeats all countries diff --git a/examples_src/vector-labels.js b/examples_src/vector-labels.js index cd89a31e14..3dcb9acbc0 100644 --- a/examples_src/vector-labels.js +++ b/examples_src/vector-labels.js @@ -1,10 +1,11 @@ goog.require('ol.Feature'); goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.format.GeoJSON'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); -goog.require('ol.source.GeoJSON'); goog.require('ol.source.MapQuest'); +goog.require('ol.source.Vector'); goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); @@ -124,9 +125,9 @@ var createPolygonStyleFunction = function() { }; var vectorPolygons = new ol.layer.Vector({ - source: new ol.source.GeoJSON({ - projection: 'EPSG:3857', - url: 'data/geojson/polygon-samples.geojson' + source: new ol.source.Vector({ + url: 'data/geojson/polygon-samples.geojson', + format: new ol.format.GeoJSON() }), style: createPolygonStyleFunction() }); @@ -147,9 +148,9 @@ var createLineStyleFunction = function() { }; var vectorLines = new ol.layer.Vector({ - source: new ol.source.GeoJSON({ - projection: 'EPSG:3857', - url: 'data/geojson/line-samples.geojson' + source: new ol.source.Vector({ + url: 'data/geojson/line-samples.geojson', + format: new ol.format.GeoJSON() }), style: createLineStyleFunction() }); @@ -171,9 +172,9 @@ var createPointStyleFunction = function() { }; var vectorPoints = new ol.layer.Vector({ - source: new ol.source.GeoJSON({ - projection: 'EPSG:3857', - url: 'data/geojson/point-samples.geojson' + source: new ol.source.Vector({ + url: 'data/geojson/point-samples.geojson', + format: new ol.format.GeoJSON() }), style: createPointStyleFunction() }); diff --git a/examples_src/vector-layer.js b/examples_src/vector-layer.js index 633825e3b2..25faeca41f 100644 --- a/examples_src/vector-layer.js +++ b/examples_src/vector-layer.js @@ -5,6 +5,7 @@ goog.require('ol.format.GeoJSON'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); goog.require('ol.source.MapQuest'); +goog.require('ol.source.Vector'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); diff --git a/examples_src/vector-osm.js b/examples_src/vector-osm.js index d724b24320..eb1f5659a1 100644 --- a/examples_src/vector-osm.js +++ b/examples_src/vector-osm.js @@ -7,7 +7,7 @@ goog.require('ol.layer.Vector'); goog.require('ol.loadingstrategy'); goog.require('ol.proj'); goog.require('ol.source.BingMaps'); -goog.require('ol.source.ServerVector'); +goog.require('ol.source.Vector'); goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); @@ -88,21 +88,23 @@ var styles = { } }; -var vectorSource = new ol.source.ServerVector({ - format: new ol.format.OSMXML(), +var osmxmlFormat = new ol.format.OSMXML(); + +var vectorSource = new ol.source.Vector({ loader: function(extent, resolution, projection) { var epsg4326Extent = ol.proj.transformExtent(extent, projection, 'EPSG:4326'); var url = 'http://overpass-api.de/api/xapi?map?bbox=' + epsg4326Extent.join(','); $.ajax(url).then(function(response) { - vectorSource.addFeatures(vectorSource.readFeatures(response)); + var features = osmxmlFormat.readFeatures(response, + {featureProjection: projection}); + vectorSource.addFeatures(features); }); }, - strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({ + strategy: ol.loadingstrategy.tile(new ol.tilegrid.XYZ({ maxZoom: 19 - })), - projection: 'EPSG:3857' + })) }); var vector = new ol.layer.Vector({ diff --git a/examples_src/vector-wfs.js b/examples_src/vector-wfs.js index 30c2b9d2ef..47386c71d7 100644 --- a/examples_src/vector-wfs.js +++ b/examples_src/vector-wfs.js @@ -5,31 +5,34 @@ goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); goog.require('ol.loadingstrategy'); goog.require('ol.source.BingMaps'); -goog.require('ol.source.ServerVector'); +goog.require('ol.source.Vector'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); goog.require('ol.tilegrid.XYZ'); -var vectorSource = new ol.source.ServerVector({ - format: new ol.format.GeoJSON(), + +// format used to parse WFS GetFeature responses +var geojsonFormat = new ol.format.GeoJSON(); + +var vectorSource = new ol.source.Vector({ loader: function(extent, resolution, projection) { var url = 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' + 'version=1.1.0&request=GetFeature&typename=osm:water_areas&' + 'outputFormat=text/javascript&format_options=callback:loadFeatures' + '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857'; - $.ajax({ - url: url, - dataType: 'jsonp' - }); + // use jsonp: false to prevent jQuery from adding the "callback" + // parameter to the URL + $.ajax({url: url, dataType: 'jsonp', jsonp: false}); }, - strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({ + strategy: ol.loadingstrategy.tile(new ol.tilegrid.XYZ({ maxZoom: 19 - })), - projection: 'EPSG:3857' + })) }); +// the global function whose name is specified in the URL of JSONP WFS +// GetFeature requests var loadFeatures = function(response) { - vectorSource.addFeatures(vectorSource.readFeatures(response)); + vectorSource.addFeatures(geojsonFormat.readFeatures(response)); }; var vector = new ol.layer.Vector({ diff --git a/src/ol/loadingstrategy.js b/src/ol/loadingstrategy.js index 1437d29c7b..4ea28cad39 100644 --- a/src/ol/loadingstrategy.js +++ b/src/ol/loadingstrategy.js @@ -41,7 +41,7 @@ ol.loadingstrategy.bbox = function(extent, resolution) { * @return {function(ol.Extent, number): Array.} Loading strategy. * @api */ -ol.loadingstrategy.createTile = function(tileGrid) { +ol.loadingstrategy.tile = function(tileGrid) { return ( /** * @param {ol.Extent} extent Extent.