Add ol.format.OSMXML and ol.source.OSMXML
This commit is contained in:
Frederic Junod
2223
examples/data/osm/map.osm
Normal file
2223
examples/data/osm/map.osm
Normal file
File diff suppressed because it is too large
Load Diff
56
examples/vector-osm.html
Normal file
56
examples/vector-osm.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>OSM XML example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">OSM XML example</h4>
|
||||
<p id="shortdesc">Example of using the OSM XML source.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="vector-osm.js" target="_blank">vector-osm.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, osm, xml</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=vector-osm" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
123
examples/vector-osm.js
Normal file
123
examples/vector-osm.js
Normal file
@@ -0,0 +1,123 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.source.OSMXML');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
var styles = {
|
||||
'amenity': {
|
||||
'parking': [
|
||||
new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(170, 170, 170, 1.0)',
|
||||
width: 1
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(170, 170, 170, 0.3)'
|
||||
})
|
||||
})
|
||||
]
|
||||
},
|
||||
'building': {
|
||||
'.*': [
|
||||
new ol.style.Style({
|
||||
zIndex: 100,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(246, 99, 79, 1.0)',
|
||||
width: 1
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(246, 99, 79, 0.3)'
|
||||
})
|
||||
})
|
||||
]
|
||||
},
|
||||
'highway': {
|
||||
'service': [
|
||||
new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(255, 255, 255, 1.0)',
|
||||
width: 2
|
||||
})
|
||||
})
|
||||
],
|
||||
'.*': [
|
||||
new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(255, 255, 255, 1.0)',
|
||||
width: 3
|
||||
})
|
||||
})
|
||||
]
|
||||
},
|
||||
'landuse': {
|
||||
'forest|grass|allotments': [
|
||||
new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(140, 208, 95, 1.0)',
|
||||
width: 1
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(140, 208, 95, 0.3)'
|
||||
})
|
||||
})
|
||||
]
|
||||
},
|
||||
'natural': {
|
||||
'tree': [
|
||||
new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 2,
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(140, 208, 95, 1.0)'
|
||||
}),
|
||||
stroke: null
|
||||
})
|
||||
})
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
var vectorSource = new ol.source.OSMXML({
|
||||
projection: 'EPSG:3857',
|
||||
url: 'data/osm/map.osm'
|
||||
});
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: vectorSource,
|
||||
style: function(feature, resolution) {
|
||||
for (var key in styles) {
|
||||
var value = feature.get(key);
|
||||
if (value !== undefined) {
|
||||
for (var regexp in styles[key]) {
|
||||
if (new RegExp(regexp).test(value)) {
|
||||
return styles[key][regexp];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
imagerySet: 'Aerial',
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
renderer: 'canvas',
|
||||
target: document.getElementById('map'),
|
||||
view: new ol.View2D({
|
||||
center: [739218, 5906096],
|
||||
zoom: 17
|
||||
})
|
||||
});
|
||||
@@ -700,6 +700,21 @@
|
||||
* @todo stability experimental
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} olx.source.OSMXMLOptions
|
||||
* @property {Array.<ol.Attribution>|undefined} attributions Attributions.
|
||||
* @property {Array.<ol.style.Style>|undefined} defaultStyle Default style.
|
||||
* @property {Document|undefined} doc Document.
|
||||
* @property {ol.Extent|undefined} extent Extent.
|
||||
* @property {string|undefined} logo Logo.
|
||||
* @property {Node|undefined| node Node.
|
||||
* @property {ol.proj.ProjectionLike} projection Projection.
|
||||
* @property {ol.proj.ProjectionLike} reprojectTo Re-project to.
|
||||
* @property {string|undefined} text Text.
|
||||
* @property {string|undefined} url URL.
|
||||
* @property {Array.<string>|undefined} urls URLs.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} olx.source.ImageCanvasOptions
|
||||
* @property {Array.<ol.Attribution>|undefined} attributions Attributions.
|
||||
|
||||
210
src/ol/format/osmxmlformat.js
Normal file
210
src/ol/format/osmxmlformat.js
Normal file
@@ -0,0 +1,210 @@
|
||||
// FIXME add typedef for stack state objects
|
||||
goog.provide('ol.format.OSMXML');
|
||||
|
||||
goog.require('goog.array');
|
||||
goog.require('goog.asserts');
|
||||
goog.require('goog.dom.NodeType');
|
||||
goog.require('goog.object');
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.format.XMLFeature');
|
||||
goog.require('ol.geom.LineString');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.geom.Polygon');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.xml');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @extends {ol.format.XMLFeature}
|
||||
*/
|
||||
ol.format.OSMXML = function() {
|
||||
goog.base(this);
|
||||
};
|
||||
goog.inherits(ol.format.OSMXML, ol.format.XMLFeature);
|
||||
|
||||
|
||||
/**
|
||||
* @const
|
||||
* @type {Array.<string>}
|
||||
* @private
|
||||
*/
|
||||
ol.format.OSMXML.EXTENSIONS_ = ['.osm'];
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
ol.format.OSMXML.prototype.getExtensions = function() {
|
||||
return ol.format.OSMXML.EXTENSIONS_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {Node} node Node.
|
||||
* @param {Array.<*>} objectStack Object stack.
|
||||
* @private
|
||||
*/
|
||||
ol.format.OSMXML.readNode_ = function(node, objectStack) {
|
||||
goog.asserts.assert(node.nodeType == goog.dom.NodeType.ELEMENT);
|
||||
goog.asserts.assert(node.localName == 'node');
|
||||
var state = /** @type {Object} */ (objectStack[objectStack.length - 1]);
|
||||
var id = node.getAttribute('id');
|
||||
var coordinates = /** @type {Array.<number>} */ ([
|
||||
parseFloat(node.getAttribute('lon')),
|
||||
parseFloat(node.getAttribute('lat'))
|
||||
]);
|
||||
goog.object.set(state.nodes, id, coordinates);
|
||||
|
||||
var values = ol.xml.pushParseAndPop({
|
||||
tags: {}
|
||||
}, ol.format.OSMXML.NODE_PARSERS_, node, objectStack);
|
||||
if (!goog.object.isEmpty(values.tags)) {
|
||||
var geometry = new ol.geom.Point(coordinates);
|
||||
var feature = new ol.Feature(geometry);
|
||||
feature.setId(id);
|
||||
feature.setValues(values.tags);
|
||||
state.features.push(feature);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {Node} node Node.
|
||||
* @param {Array.<*>} objectStack Object stack.
|
||||
* @private
|
||||
*/
|
||||
ol.format.OSMXML.readWay_ = function(node, objectStack) {
|
||||
goog.asserts.assert(node.nodeType == goog.dom.NodeType.ELEMENT);
|
||||
goog.asserts.assert(node.localName == 'way');
|
||||
var values = ol.xml.pushParseAndPop({
|
||||
ndrefs: [],
|
||||
tags: {}
|
||||
}, ol.format.OSMXML.WAY_PARSERS_, node, objectStack);
|
||||
var state = /** @type {Object} */ (objectStack[objectStack.length - 1]);
|
||||
var flatCoordinates = /** @type {Array.<number>} */ ([]);
|
||||
for (var i = 0, ii = values.ndrefs.length; i < ii; i++) {
|
||||
var point = goog.object.get(state.nodes, values.ndrefs[i]);
|
||||
goog.array.extend(flatCoordinates, point);
|
||||
}
|
||||
if (values.ndrefs[0] == values.ndrefs[values.ndrefs.length - 1]) {
|
||||
// closed way
|
||||
var geometry = new ol.geom.Polygon(null);
|
||||
geometry.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates,
|
||||
[flatCoordinates.length]);
|
||||
} else {
|
||||
var geometry = new ol.geom.LineString(null);
|
||||
geometry.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates);
|
||||
}
|
||||
var feature = new ol.Feature(geometry);
|
||||
feature.setValues(values.tags);
|
||||
state.features.push(feature);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {Node} node Node.
|
||||
* @param {Array.<*>} objectStack Object stack.
|
||||
* @private
|
||||
* @return {ol.Feature|undefined} Track.
|
||||
*/
|
||||
ol.format.OSMXML.readNd_ = function(node, objectStack) {
|
||||
goog.asserts.assert(node.nodeType == goog.dom.NodeType.ELEMENT);
|
||||
goog.asserts.assert(node.localName == 'nd');
|
||||
var values = /** @type {Object} */ (objectStack[objectStack.length - 1]);
|
||||
values.ndrefs.push(node.getAttribute('ref'));
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {Node} node Node.
|
||||
* @param {Array.<*>} objectStack Object stack.
|
||||
* @private
|
||||
* @return {ol.Feature|undefined} Track.
|
||||
*/
|
||||
ol.format.OSMXML.readTag_ = function(node, objectStack) {
|
||||
goog.asserts.assert(node.nodeType == goog.dom.NodeType.ELEMENT);
|
||||
goog.asserts.assert(node.localName == 'tag');
|
||||
var values = /** @type {Object} */ (objectStack[objectStack.length - 1]);
|
||||
goog.object.set(values.tags, node.getAttribute('k'), node.getAttribute('v'));
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @const
|
||||
* @private
|
||||
* @type {Array.<string>}
|
||||
*/
|
||||
ol.format.OSMXML.NAMESPACE_URIS_ = [
|
||||
null
|
||||
];
|
||||
|
||||
|
||||
/**
|
||||
* @const
|
||||
* @type {Object.<string, Object.<string, ol.xml.Parser>>}
|
||||
* @private
|
||||
*/
|
||||
ol.format.OSMXML.WAY_PARSERS_ = ol.xml.makeParsersNS(
|
||||
ol.format.OSMXML.NAMESPACE_URIS_, {
|
||||
'nd': ol.format.OSMXML.readNd_,
|
||||
'tag': ol.format.OSMXML.readTag_
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* @const
|
||||
* @type {Object.<string, Object.<string, ol.xml.Parser>>}
|
||||
* @private
|
||||
*/
|
||||
ol.format.OSMXML.PARSERS_ = ol.xml.makeParsersNS(
|
||||
ol.format.OSMXML.NAMESPACE_URIS_, {
|
||||
'node': ol.format.OSMXML.readNode_,
|
||||
'way': ol.format.OSMXML.readWay_
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* @const
|
||||
* @type {Object.<string, Object.<string, ol.xml.Parser>>}
|
||||
* @private
|
||||
*/
|
||||
ol.format.OSMXML.NODE_PARSERS_ = ol.xml.makeParsersNS(
|
||||
ol.format.OSMXML.NAMESPACE_URIS_, {
|
||||
'tag': ol.format.OSMXML.readTag_
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
ol.format.OSMXML.prototype.readFeaturesFromNode = function(node) {
|
||||
goog.asserts.assert(node.nodeType == goog.dom.NodeType.ELEMENT);
|
||||
if (node.localName == 'osm') {
|
||||
var state = ol.xml.pushParseAndPop({
|
||||
nodes: {},
|
||||
features: []
|
||||
}, ol.format.OSMXML.PARSERS_, node, []);
|
||||
if (goog.isDef(state.features)) {
|
||||
return state.features;
|
||||
}
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
ol.format.OSMXML.prototype.readProjectionFromDocument = function(doc) {
|
||||
return ol.proj.get('EPSG:4326');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
ol.format.OSMXML.prototype.readProjectionFromNode = function(node) {
|
||||
return ol.proj.get('EPSG:4326');
|
||||
};
|
||||
1
src/ol/source/osmxmlsource.exports
Normal file
1
src/ol/source/osmxmlsource.exports
Normal file
@@ -0,0 +1 @@
|
||||
@exportSymbol ol.source.OSMXML
|
||||
31
src/ol/source/osmxmlsource.js
Normal file
31
src/ol/source/osmxmlsource.js
Normal file
@@ -0,0 +1,31 @@
|
||||
goog.provide('ol.source.OSMXML');
|
||||
|
||||
goog.require('ol.format.OSMXML');
|
||||
goog.require('ol.source.VectorFile');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @extends {ol.source.VectorFile}
|
||||
* @param {olx.source.OSMXMLOptions=} opt_options Options.
|
||||
*/
|
||||
ol.source.OSMXML = function(opt_options) {
|
||||
|
||||
var options = goog.isDef(opt_options) ? opt_options : {};
|
||||
|
||||
goog.base(this, {
|
||||
attributions: options.attributions,
|
||||
doc: options.doc,
|
||||
extent: options.extent,
|
||||
format: new ol.format.OSMXML(),
|
||||
logo: options.logo,
|
||||
node: options.node,
|
||||
projection: options.projection,
|
||||
reprojectTo: options.reprojectTo,
|
||||
text: options.text,
|
||||
url: options.url
|
||||
});
|
||||
|
||||
};
|
||||
goog.inherits(ol.source.OSMXML, ol.source.VectorFile);
|
||||
Reference in New Issue
Block a user