ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updating examples to use the new API

Browse Source
This commit is contained in:
ahocevar
2013-07-17 11:39:57 +02:00
parent 9095032014
commit 892088ffac
6 changed files with 114 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
examples/gml.js
View File

@@ -4,7 +4,6 @@ goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.layer.Vector');
goog.require('ol.parser.ogc.GML_v3');
goog.require('ol.proj');
goog.require('ol.source.MapQuestOpenAerial');
goog.require('ol.source.Vector');
goog.require('ol.style.Polygon');
@@ -17,7 +16,8 @@ var raster = new ol.layer.TileLayer({
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
projection: ol.proj.get('EPSG:4326')
parser: new ol.parser.ogc.GML_v3({axisOrientation: 'neu'}),
url: 'data/gml/topp-states-wfs.xml'
}),
style: new ol.style.Style({rules: [
new ol.style.Rule({
@@ -39,22 +39,3 @@ var map = new ol.Map({
zoom: 4
})
});
var gml = new ol.parser.ogc.GML_v3({axisOrientation: 'neu'});
var url = 'data/gml/topp-states-wfs.xml';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
/**
* onload handler for the XHR request.
*/
xhr.onload = function() {
if (xhr.status == 200) {
// this is silly to have to tell the layer the destination projection
var projection = map.getView().getProjection();
vector.parseFeatures(xhr.responseText, gml, projection);
}
};
xhr.send();

23
examples/gpx.js
View File

@@ -4,7 +4,6 @@ goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.layer.Vector');
goog.require('ol.parser.GPX');
goog.require('ol.proj');
goog.require('ol.source.OSM');
goog.require('ol.source.Vector');
@@ -14,7 +13,8 @@ var raster = new ol.layer.TileLayer({
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
projection: ol.proj.get('EPSG:4326')
parser: new ol.parser.GPX(),
url: 'data/gpx/yahoo.xml'
}),
transformFeatureInfo: function(features) {
var info = [];
@@ -44,22 +44,3 @@ map.on(['click', 'mousemove'], function(evt) {
}
});
});
var gpx = new ol.parser.GPX();
var url = 'data/gpx/yahoo.xml';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
/**
* onload handler for the XHR request.
*/
xhr.onload = function() {
if (xhr.status == 200) {
// this is silly to have to tell the layer the destination projection
var projection = map.getView().getProjection();
vector.parseFeatures(xhr.responseText, gpx, projection);
}
};
xhr.send();

22
examples/kml-timezones.js
View File

@@ -5,7 +5,6 @@ goog.require('ol.expr');
goog.require('ol.layer.TileLayer');
goog.require('ol.layer.Vector');
goog.require('ol.parser.KML');
goog.require('ol.proj');
goog.require('ol.source.Stamen');
goog.require('ol.source.Vector');
goog.require('ol.style.Polygon');
@@ -55,7 +54,8 @@ var style = new ol.style.Style({rules: [
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
projection: ol.proj.get('EPSG:4326')
parser: new ol.parser.KML({dimension: 2}),
url: 'data/kml/timezones.kml'
}),
style: style
});
@@ -103,21 +103,3 @@ map.on(['click', 'mousemove'], function(evt) {
}
});
});
var kml = new ol.parser.KML({dimension: 2});
var url = 'data/kml/timezones.kml';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
/**
* onload handler for the XHR request.
*/
xhr.onload = function() {
if (xhr.status == 200) {
var projection = map.getView().getProjection();
vector.parseFeatures(xhr.responseText, kml, projection);
}
};
xhr.send();

28
examples/kml.js
View File

@@ -20,11 +20,12 @@ var raster = new ol.layer.TileLayer({
})
});
var epsg4326 = ol.proj.get('EPSG:4326');
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
projection: epsg4326
parser: new ol.parser.KML({
maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true
}),
url: 'data/kml/lines.kml'
}),
transformFeatureInfo: function(features) {
var info = [];
@@ -40,15 +41,12 @@ var map = new ol.Map({
renderer: ol.RendererHint.CANVAS,
target: 'map',
view: new ol.View2D({
projection: epsg4326,
projection: ol.proj.get('EPSG:4326'),
center: [-112.169, 36.099],
zoom: 11
})
});
var kml = new ol.parser.KML({
maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true});
map.on(['click', 'mousemove'], function(evt) {
map.getFeatureInfo({
pixel: evt.getPixel(),
@@ -58,19 +56,3 @@ map.on(['click', 'mousemove'], function(evt) {
}
});
});
var url = 'data/kml/lines.kml';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
/**
* onload handler for the XHR request.
*/
xhr.onload = function() {
if (xhr.status == 200) {
// this is silly to have to tell the layer the destination projection
vector.parseFeatures(xhr.responseText, kml, epsg4326);
}
};
xhr.send();

203
examples/style-rules.js
View File

@@ -60,112 +60,111 @@ var style = new ol.style.Style({rules: [
var vector = new ol.layer.Vector({
style: style,
source: new ol.source.Vector({
data: {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'properties': {
'color': '#BADA55',
'where': 'inner'
},
'geometry': {
'type': 'LineString',
'coordinates': [[-10000000, -10000000], [10000000, 10000000]]
}
}, {
'type': 'Feature',
'properties': {
'color': '#BADA55',
'where': 'inner'
},
'geometry': {
'type': 'LineString',
'coordinates': [[-10000000, 10000000], [10000000, -10000000]]
}
}, {
'type': 'Feature',
'properties': {
'color': '#013',
'where': 'outer'
},
'geometry': {
'type': 'LineString',
'coordinates': [[-10000000, -10000000], [-10000000, 10000000]]
}
}, {
'type': 'Feature',
'properties': {
'color': '#013',
'where': 'outer'
},
'geometry': {
'type': 'LineString',
'coordinates': [[-10000000, 10000000], [10000000, 10000000]]
}
}, {
'type': 'Feature',
'properties': {
'color': '#013',
'where': 'outer'
},
'geometry': {
'type': 'LineString',
'coordinates': [[10000000, 10000000], [10000000, -10000000]]
}
}, {
'type': 'Feature',
'properties': {
'color': '#013',
'where': 'outer'
},
'geometry': {
'type': 'LineString',
'coordinates': [[10000000, -10000000], [-10000000, -10000000]]
}
}, {
'type': 'Feature',
'properties': {
'label': 'South'
},
'geometry': {
'type': 'Point',
'coordinates': [0, -6000000]
}
}, {
'type': 'Feature',
'properties': {
'label': 'West'
},
'geometry': {
'type': 'Point',
'coordinates': [-6000000, 0]
}
}, {
'type': 'Feature',
'properties': {
'label': 'North'
},
'geometry': {
'type': 'Point',
'coordinates': [0, 6000000]
}
}, {
'type': 'Feature',
'properties': {
'label': 'East'
},
'geometry': {
'type': 'Point',
'coordinates': [6000000, 0]
}
}]
},
parser: new ol.parser.GeoJSON(),
projection: ol.proj.get('EPSG:3857')
})
});
vector.parseFeatures({
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'properties': {
'color': '#BADA55',
'where': 'inner'
},
'geometry': {
'type': 'LineString',
'coordinates': [[-10000000, -10000000], [10000000, 10000000]]
}
}, {
'type': 'Feature',
'properties': {
'color': '#BADA55',
'where': 'inner'
},
'geometry': {
'type': 'LineString',
'coordinates': [[-10000000, 10000000], [10000000, -10000000]]
}
}, {
'type': 'Feature',
'properties': {
'color': '#013',
'where': 'outer'
},
'geometry': {
'type': 'LineString',
'coordinates': [[-10000000, -10000000], [-10000000, 10000000]]
}
}, {
'type': 'Feature',
'properties': {
'color': '#013',
'where': 'outer'
},
'geometry': {
'type': 'LineString',
'coordinates': [[-10000000, 10000000], [10000000, 10000000]]
}
}, {
'type': 'Feature',
'properties': {
'color': '#013',
'where': 'outer'
},
'geometry': {
'type': 'LineString',
'coordinates': [[10000000, 10000000], [10000000, -10000000]]
}
}, {
'type': 'Feature',
'properties': {
'color': '#013',
'where': 'outer'
},
'geometry': {
'type': 'LineString',
'coordinates': [[10000000, -10000000], [-10000000, -10000000]]
}
}, {
'type': 'Feature',
'properties': {
'label': 'South'
},
'geometry': {
'type': 'Point',
'coordinates': [0, -6000000]
}
}, {
'type': 'Feature',
'properties': {
'label': 'West'
},
'geometry': {
'type': 'Point',
'coordinates': [-6000000, 0]
}
}, {
'type': 'Feature',
'properties': {
'label': 'North'
},
'geometry': {
'type': 'Point',
'coordinates': [0, 6000000]
}
}, {
'type': 'Feature',
'properties': {
'label': 'East'
},
'geometry': {
'type': 'Point',
'coordinates': [6000000, 0]
}
}]
}, new ol.parser.GeoJSON(), ol.proj.get('EPSG:3857'));
var map = new ol.Map({
layers: [vector],
controls: ol.control.defaults({

23
examples/vector-layer.js
View File

@@ -5,7 +5,6 @@ goog.require('ol.expr');
goog.require('ol.layer.TileLayer');
goog.require('ol.layer.Vector');
goog.require('ol.parser.GeoJSON');
goog.require('ol.proj');
goog.require('ol.source.MapQuestOpenAerial');
goog.require('ol.source.Vector');
goog.require('ol.style.Polygon');
@@ -25,7 +24,8 @@ ol.expr.register('resolution', function() {
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
projection: ol.proj.get('EPSG:4326')
parser: new ol.parser.GeoJSON(),
url: 'data/countries.geojson'
}),
style: new ol.style.Style({rules: [
new ol.style.Rule({
@@ -72,22 +72,3 @@ map.on(['click', 'mousemove'], function(evt) {
}
});
});
var geojson = new ol.parser.GeoJSON();
var url = 'data/countries.geojson';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
/**
* onload handler for the XHR request.
*/
xhr.onload = function() {
if (xhr.status == 200) {
// this is silly to have to tell the layer the destination projection
var projection = map.getView().getProjection();
vector.parseFeatures(xhr.responseText, geojson, projection);
}
};
xhr.send();