Port vector examples to new vector API

This commit is contained in:
Éric Lemoine
2015-04-03 22:15:55 +02:00
parent 09b90c8424
commit bdb326c310
24 changed files with 346 additions and 311 deletions
+5 -4
View File
@@ -1,19 +1,20 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.events.condition'); goog.require('ol.events.condition');
goog.require('ol.format.GeoJSON');
goog.require('ol.interaction.DragBox'); goog.require('ol.interaction.DragBox');
goog.require('ol.interaction.Select'); goog.require('ol.interaction.Select');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON');
goog.require('ol.source.OSM'); goog.require('ol.source.OSM');
goog.require('ol.source.Vector');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
goog.require('ol.style.Style'); goog.require('ol.style.Style');
var vectorSource = new ol.source.GeoJSON({ var vectorSource = new ol.source.Vector({
projection: 'EPSG:3857', url: 'data/geojson/countries.geojson',
url: 'data/geojson/countries.geojson' format: new ol.format.GeoJSON()
}); });
+5 -4
View File
@@ -1,20 +1,21 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.control'); goog.require('ol.control');
goog.require('ol.format.GeoJSON');
goog.require('ol.geom.Point'); goog.require('ol.geom.Point');
goog.require('ol.geom.SimpleGeometry'); goog.require('ol.geom.SimpleGeometry');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON');
goog.require('ol.source.OSM'); goog.require('ol.source.OSM');
goog.require('ol.source.Vector');
goog.require('ol.style.Circle'); goog.require('ol.style.Circle');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
goog.require('ol.style.Style'); goog.require('ol.style.Style');
var source = new ol.source.GeoJSON({ var source = new ol.source.Vector({
projection: 'EPSG:3857', url: 'data/geojson/switzerland.geojson',
url: 'data/geojson/switzerland.geojson' format: new ol.format.GeoJSON()
}); });
var style = new ol.style.Style({ var style = new ol.style.Style({
fill: new ol.style.Fill({ fill: new ol.style.Fill({
+5 -4
View File
@@ -1,13 +1,14 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.extent'); goog.require('ol.extent');
goog.require('ol.format.KML');
goog.require('ol.interaction'); goog.require('ol.interaction');
goog.require('ol.interaction.Select'); goog.require('ol.interaction.Select');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.Cluster'); goog.require('ol.source.Cluster');
goog.require('ol.source.KML');
goog.require('ol.source.Stamen'); goog.require('ol.source.Stamen');
goog.require('ol.source.Vector');
goog.require('ol.style.Circle'); goog.require('ol.style.Circle');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.RegularShape'); goog.require('ol.style.RegularShape');
@@ -122,10 +123,10 @@ function selectStyleFunction(feature, resolution) {
var vector = new ol.layer.Vector({ var vector = new ol.layer.Vector({
source: new ol.source.Cluster({ source: new ol.source.Cluster({
distance: 40, distance: 40,
source: new ol.source.KML({ source: new ol.source.Vector({
extractStyles: false, 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 style: styleFunction
+5 -4
View File
@@ -1,10 +1,11 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.control'); goog.require('ol.control');
goog.require('ol.format.GeoJSON');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON');
goog.require('ol.source.OSM'); goog.require('ol.source.OSM');
goog.require('ol.source.Vector');
var map = new ol.Map({ var map = new ol.Map({
layers: [ layers: [
@@ -12,9 +13,9 @@ var map = new ol.Map({
source: new ol.source.OSM() source: new ol.source.OSM()
}), }),
new ol.layer.Vector({ new ol.layer.Vector({
source: new ol.source.GeoJSON({ source: new ol.source.Vector({
projection: 'EPSG:3857', url: 'data/geojson/countries.geojson',
url: 'data/geojson/countries.geojson' format: new ol.format.GeoJSON()
}) })
}) })
], ],
+80 -78
View File
@@ -2,11 +2,12 @@ goog.require('ol.Feature');
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.control'); goog.require('ol.control');
goog.require('ol.format.GeoJSON');
goog.require('ol.geom.Circle'); goog.require('ol.geom.Circle');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON');
goog.require('ol.source.OSM'); goog.require('ol.source.OSM');
goog.require('ol.source.Vector');
goog.require('ol.style.Circle'); goog.require('ol.style.Circle');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
@@ -88,91 +89,92 @@ var styleFunction = function(feature, resolution) {
return styles[feature.getGeometry().getType()]; return styles[feature.getGeometry().getType()];
}; };
var vectorSource = new ol.source.GeoJSON( var geojsonObject = {
/** @type {olx.source.GeoJSONOptions} */ ({ 'type': 'FeatureCollection',
object: { 'crs': {
'type': 'FeatureCollection', 'type': 'name',
'crs': { 'properties': {
'type': 'name', 'name': 'EPSG:3857'
'properties': { }
'name': 'EPSG:3857' },
} 'features': [
}, {
'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', 'type': 'LineString',
'geometry': { 'coordinates': [[-5e6, -5e6], [0, -5e6]]
'type': 'Point',
'coordinates': [0, 0]
}
}, },
{ {
'type': 'Feature', 'type': 'Point',
'geometry': { 'coordinates': [4e6, -5e6]
'type': 'LineString',
'coordinates': [[4e6, -2e6], [8e6, 2e6]]
}
}, },
{ {
'type': 'Feature', 'type': 'Polygon',
'geometry': { 'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
'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]]]
}
]
}
} }
] ]
} }
})); }
]
};
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))); vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
+4 -4
View File
@@ -5,7 +5,7 @@ goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.proj'); goog.require('ol.proj');
goog.require('ol.source.BingMaps'); goog.require('ol.source.BingMaps');
goog.require('ol.source.GPX'); goog.require('ol.source.Vector');
goog.require('ol.style.Circle'); goog.require('ol.style.Circle');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
@@ -48,9 +48,9 @@ var style = {
}; };
var vector = new ol.layer.Vector({ var vector = new ol.layer.Vector({
source: new ol.source.GPX({ source: new ol.source.Vector({
projection: projection, url: 'data/gpx/fells_loop.gpx',
url: 'data/gpx/fells_loop.gpx' format: new ol.format.GPX()
}), }),
style: function(feature, resolution) { style: function(feature, resolution) {
return style[feature.getGeometry().getType()]; return style[feature.getGeometry().getType()];
+5 -4
View File
@@ -1,18 +1,19 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.format.KML');
goog.require('ol.layer.Heatmap'); goog.require('ol.layer.Heatmap');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.source.KML');
goog.require('ol.source.Stamen'); goog.require('ol.source.Stamen');
goog.require('ol.source.Vector');
var blur = $('#blur'); var blur = $('#blur');
var radius = $('#radius'); var radius = $('#radius');
var vector = new ol.layer.Heatmap({ var vector = new ol.layer.Heatmap({
source: new ol.source.KML({ source: new ol.source.Vector({
extractStyles: false, 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), blur: parseInt(blur.val(), 10),
radius: parseInt(radius.val(), 10) radius: parseInt(radius.val(), 10)
+20 -11
View File
@@ -4,12 +4,13 @@ goog.require('ol.FeatureOverlay');
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.control'); goog.require('ol.control');
goog.require('ol.format.IGC');
goog.require('ol.geom.LineString'); goog.require('ol.geom.LineString');
goog.require('ol.geom.Point'); goog.require('ol.geom.Point');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.IGC');
goog.require('ol.source.OSM'); goog.require('ol.source.OSM');
goog.require('ol.source.Vector');
goog.require('ol.style.Circle'); goog.require('ol.style.Circle');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
@@ -40,16 +41,24 @@ var styleFunction = function(feature, resolution) {
return styleArray; return styleArray;
}; };
var vectorSource = new ol.source.IGC({ var vectorSource = new ol.source.Vector();
projection: 'EPSG:3857',
urls: [ var igcUrls = [
'data/igc/Clement-Latour.igc', 'data/igc/Clement-Latour.igc',
'data/igc/Damien-de-Baenst.igc', 'data/igc/Damien-de-Baenst.igc',
'data/igc/Sylvain-Dhonneur.igc', 'data/igc/Sylvain-Dhonneur.igc',
'data/igc/Tom-Payne.igc', 'data/igc/Tom-Payne.igc',
'data/igc/Ulrich-Prinz.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 = { var time = {
start: Infinity, start: Infinity,
+5 -4
View File
@@ -1,11 +1,12 @@
goog.require('ol.FeatureOverlay'); goog.require('ol.FeatureOverlay');
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.format.GeoJSON');
goog.require('ol.layer.Image'); goog.require('ol.layer.Image');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.source.GeoJSON');
goog.require('ol.source.ImageVector'); goog.require('ol.source.ImageVector');
goog.require('ol.source.MapQuest'); goog.require('ol.source.MapQuest');
goog.require('ol.source.Vector');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
goog.require('ol.style.Style'); goog.require('ol.style.Style');
@@ -18,9 +19,9 @@ var map = new ol.Map({
}), }),
new ol.layer.Image({ new ol.layer.Image({
source: new ol.source.ImageVector({ source: new ol.source.ImageVector({
source: new ol.source.GeoJSON({ source: new ol.source.Vector({
projection: 'EPSG:3857', url: 'data/geojson/countries.geojson',
url: 'data/geojson/countries.geojson' format: new ol.format.GeoJSON()
}), }),
style: new ol.style.Style({ style: new ol.style.Style({
fill: new ol.style.Fill({ fill: new ol.style.Fill({
+5 -4
View File
@@ -1,9 +1,10 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.format.KML');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.KML');
goog.require('ol.source.Stamen'); goog.require('ol.source.Stamen');
goog.require('ol.source.Vector');
goog.require('ol.style.Circle'); goog.require('ol.style.Circle');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
@@ -38,10 +39,10 @@ var styleFunction = function(feature, resolution) {
}; };
var vector = new ol.layer.Vector({ var vector = new ol.layer.Vector({
source: new ol.source.KML({ source: new ol.source.Vector({
extractStyles: false, 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 style: styleFunction
}); });
+5 -4
View File
@@ -1,9 +1,10 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.format.KML');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.KML');
goog.require('ol.source.Stamen'); goog.require('ol.source.Stamen');
goog.require('ol.source.Vector');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
goog.require('ol.style.Style'); goog.require('ol.style.Style');
@@ -45,10 +46,10 @@ var styleFunction = function(feature, resolution) {
}; };
var vector = new ol.layer.Vector({ var vector = new ol.layer.Vector({
source: new ol.source.KML({ source: new ol.source.Vector({
extractStyles: false, extractStyles: false,
projection: 'EPSG:3857', url: 'data/kml/timezones.kml',
url: 'data/kml/timezones.kml' format: new ol.format.KML()
}), }),
style: styleFunction style: styleFunction
}); });
+4 -4
View File
@@ -5,7 +5,7 @@ goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.proj'); goog.require('ol.proj');
goog.require('ol.source.BingMaps'); goog.require('ol.source.BingMaps');
goog.require('ol.source.KML'); goog.require('ol.source.Vector');
var projection = ol.proj.get('EPSG:3857'); var projection = ol.proj.get('EPSG:3857');
@@ -17,9 +17,9 @@ var raster = new ol.layer.Tile({
}); });
var vector = new ol.layer.Vector({ var vector = new ol.layer.Vector({
source: new ol.source.KML({ source: new ol.source.Vector({
projection: projection, url: 'data/kml/2012-02-10.kml',
url: 'data/kml/2012-02-10.kml' format: new ol.format.KML()
}) })
}); });
+5 -4
View File
@@ -1,12 +1,13 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.format.GeoJSON');
goog.require('ol.interaction'); goog.require('ol.interaction');
goog.require('ol.interaction.Modify'); goog.require('ol.interaction.Modify');
goog.require('ol.interaction.Select'); goog.require('ol.interaction.Select');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON');
goog.require('ol.source.MapQuest'); goog.require('ol.source.MapQuest');
goog.require('ol.source.Vector');
var raster = new ol.layer.Tile({ var raster = new ol.layer.Tile({
@@ -16,9 +17,9 @@ var raster = new ol.layer.Tile({
}); });
var vector = new ol.layer.Vector({ var vector = new ol.layer.Vector({
source: new ol.source.GeoJSON({ source: new ol.source.Vector({
projection: 'EPSG:3857', url: 'data/geojson/countries.geojson',
url: 'data/geojson/countries.geojson' format: new ol.format.GeoJSON()
}) })
}); });
+95 -93
View File
@@ -1,10 +1,11 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.format.GeoJSON');
goog.require('ol.interaction'); goog.require('ol.interaction');
goog.require('ol.interaction.Modify'); goog.require('ol.interaction.Modify');
goog.require('ol.interaction.Select'); goog.require('ol.interaction.Select');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON'); goog.require('ol.source.Vector');
goog.require('ol.style.Circle'); goog.require('ol.style.Circle');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
@@ -60,106 +61,107 @@ var styleFunction = (function() {
/* jshint +W069 */ /* jshint +W069 */
})(); })();
var source = new ol.source.GeoJSON( var geojsonObject = {
/** @type {olx.source.GeoJSONOptions} */ ({ 'type': 'FeatureCollection',
object: { 'crs': {
'type': 'FeatureCollection', 'type': 'name',
'crs': { 'properties': {
'type': 'name', 'name': 'EPSG:3857'
'properties': { }
'name': 'EPSG:3857' },
} 'features': [
}, {
'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', 'type': 'LineString',
'geometry': { 'coordinates': [[-5e6, -5e6], [0, -5e6]]
'type': 'Point',
'coordinates': [0, 0]
}
}, },
{ {
'type': 'Feature', 'type': 'Point',
'geometry': { 'coordinates': [4e6, -5e6]
'type': 'MultiPoint',
'coordinates': [[-2e6, 0], [0, -2e6]]
}
}, },
{ {
'type': 'Feature', 'type': 'Polygon',
'geometry': { 'coordinates': [
'type': 'LineString', [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]]
'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]]
]
}
]
}
} }
] ]
} }
})); }
]
};
var source = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var layer = new ol.layer.Vector({ var layer = new ol.layer.Vector({
source: source, source: source,
+46 -43
View File
@@ -1,8 +1,9 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.format.GeoJSON');
goog.require('ol.geom.MultiPoint'); goog.require('ol.geom.MultiPoint');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON'); goog.require('ol.source.Vector');
goog.require('ol.style.Circle'); goog.require('ol.style.Circle');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
@@ -40,51 +41,53 @@ var styles = [
}) })
]; ];
var source = new ol.source.GeoJSON(/** @type {olx.source.GeoJSONOptions} */ ({ var geojsonObject = {
object: { 'type': 'FeatureCollection',
'type': 'FeatureCollection', 'crs': {
'crs': { 'type': 'name',
'type': 'name', 'properties': {
'properties': { 'name': 'EPSG:3857'
'name': 'EPSG:3857' }
},
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
[-3e6, 6e6], [-5e6, 6e6]]]
} }
}, },
'features': [ {
{ 'type': 'Feature',
'type': 'Feature', 'geometry': {
'geometry': { 'type': 'Polygon',
'type': 'Polygon', 'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [0, 6e6], [-2e6, 6e6]]]
[-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': [[[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({ var layer = new ol.layer.Vector({
source: source, source: source,
+5 -4
View File
@@ -1,20 +1,21 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.events.condition'); goog.require('ol.events.condition');
goog.require('ol.format.GeoJSON');
goog.require('ol.interaction.Select'); goog.require('ol.interaction.Select');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON');
goog.require('ol.source.MapQuest'); goog.require('ol.source.MapQuest');
goog.require('ol.source.Vector');
var raster = new ol.layer.Tile({ var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'}) source: new ol.source.MapQuest({layer: 'sat'})
}); });
var vector = new ol.layer.Vector({ var vector = new ol.layer.Vector({
source: new ol.source.GeoJSON({ source: new ol.source.Vector({
projection: 'EPSG:3857', url: 'data/geojson/countries.geojson',
url: 'data/geojson/countries.geojson' format: new ol.format.GeoJSON()
}) })
}); });
+5 -4
View File
@@ -1,9 +1,10 @@
goog.require('ol.Graticule'); goog.require('ol.Graticule');
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.format.GeoJSON');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.proj.Projection'); 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 ' + 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, keyboardEventTarget: document,
layers: [ layers: [
new ol.layer.Vector({ new ol.layer.Vector({
source: new ol.source.GeoJSON({ source: new ol.source.Vector({
projection: sphereMollweideProjection, url: 'data/geojson/countries-110m.geojson',
url: 'data/geojson/countries-110m.geojson' format: new ol.format.GeoJSON()
}) })
}) })
], ],
+1 -1
View File
@@ -3,7 +3,7 @@ template: example.html
title: TopoJSON example title: TopoJSON example
shortdesc: Demonstrates rendering of features from a TopoJSON topology. shortdesc: Demonstrates rendering of features from a TopoJSON topology.
docs: > 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" tags: "topojson, vector, style"
--- ---
<div class="row-fluid"> <div class="row-fluid">
+5 -4
View File
@@ -1,9 +1,10 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.format.TopoJSON');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.TileJSON'); goog.require('ol.source.TileJSON');
goog.require('ol.source.TopoJSON'); goog.require('ol.source.Vector');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
goog.require('ol.style.Style'); goog.require('ol.style.Style');
@@ -26,9 +27,9 @@ var styleArray = [new ol.style.Style({
})]; })];
var vector = new ol.layer.Vector({ var vector = new ol.layer.Vector({
source: new ol.source.TopoJSON({ source: new ol.source.Vector({
projection: 'EPSG:3857', url: 'data/topojson/world-110m.json',
url: 'data/topojson/world-110m.json' format: new ol.format.TopoJSON()
}), }),
style: function(feature, resolution) { style: function(feature, resolution) {
// don't want to render the full world polygon, which repeats all countries // don't want to render the full world polygon, which repeats all countries
+11 -10
View File
@@ -1,10 +1,11 @@
goog.require('ol.Feature'); goog.require('ol.Feature');
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.format.GeoJSON');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON');
goog.require('ol.source.MapQuest'); goog.require('ol.source.MapQuest');
goog.require('ol.source.Vector');
goog.require('ol.style.Circle'); goog.require('ol.style.Circle');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
@@ -124,9 +125,9 @@ var createPolygonStyleFunction = function() {
}; };
var vectorPolygons = new ol.layer.Vector({ var vectorPolygons = new ol.layer.Vector({
source: new ol.source.GeoJSON({ source: new ol.source.Vector({
projection: 'EPSG:3857', url: 'data/geojson/polygon-samples.geojson',
url: 'data/geojson/polygon-samples.geojson' format: new ol.format.GeoJSON()
}), }),
style: createPolygonStyleFunction() style: createPolygonStyleFunction()
}); });
@@ -147,9 +148,9 @@ var createLineStyleFunction = function() {
}; };
var vectorLines = new ol.layer.Vector({ var vectorLines = new ol.layer.Vector({
source: new ol.source.GeoJSON({ source: new ol.source.Vector({
projection: 'EPSG:3857', url: 'data/geojson/line-samples.geojson',
url: 'data/geojson/line-samples.geojson' format: new ol.format.GeoJSON()
}), }),
style: createLineStyleFunction() style: createLineStyleFunction()
}); });
@@ -171,9 +172,9 @@ var createPointStyleFunction = function() {
}; };
var vectorPoints = new ol.layer.Vector({ var vectorPoints = new ol.layer.Vector({
source: new ol.source.GeoJSON({ source: new ol.source.Vector({
projection: 'EPSG:3857', url: 'data/geojson/point-samples.geojson',
url: 'data/geojson/point-samples.geojson' format: new ol.format.GeoJSON()
}), }),
style: createPointStyleFunction() style: createPointStyleFunction()
}); });
+1
View File
@@ -5,6 +5,7 @@ goog.require('ol.format.GeoJSON');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.source.MapQuest'); goog.require('ol.source.MapQuest');
goog.require('ol.source.Vector');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
goog.require('ol.style.Style'); goog.require('ol.style.Style');
+9 -7
View File
@@ -7,7 +7,7 @@ goog.require('ol.layer.Vector');
goog.require('ol.loadingstrategy'); goog.require('ol.loadingstrategy');
goog.require('ol.proj'); goog.require('ol.proj');
goog.require('ol.source.BingMaps'); goog.require('ol.source.BingMaps');
goog.require('ol.source.ServerVector'); goog.require('ol.source.Vector');
goog.require('ol.style.Circle'); goog.require('ol.style.Circle');
goog.require('ol.style.Fill'); goog.require('ol.style.Fill');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
@@ -88,21 +88,23 @@ var styles = {
} }
}; };
var vectorSource = new ol.source.ServerVector({ var osmxmlFormat = new ol.format.OSMXML();
format: new ol.format.OSMXML(),
var vectorSource = new ol.source.Vector({
loader: function(extent, resolution, projection) { loader: function(extent, resolution, projection) {
var epsg4326Extent = var epsg4326Extent =
ol.proj.transformExtent(extent, projection, 'EPSG:4326'); ol.proj.transformExtent(extent, projection, 'EPSG:4326');
var url = 'http://overpass-api.de/api/xapi?map?bbox=' + var url = 'http://overpass-api.de/api/xapi?map?bbox=' +
epsg4326Extent.join(','); epsg4326Extent.join(',');
$.ajax(url).then(function(response) { $.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 maxZoom: 19
})), }))
projection: 'EPSG:3857'
}); });
var vector = new ol.layer.Vector({ var vector = new ol.layer.Vector({
+14 -11
View File
@@ -5,31 +5,34 @@ goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.loadingstrategy'); goog.require('ol.loadingstrategy');
goog.require('ol.source.BingMaps'); goog.require('ol.source.BingMaps');
goog.require('ol.source.ServerVector'); goog.require('ol.source.Vector');
goog.require('ol.style.Stroke'); goog.require('ol.style.Stroke');
goog.require('ol.style.Style'); goog.require('ol.style.Style');
goog.require('ol.tilegrid.XYZ'); 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) { loader: function(extent, resolution, projection) {
var url = 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' + var url = 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=osm:water_areas&' + 'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
'outputFormat=text/javascript&format_options=callback:loadFeatures' + 'outputFormat=text/javascript&format_options=callback:loadFeatures' +
'&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857'; '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
$.ajax({ // use jsonp: false to prevent jQuery from adding the "callback"
url: url, // parameter to the URL
dataType: 'jsonp' $.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 maxZoom: 19
})), }))
projection: 'EPSG:3857'
}); });
// the global function whose name is specified in the URL of JSONP WFS
// GetFeature requests
var loadFeatures = function(response) { var loadFeatures = function(response) {
vectorSource.addFeatures(vectorSource.readFeatures(response)); vectorSource.addFeatures(geojsonFormat.readFeatures(response));
}; };
var vector = new ol.layer.Vector({ var vector = new ol.layer.Vector({
+1 -1
View File
@@ -41,7 +41,7 @@ ol.loadingstrategy.bbox = function(extent, resolution) {
* @return {function(ol.Extent, number): Array.<ol.Extent>} Loading strategy. * @return {function(ol.Extent, number): Array.<ol.Extent>} Loading strategy.
* @api * @api
*/ */
ol.loadingstrategy.createTile = function(tileGrid) { ol.loadingstrategy.tile = function(tileGrid) {
return ( return (
/** /**
* @param {ol.Extent} extent Extent. * @param {ol.Extent} extent Extent.