Port vector examples to new vector API
This commit is contained in:
@@ -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()
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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({
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
@@ -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
@@ -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()];
|
||||||
|
|||||||
@@ -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
@@ -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,
|
||||||
|
|||||||
@@ -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({
|
||||||
|
|||||||
@@ -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
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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
@@ -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()
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -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
@@ -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,
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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()
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -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()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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()
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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');
|
||||||
|
|||||||
@@ -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
@@ -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({
|
||||||
|
|||||||
@@ -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.
|
||||||
|
|||||||
Reference in New Issue
Block a user