Merge pull request #1545 from openlayers/vector-api
Merge vector-api branch into master
This commit is contained in:
Éric Lemoine
@@ -33,6 +33,7 @@ OpenLayers contributors:
|
||||
* Gregers Rygg
|
||||
* Tim Schaub
|
||||
* Christopher Schmidt
|
||||
* Tobias Schwinger
|
||||
* Cameron Shorter
|
||||
* Pedro Simonetti
|
||||
* Paul Spencer
|
||||
|
||||
2
build.py
2
build.py
@@ -708,7 +708,7 @@ def host_examples(t):
|
||||
def check_examples(t):
|
||||
examples = ['build/hosted/%(BRANCH)s/' + e
|
||||
for e in EXAMPLES
|
||||
if not open(e).readline().startswith('// NOCHECK')]
|
||||
if not open(e.replace('.html', '.js')).readline().startswith('// NOCOMPILE')]
|
||||
all_examples = \
|
||||
[e + '?mode=advanced' for e in examples]
|
||||
for example in all_examples:
|
||||
|
||||
@@ -31,10 +31,6 @@
|
||||
padding-top: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ol-dragbox {
|
||||
position: absolute;
|
||||
border: 2px solid red;
|
||||
}
|
||||
.ol-full-screen {
|
||||
background: rgba(255,255,255,0.4);
|
||||
border-radius: 4px;
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -20,7 +19,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -23,7 +22,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -51,7 +50,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
52
examples/d3.html
Normal file
52
examples/d3.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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="../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>d3 integration 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="span12">
|
||||
<h4 id="title">d3 integration example</h4>
|
||||
<p id="shortdesc">Example of using ol3 and d3 together.</p>
|
||||
<div id="docs">
|
||||
<p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.</p>
|
||||
<p>See the <a href="d3.js" target="_blank">d3.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">d3</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||
<script src="http://d3js.org/topojson.v1.min.js"></script>
|
||||
<script src="loader.js?id=d3" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
97
examples/d3.js
vendored
Normal file
97
examples/d3.js
vendored
Normal file
@@ -0,0 +1,97 @@
|
||||
// NOCOMPILE
|
||||
// this example uses d3 for which we don't have an externs file.
|
||||
goog.require('ol');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.extent');
|
||||
goog.require('ol.layer.Image');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.ImageCanvas');
|
||||
goog.require('ol.source.Stamen');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'watercolor'
|
||||
})
|
||||
})
|
||||
],
|
||||
renderers: ['canvas'],
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: ol.proj.transform([-97, 38], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Load the topojson data and create an ol.layer.Image for that data.
|
||||
*/
|
||||
d3.json('data/us.json', function(error, us) {
|
||||
var features = topojson.feature(us, us.objects.counties);
|
||||
|
||||
/**
|
||||
* This function uses d3 to render the topojson features to a canvas.
|
||||
* @param {ol.Extent} extent Extent.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {ol.Size} size Size.
|
||||
* @param {ol.proj.Projection} projection Projection.
|
||||
* @return {HTMLCanvasElement}
|
||||
*/
|
||||
var canvasFunction = function(extent, resolution, pixelRatio,
|
||||
size, projection) {
|
||||
var canvasWidth = size[0];
|
||||
var canvasHeight = size[1];
|
||||
|
||||
var canvas = d3.select(document.createElement('canvas'));
|
||||
canvas.attr('width', canvasWidth).attr('height', canvasHeight);
|
||||
|
||||
var context = canvas.node().getContext('2d');
|
||||
|
||||
var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]);
|
||||
var d3Path = d3.geo.path().projection(d3Projection);
|
||||
|
||||
var pixelBounds = d3Path.bounds(features);
|
||||
var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
|
||||
var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
|
||||
|
||||
var geoBounds = d3.geo.bounds(features);
|
||||
var geoBoundsLeftBottom = ol.proj.transform(
|
||||
geoBounds[0], 'EPSG:4326', projection);
|
||||
var geoBoundsRightTop = ol.proj.transform(
|
||||
geoBounds[1], 'EPSG:4326', projection);
|
||||
var geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
|
||||
if (geoBoundsWidth < 0) {
|
||||
geoBoundsWidth += ol.extent.getWidth(projection.getExtent());
|
||||
}
|
||||
var geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1];
|
||||
|
||||
var widthResolution = geoBoundsWidth / pixelBoundsWidth;
|
||||
var heightResolution = geoBoundsHeight / pixelBoundsHeight;
|
||||
var r = Math.max(widthResolution, heightResolution);
|
||||
var scale = r / (resolution / pixelRatio);
|
||||
|
||||
var center = ol.proj.transform(ol.extent.getCenter(extent),
|
||||
projection, 'EPSG:4326');
|
||||
d3Projection.scale(scale).center(center)
|
||||
.translate([canvasWidth / 2, canvasHeight / 2]);
|
||||
d3Path = d3Path.projection(d3Projection).context(context);
|
||||
d3Path(features);
|
||||
context.stroke();
|
||||
|
||||
return canvas[0][0];
|
||||
};
|
||||
|
||||
var layer = new ol.layer.Image({
|
||||
source: new ol.source.ImageCanvas({
|
||||
canvasFunction: canvasFunction,
|
||||
projection: 'EPSG:3857'
|
||||
})
|
||||
});
|
||||
map.addLayer(layer);
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,37 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
|
||||
<gpx xmlns="http://www.topografix.com/GPX/1/1" creator="gpx4j" version="1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">
|
||||
<trk>
|
||||
<name>290311</name>
|
||||
<desc>(null)</desc>
|
||||
<trkseg>
|
||||
<trkpt lat="39.114318" lon="-0.425692">
|
||||
<ele>126.951324</ele>
|
||||
<time>2011-03-29T14:45:52Z</time>
|
||||
</trkpt>
|
||||
<trkpt lat="39.114226" lon="-0.425648">
|
||||
<ele>122.974365</ele>
|
||||
<time>2011-03-29T14:46:03Z</time>
|
||||
</trkpt>
|
||||
<trkpt lat="39.114226" lon="-0.425648">
|
||||
<ele>122.974365</ele>
|
||||
<time>2011-03-29T14:46:07Z</time>
|
||||
</trkpt>
|
||||
<trkpt lat="39.114134" lon="-0.425608">
|
||||
<ele>120.310211</ele>
|
||||
<time>2011-03-29T14:46:09Z</time>
|
||||
</trkpt>
|
||||
<trkpt lat="39.114239" lon="-0.425657">
|
||||
<ele>117.177261</ele>
|
||||
<time>2011-03-29T14:46:18Z</time>
|
||||
</trkpt>
|
||||
<trkpt lat="39.114317" lon="-0.425718">
|
||||
<ele>116.083771</ele>
|
||||
<time>2011-03-29T14:46:21Z</time>
|
||||
</trkpt>
|
||||
<trkpt lat="39.114412" lon="-0.425789">
|
||||
<ele>115.956726</ele>
|
||||
<time>2011-03-29T14:46:25Z</time>
|
||||
</trkpt>
|
||||
</trkseg>
|
||||
</trk>
|
||||
</gpx>
|
||||
15585
examples/data/igc/Clement-Latour.igc
Normal file
15585
examples/data/igc/Clement-Latour.igc
Normal file
File diff suppressed because it is too large
Load Diff
3319
examples/data/igc/Damien-de-Baenst.igc
Normal file
3319
examples/data/igc/Damien-de-Baenst.igc
Normal file
File diff suppressed because it is too large
Load Diff
16374
examples/data/igc/Sylvain-Dhonneur.igc
Normal file
16374
examples/data/igc/Sylvain-Dhonneur.igc
Normal file
File diff suppressed because it is too large
Load Diff
9879
examples/data/igc/Tom-Payne.igc
Normal file
9879
examples/data/igc/Tom-Payne.igc
Normal file
File diff suppressed because it is too large
Load Diff
4611
examples/data/igc/Ulrich-Prinz.igc
Normal file
4611
examples/data/igc/Ulrich-Prinz.igc
Normal file
File diff suppressed because it is too large
Load Diff
9391
examples/data/kml/2012-02-10.kml
Normal file
9391
examples/data/kml/2012-02-10.kml
Normal file
File diff suppressed because one or more lines are too long
@@ -104,13 +104,13 @@
|
||||
</Style>
|
||||
<Folder>
|
||||
<name>Paths</name>
|
||||
<visibility>0</visibility>
|
||||
<visibility>1</visibility>
|
||||
<description>Examples of paths. Note that the tessellate tag is by default
|
||||
set to 0. If you want to create tessellated lines, they must be authored
|
||||
(or edited) directly in KML.</description>
|
||||
<Placemark>
|
||||
<name>Tessellated</name>
|
||||
<visibility>0</visibility>
|
||||
<visibility>1</visibility>
|
||||
<description><![CDATA[If the <tessellate> tag has a value of 1, the line will contour to the underlying terrain]]></description>
|
||||
<LookAt>
|
||||
<longitude>-112.0822680013139</longitude>
|
||||
@@ -128,7 +128,7 @@
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Untessellated</name>
|
||||
<visibility>0</visibility>
|
||||
<visibility>1</visibility>
|
||||
<description><![CDATA[If the <tessellate> tag has a value of 0, the line follow a simple straight-line path from point to point]]></description>
|
||||
<LookAt>
|
||||
<longitude>-112.0822680013139</longitude>
|
||||
@@ -146,7 +146,7 @@
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Absolute</name>
|
||||
<visibility>0</visibility>
|
||||
<visibility>1</visibility>
|
||||
<description>Transparent purple line</description>
|
||||
<LookAt>
|
||||
<longitude>-112.2719329043177</longitude>
|
||||
@@ -175,7 +175,7 @@
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Absolute Extruded</name>
|
||||
<visibility>0</visibility>
|
||||
<visibility>1</visibility>
|
||||
<description>Transparent green wall with yellow outlines</description>
|
||||
<LookAt>
|
||||
<longitude>-112.2643334742529</longitude>
|
||||
@@ -205,7 +205,7 @@
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Relative</name>
|
||||
<visibility>0</visibility>
|
||||
<visibility>1</visibility>
|
||||
<description>Black line (10 pixels wide), height tracks terrain</description>
|
||||
<LookAt>
|
||||
<longitude>-112.2580438551384</longitude>
|
||||
@@ -234,7 +234,7 @@
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Relative Extruded</name>
|
||||
<visibility>0</visibility>
|
||||
<visibility>1</visibility>
|
||||
<description>Opaque blue walls with red outline, height tracks terrain</description>
|
||||
<LookAt>
|
||||
<longitude>-112.2683594333433</longitude>
|
||||
@@ -265,7 +265,7 @@
|
||||
<Placemark>
|
||||
<name>Blue Icon</name>
|
||||
<description>Just another blue icon.</description>
|
||||
<styleUrl>data/kml/styles.kml#blueIcons</styleUrl>
|
||||
<styleUrl>styles.kml#blueIcons</styleUrl>
|
||||
<Point>
|
||||
<coordinates>-112.292238941097,36.09520916122063,630</coordinates>
|
||||
</Point>
|
||||
@@ -273,7 +273,7 @@
|
||||
<Placemark>
|
||||
<name>Sun Icon</name>
|
||||
<description>Just another sun icon.</description>
|
||||
<styleUrl>data/kml/styles.kml#sunIconMap</styleUrl>
|
||||
<styleUrl>styles.kml#sunIconMap</styleUrl>
|
||||
<Point>
|
||||
<coordinates>-112.292238941097,36.15520916122063,630</coordinates>
|
||||
</Point>
|
||||
|
||||
1
examples/data/us.json
Normal file
1
examples/data/us.json
Normal file
File diff suppressed because one or more lines are too long
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
55
examples/drag-and-drop.html
Normal file
55
examples/drag-and-drop.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!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="../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>Drag-and-Drop 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">Drag-and-Drop example</h4>
|
||||
<p id="shortdesc">Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="drag-and-drop.js" target="_blank">drag-and-drop.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">drag-and-drop, gpx, geojson, igc, kml, topojson</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="loader.js?id=drag-and-drop" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
139
examples/drag-and-drop.js
Normal file
139
examples/drag-and-drop.js
Normal file
@@ -0,0 +1,139 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.format.GPX');
|
||||
goog.require('ol.format.GeoJSON');
|
||||
goog.require('ol.format.IGC');
|
||||
goog.require('ol.format.KML');
|
||||
goog.require('ol.format.TopoJSON');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.DragAndDrop');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var defaultStyle = {
|
||||
'Point': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,255,0,0.5)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ff0',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})],
|
||||
'LineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f00',
|
||||
width: 3
|
||||
})
|
||||
})],
|
||||
'Polygon': [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0,255,255,0.5)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0ff',
|
||||
width: 1
|
||||
})
|
||||
})],
|
||||
'MultiPoint': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,0,255,0.5)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f0f',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})],
|
||||
'MultiLineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0f0',
|
||||
width: 3
|
||||
})
|
||||
})],
|
||||
'MultiPolygon': [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0,0,255,0.5)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#00f',
|
||||
width: 1
|
||||
})
|
||||
})]
|
||||
};
|
||||
|
||||
var styleFunction = function(feature, resolution) {
|
||||
var featureStyleFunction = feature.getStyleFunction();
|
||||
if (featureStyleFunction) {
|
||||
return featureStyleFunction.call(feature, resolution);
|
||||
} else {
|
||||
return defaultStyle[feature.getGeometry().getType()];
|
||||
}
|
||||
};
|
||||
|
||||
var map = new ol.Map({
|
||||
interactions: ol.interaction.defaults().extend([
|
||||
new ol.interaction.DragAndDrop({
|
||||
formatConstructors: [
|
||||
ol.format.GPX,
|
||||
ol.format.GeoJSON,
|
||||
ol.format.IGC,
|
||||
ol.format.KML,
|
||||
ol.format.TopoJSON
|
||||
],
|
||||
styleFunction: styleFunction
|
||||
})
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
imagerySet: 'Aerial',
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
|
||||
})
|
||||
})
|
||||
],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var displayFeatureInfo = function(pixel) {
|
||||
var features = [];
|
||||
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
features.push(feature);
|
||||
});
|
||||
if (features.length > 0) {
|
||||
var info = [];
|
||||
var i, ii;
|
||||
for (i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('name'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || ' ';
|
||||
} else {
|
||||
document.getElementById('info').innerHTML = ' ';
|
||||
}
|
||||
};
|
||||
|
||||
$(map.getViewport()).on('mousemove', function(evt) {
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
displayFeatureInfo(pixel);
|
||||
});
|
||||
|
||||
map.on('singleclick', function(evt) {
|
||||
var pixel = evt.getPixel();
|
||||
displayFeatureInfo(pixel);
|
||||
});
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,9 +35,9 @@
|
||||
<form class="form-inline">
|
||||
<label>Geometry type </label>
|
||||
<select id="type">
|
||||
<option value="Polygon">Polygon</option>
|
||||
<option value="LineString">Linestring</option>
|
||||
<option value="Point">Point</option>
|
||||
<option value="LineString">LineString</option>
|
||||
<option value="Polygon">Polygon</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -7,9 +7,8 @@ goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Rule');
|
||||
goog.require('ol.style.Shape');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
@@ -17,74 +16,27 @@ var raster = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
});
|
||||
|
||||
var styleArray = [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ffcc33',
|
||||
width: 2
|
||||
}),
|
||||
image: new ol.style.Circle({
|
||||
radius: 7,
|
||||
fill: new ol.style.Fill({
|
||||
color: '#ffcc33'
|
||||
})
|
||||
})
|
||||
})];
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector(),
|
||||
style: new ol.style.Style({
|
||||
rules: [
|
||||
new ol.style.Rule({
|
||||
filter: 'renderIntent("selected")',
|
||||
symbolizers: [
|
||||
new ol.style.Shape({
|
||||
fill: new ol.style.Fill({
|
||||
color: '#0099ff',
|
||||
opacity: 1
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'white',
|
||||
opacity: 0.75
|
||||
}),
|
||||
size: 14
|
||||
}),
|
||||
new ol.style.Fill({
|
||||
color: '#ffffff',
|
||||
opacity: 0.5
|
||||
}),
|
||||
new ol.style.Stroke({
|
||||
color: 'white',
|
||||
width: 5
|
||||
}),
|
||||
new ol.style.Stroke({
|
||||
color: '#0099ff',
|
||||
width: 3
|
||||
})
|
||||
]
|
||||
}),
|
||||
new ol.style.Rule({
|
||||
filter: 'renderIntent("temporary")',
|
||||
symbolizers: [
|
||||
new ol.style.Shape({
|
||||
fill: new ol.style.Fill({
|
||||
color: '#0099ff',
|
||||
opacity: 1
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'white',
|
||||
opacity: 0.75
|
||||
}),
|
||||
size: 14,
|
||||
zIndex: 1
|
||||
})
|
||||
]
|
||||
})
|
||||
],
|
||||
symbolizers: [
|
||||
new ol.style.Shape({
|
||||
fill: new ol.style.Fill({
|
||||
color: '#ffcc33',
|
||||
opacity: 1
|
||||
}),
|
||||
size: 14
|
||||
}),
|
||||
new ol.style.Fill({
|
||||
color: 'white',
|
||||
opacity: 0.2
|
||||
}),
|
||||
new ol.style.Stroke({
|
||||
color: '#ffcc33',
|
||||
width: 2
|
||||
})
|
||||
]
|
||||
})
|
||||
styleFunction: function(feature, resolution) {
|
||||
return styleArray;
|
||||
}
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
|
||||
49
examples/dynamic-data.html
Normal file
49
examples/dynamic-data.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!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="../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>Dynamic data 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="span12">
|
||||
<h4 id="title">Dynamic data example</h4>
|
||||
<p id="shortdesc">Example of dynamic data.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="dynamic-data.js" target="_blank">dynamic-data.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">dynamic-data</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=dynamic-data" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
53
examples/dynamic-data.js
Normal file
53
examples/dynamic-data.js
Normal file
@@ -0,0 +1,53 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.geom.MultiPoint');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
})
|
||||
],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var imageStyle = new ol.style.Circle({
|
||||
radius: 5,
|
||||
fill: new ol.style.Fill({color: 'yellow'}),
|
||||
stroke: new ol.style.Stroke({color: 'red', width: 1})
|
||||
});
|
||||
|
||||
var n = 200;
|
||||
var omegaTheta = 30000; // Rotation period in ms
|
||||
var R = 7e6;
|
||||
var r = 2e6;
|
||||
var p = 2e6;
|
||||
map.on('postcompose', function(event) {
|
||||
var render = event.getRender();
|
||||
var frameState = event.getFrameState();
|
||||
var theta = 2 * Math.PI * frameState.time / omegaTheta;
|
||||
var coordinates = [];
|
||||
var i;
|
||||
for (i = 0; i < n; ++i) {
|
||||
var t = theta + 2 * Math.PI * i / n;
|
||||
var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
|
||||
var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
|
||||
coordinates.push([x, y]);
|
||||
}
|
||||
render.setImageStyle(imageStyle);
|
||||
render.drawMultiPointGeometry(new ol.geom.MultiPoint(coordinates), null);
|
||||
map.requestRenderFrame();
|
||||
});
|
||||
map.requestRenderFrame();
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -29,7 +28,6 @@
|
||||
This example requires a browser that supports the
|
||||
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
|
||||
</div>
|
||||
<a id="export-jpeg" class="btn" download="map.jpeg"><i class="icon-download"></i> Export JPEG</a>
|
||||
<a id="export-png" class="btn" download="map.png"><i class="icon-download"></i> Export PNG</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,11 +36,11 @@
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Export map example</h4>
|
||||
<p id="shortdesc">Example of exporting a map as a JPEG or PNG image.</p>
|
||||
<p id="shortdesc">Example of exporting a map as a PNG image.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="export-map.js" target="_blank">export-map.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">export, jpeg, png, openstreetmap</div>
|
||||
<div id="tags">export, png, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -19,16 +19,15 @@ var map = new ol.Map({
|
||||
})
|
||||
});
|
||||
|
||||
var exportJPEGElement = document.getElementById('export-jpeg');
|
||||
var exportPNGElement = document.getElementById('export-png');
|
||||
|
||||
if ('download' in exportJPEGElement && 'download' in exportPNGElement) {
|
||||
exportJPEGElement.addEventListener('click', function(e) {
|
||||
e.target.href = map.getRenderer().getCanvas().toDataURL('image/jpeg');
|
||||
}, false);
|
||||
|
||||
if ('download' in exportPNGElement) {
|
||||
exportPNGElement.addEventListener('click', function(e) {
|
||||
e.target.href = map.getRenderer().getCanvas().toDataURL('image/png');
|
||||
map.once('postcompose', function(event) {
|
||||
var canvas = event.getContext().canvas;
|
||||
exportPNGElement.href = canvas.toDataURL('image/png');
|
||||
});
|
||||
map.render();
|
||||
}, false);
|
||||
} else {
|
||||
var info = document.getElementById('no-download');
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -26,7 +25,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -26,7 +25,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
49
examples/geojson.html
Normal file
49
examples/geojson.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!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="../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>GeoJSON 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="span12">
|
||||
<h4 id="title">GeoJSON example</h4>
|
||||
<p id="shortdesc">Example of GeoJSON features.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="geojson.js" target="_blank">geojson.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">geojson, vector, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=geojson" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
197
examples/geojson.js
Normal file
197
examples/geojson.js
Normal file
@@ -0,0 +1,197 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.geom.Circle');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.GeoJSON');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var image = new ol.style.Circle({
|
||||
radius: 5,
|
||||
fill: null,
|
||||
stroke: new ol.style.Stroke({color: 'red', width: 1})
|
||||
});
|
||||
|
||||
var styles = {
|
||||
'Point': [new ol.style.Style({
|
||||
image: image
|
||||
})],
|
||||
'LineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'green',
|
||||
width: 1
|
||||
})
|
||||
})],
|
||||
'MultiLineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'green',
|
||||
width: 1
|
||||
})
|
||||
})],
|
||||
'MultiPoint': [new ol.style.Style({
|
||||
image: image
|
||||
})],
|
||||
'MultiPolygon': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'yellow',
|
||||
width: 1
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 0, 0.1)'
|
||||
})
|
||||
})],
|
||||
'Polygon': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'blue',
|
||||
lineDash: [4],
|
||||
width: 3
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0, 0, 255, 0.1)'
|
||||
})
|
||||
})],
|
||||
'GeometryCollection': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'magenta',
|
||||
width: 2
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'magenta'
|
||||
}),
|
||||
image: new ol.style.Circle({
|
||||
radius: 10,
|
||||
fill: null,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'magenta'
|
||||
})
|
||||
})
|
||||
})],
|
||||
'Circle': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'red',
|
||||
width: 2
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,0,0,0.2)'
|
||||
})
|
||||
})]
|
||||
};
|
||||
|
||||
var styleFunction = function(feature, resolution) {
|
||||
return styles[feature.getGeometry().getType()];
|
||||
};
|
||||
|
||||
var vectorSource = new ol.source.GeoJSON(
|
||||
/** @type {olx.source.GeoJSONOptions} */ ({
|
||||
object: {
|
||||
'type': 'FeatureCollection',
|
||||
'crs': {
|
||||
'type': 'name',
|
||||
'properties': {
|
||||
'name': 'EPSG:3857'
|
||||
}
|
||||
},
|
||||
'features': [
|
||||
{
|
||||
'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], [0e6, 8e6], [0e6, 6e6]]],
|
||||
[[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'GeometryCollection',
|
||||
'geometries': [
|
||||
{
|
||||
'type': 'LineString',
|
||||
'coordinates': [[-5e6, -5e6], [0e6, -5e6]]
|
||||
},
|
||||
{
|
||||
'type': 'Point',
|
||||
'coordinates': [4e6, -5e6]
|
||||
},
|
||||
{
|
||||
'type': 'Polygon',
|
||||
'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}));
|
||||
|
||||
vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
|
||||
|
||||
var vectorLayer = new ol.layer.Vector({
|
||||
source: vectorSource,
|
||||
styleFunction: styleFunction
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
}),
|
||||
vectorLayer
|
||||
],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -24,7 +23,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
// FIXME use an ol.geom.Circle to display a circle with accuracy
|
||||
// FIXME this circle will need to compensate for the pointResolution of the
|
||||
// FIXME EPSG:3857 projection
|
||||
|
||||
goog.require('ol.Geolocation');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.Overlay');
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -32,7 +31,7 @@
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">GPX example</h4>
|
||||
<p id="shortdesc">Example of using the GPX parser.</p>
|
||||
<p id="shortdesc">Example of using the GPX source.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="gpx.js" target="_blank">gpx.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
@@ -43,6 +42,7 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -3,44 +3,84 @@ goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.GPX');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.source.GPX');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
source: new ol.source.BingMaps({
|
||||
imagerySet: 'Aerial',
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
|
||||
})
|
||||
});
|
||||
|
||||
var style = {
|
||||
'Point': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,255,0,0.4)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ff0',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})],
|
||||
'LineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f00',
|
||||
width: 3
|
||||
})
|
||||
})],
|
||||
'MultiLineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0f0',
|
||||
width: 3
|
||||
})
|
||||
})]
|
||||
};
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.GPX(),
|
||||
url: 'data/gpx/yahoo.xml'
|
||||
})
|
||||
source: new ol.source.GPX({
|
||||
reprojectTo: 'EPSG:3857',
|
||||
url: 'data/gpx/fells_loop.gpx'
|
||||
}),
|
||||
styleFunction: function(feature, resolution) {
|
||||
return style[feature.getGeometry().getType()];
|
||||
}
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
target: document.getElementById('map'),
|
||||
view: new ol.View2D({
|
||||
center: [-7916461.9312699, 5226343.9091441],
|
||||
zoom: 11
|
||||
center: [-7916041.528716288, 5228379.045749711],
|
||||
zoom: 12
|
||||
})
|
||||
});
|
||||
|
||||
var displayFeatureInfo = function(pixel) {
|
||||
map.getFeatures({
|
||||
pixel: pixel,
|
||||
layers: [vector],
|
||||
success: function(featuresByLayer) {
|
||||
var features = featuresByLayer[0];
|
||||
var info = [];
|
||||
for (var i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('name') + ': ' + features[i].get('type'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || ' ';
|
||||
}
|
||||
var features = [];
|
||||
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
features.push(feature);
|
||||
});
|
||||
if (features.length > 0) {
|
||||
var info = [];
|
||||
var i, ii;
|
||||
for (i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('desc'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
|
||||
map.getTarget().style.cursor = 'pointer';
|
||||
} else {
|
||||
document.getElementById('info').innerHTML = ' ';
|
||||
map.getTarget().style.cursor = '';
|
||||
}
|
||||
};
|
||||
|
||||
$(map.getViewport()).on('mousemove', function(evt) {
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -23,7 +22,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -14,7 +13,7 @@
|
||||
position: relative;
|
||||
}
|
||||
#popup {
|
||||
padding-bottom: 45px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -23,7 +22,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,7 +34,7 @@
|
||||
<div id="map" class="map">
|
||||
<div id="popup"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
105
examples/icon.js
105
examples/icon.js
@@ -1,14 +1,12 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.Overlay');
|
||||
goog.require('ol.OverlayPositioning');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.GeoJSON');
|
||||
goog.require('ol.source.TileJSON');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Icon');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
@@ -19,33 +17,42 @@ var raster = new ol.layer.Tile({
|
||||
})
|
||||
});
|
||||
|
||||
var style = new ol.style.Style({
|
||||
symbolizers: [
|
||||
new ol.style.Icon({
|
||||
url: 'data/icon.png',
|
||||
yOffset: -22
|
||||
})
|
||||
]
|
||||
});
|
||||
var styleArray = [new ol.style.Style({
|
||||
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
|
||||
anchor: [0.5, 46],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'pixels',
|
||||
src: 'data/icon.png'
|
||||
}))
|
||||
})];
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [
|
||||
new ol.Feature({
|
||||
name: 'Null Island',
|
||||
population: 4000,
|
||||
rainfall: 500,
|
||||
geometry: new ol.geom.Point([0, 0])
|
||||
})
|
||||
]
|
||||
}),
|
||||
style: style
|
||||
source: new ol.source.GeoJSON(/** @type {olx.source.GeoJSONOptions} */ ({
|
||||
object: {
|
||||
'type': 'FeatureCollection',
|
||||
'features': [{
|
||||
'type': 'Feature',
|
||||
'properties': {
|
||||
'name': 'Null Island',
|
||||
'population': 4000,
|
||||
'rainfall': 500
|
||||
},
|
||||
'geometry': {
|
||||
'type': 'Point',
|
||||
'coordinates': [0, 0]
|
||||
}
|
||||
}]
|
||||
}
|
||||
})),
|
||||
styleFunction: function(feature, resolution) {
|
||||
return styleArray;
|
||||
}
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
target: document.getElementById('map'),
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 3
|
||||
@@ -61,26 +68,36 @@ var popup = new ol.Overlay({
|
||||
});
|
||||
map.addOverlay(popup);
|
||||
|
||||
|
||||
// display popup on click
|
||||
map.on('singleclick', function(evt) {
|
||||
map.getFeatures({
|
||||
pixel: evt.getPixel(),
|
||||
layers: [vector],
|
||||
success: function(layerFeatures) {
|
||||
var feature = layerFeatures[0][0];
|
||||
if (feature) {
|
||||
var geometry = feature.getGeometry();
|
||||
var coord = geometry.getCoordinates();
|
||||
popup.setPosition(coord);
|
||||
$(element).popover({
|
||||
'placement': 'top',
|
||||
'html': true,
|
||||
'content': feature.get('name')
|
||||
});
|
||||
$(element).popover('show');
|
||||
} else {
|
||||
$(element).popover('destroy');
|
||||
}
|
||||
}
|
||||
});
|
||||
var feature = map.forEachFeatureAtPixel(evt.getPixel(),
|
||||
function(feature, layer) {
|
||||
return feature;
|
||||
});
|
||||
if (feature) {
|
||||
var geometry = feature.getGeometry();
|
||||
var coord = geometry.getCoordinates();
|
||||
popup.setPosition(coord);
|
||||
$(element).popover({
|
||||
'placement': 'top',
|
||||
'html': true,
|
||||
'content': feature.get('name')
|
||||
});
|
||||
$(element).popover('show');
|
||||
} else {
|
||||
$(element).popover('destroy');
|
||||
}
|
||||
});
|
||||
|
||||
// change mouse cursor when over marker
|
||||
$(map.getViewport()).on('mousemove', function(e) {
|
||||
var pixel = map.getEventPixel(e.originalEvent);
|
||||
var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
return true;
|
||||
});
|
||||
if (hit) {
|
||||
map.getTarget().style.cursor = 'pointer';
|
||||
} else {
|
||||
map.getTarget().style.cursor = '';
|
||||
}
|
||||
});
|
||||
|
||||
55
examples/igc.html
Normal file
55
examples/igc.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!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="../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>IGC 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">IGC example</h4>
|
||||
<p id="shortdesc">Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file. The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="igc.js" target="_blank">igc.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">complex-geometry, closest-feature, igc, opencyclemap</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="loader.js?id=igc" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
137
examples/igc.js
Normal file
137
examples/igc.js
Normal file
@@ -0,0 +1,137 @@
|
||||
goog.require('ol.Attribution');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.geom.LineString');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.IGC');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var colors = {
|
||||
'Clement Latour': 'rgba(0, 0, 255, 0.7)',
|
||||
'Damien de Baesnt': 'rgba(0, 215, 255, 0.7)',
|
||||
'Sylvain Dhonneur': 'rgba(0, 165, 255, 0.7)',
|
||||
'Tom Payne': 'rgba(0, 255, 255, 0.7)',
|
||||
'Ulrich Prinz': 'rgba(0, 215, 255, 0.7)'
|
||||
};
|
||||
|
||||
var styleCache = {};
|
||||
var styleFunction = function(feature, resolution) {
|
||||
var color = colors[feature.get('PLT')];
|
||||
var styleArray = styleCache[color];
|
||||
if (!styleArray) {
|
||||
styleArray = [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: color,
|
||||
width: 3
|
||||
})
|
||||
})];
|
||||
styleCache[color] = styleArray;
|
||||
}
|
||||
return styleArray;
|
||||
};
|
||||
|
||||
var vectorSource = new ol.source.IGC({
|
||||
urls: [
|
||||
'data/igc/Clement-Latour.igc',
|
||||
'data/igc/Damien-de-Baenst.igc',
|
||||
'data/igc/Sylvain-Dhonneur.igc',
|
||||
'data/igc/Tom-Payne.igc',
|
||||
'data/igc/Ulrich-Prinz.igc'
|
||||
]
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM({
|
||||
attributions: [
|
||||
new ol.Attribution({
|
||||
html: 'All maps © ' +
|
||||
'<a href="http://www.opencyclemap.org/">OpenCycleMap</a>'
|
||||
}),
|
||||
ol.source.OSM.DATA_ATTRIBUTION
|
||||
],
|
||||
url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
|
||||
})
|
||||
}),
|
||||
new ol.layer.Vector({
|
||||
source: vectorSource,
|
||||
styleFunction: styleFunction
|
||||
})
|
||||
],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [703365.7089403362, 5714629.865071137],
|
||||
zoom: 9
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
var point = null;
|
||||
var line = null;
|
||||
var displaySnap = function(coordinate) {
|
||||
var closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate);
|
||||
var info = document.getElementById('info');
|
||||
if (closestFeature === null) {
|
||||
point = null;
|
||||
line = null;
|
||||
info.innerHTML = ' ';
|
||||
} else {
|
||||
info.innerHTML = closestFeature.get('PLT');
|
||||
var geometry = closestFeature.getGeometry();
|
||||
var closestPoint = geometry.getClosestPoint(coordinate);
|
||||
if (point === null) {
|
||||
point = new ol.geom.Point(closestPoint);
|
||||
} else {
|
||||
point.setCoordinates(closestPoint);
|
||||
}
|
||||
if (line === null) {
|
||||
line = new ol.geom.LineString([coordinate, closestPoint]);
|
||||
} else {
|
||||
line.setCoordinates([coordinate, closestPoint]);
|
||||
}
|
||||
}
|
||||
map.requestRenderFrame();
|
||||
};
|
||||
|
||||
$(map.getViewport()).on('mousemove', function(evt) {
|
||||
var coordinate = map.getEventCoordinate(evt.originalEvent);
|
||||
displaySnap(coordinate);
|
||||
});
|
||||
|
||||
map.on('singleclick', function(evt) {
|
||||
var coordinate = evt.getCoordinate();
|
||||
displaySnap(coordinate);
|
||||
});
|
||||
|
||||
var imageStyle = new ol.style.Circle({
|
||||
radius: 5,
|
||||
fill: null,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(255,0,0,0.9)',
|
||||
width: 1
|
||||
})
|
||||
});
|
||||
var strokeStyle = new ol.style.Stroke({
|
||||
color: 'rgba(255,0,0,0.9)',
|
||||
width: 1
|
||||
});
|
||||
map.on('postcompose', function(evt) {
|
||||
var render = evt.getRender();
|
||||
if (point !== null) {
|
||||
render.setImageStyle(imageStyle);
|
||||
render.drawPointGeometry(point);
|
||||
}
|
||||
if (line !== null) {
|
||||
render.setFillStrokeStyle(null, strokeStyle);
|
||||
render.drawLineStringGeometry(line);
|
||||
}
|
||||
});
|
||||
58
examples/image-vector-layer.html
Normal file
58
examples/image-vector-layer.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!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="../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>Image vector layer 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="span8">
|
||||
<h4 id="title">Image vector example</h4>
|
||||
<p id="shortdesc">Example of an image vector layer.</p>
|
||||
<div id="docs">
|
||||
<p>This example uses a <code>ol.source.ImageVector</code> source. That source gets vector features from the
|
||||
<code>ol.source.Vector</code> it's configured with, and draw these features to an HTML5 canvas element that
|
||||
is then used as the image of an image layer.</p>
|
||||
<p>See the <a href="image-vector-layer.js" target="_blank">image-vector-layer.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, image</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=image-vector-layer" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
100
examples/image-vector-layer.js
Normal file
100
examples/image-vector-layer.js
Normal file
@@ -0,0 +1,100 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Image');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.render.FeaturesOverlay');
|
||||
goog.require('ol.source.GeoJSON');
|
||||
goog.require('ol.source.ImageVector');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var styleArray = [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.6)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#319FD3',
|
||||
width: 1
|
||||
})
|
||||
})];
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
}),
|
||||
new ol.layer.Image({
|
||||
source: new ol.source.ImageVector({
|
||||
source: new ol.source.GeoJSON({
|
||||
url: 'data/countries.geojson'
|
||||
}),
|
||||
styleFunction: function(feature, resolution) {
|
||||
return styleArray;
|
||||
}
|
||||
})
|
||||
})
|
||||
],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
})
|
||||
});
|
||||
|
||||
var highlightStyleArray = [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f00',
|
||||
width: 1
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,0,0,0.1)'
|
||||
})
|
||||
})];
|
||||
|
||||
var featuresOverlay = new ol.render.FeaturesOverlay({
|
||||
map: map,
|
||||
styleFunction: function(feature, resolution) {
|
||||
return highlightStyleArray;
|
||||
}
|
||||
});
|
||||
|
||||
var highlight;
|
||||
var displayFeatureInfo = function(pixel) {
|
||||
|
||||
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
return feature;
|
||||
});
|
||||
|
||||
var info = document.getElementById('info');
|
||||
if (feature) {
|
||||
info.innerHTML = feature.getId() + ': ' + feature.get('name');
|
||||
} else {
|
||||
info.innerHTML = ' ';
|
||||
}
|
||||
|
||||
if (feature !== highlight) {
|
||||
if (highlight) {
|
||||
featuresOverlay.removeFeature(highlight);
|
||||
}
|
||||
if (feature) {
|
||||
featuresOverlay.addFeature(feature);
|
||||
}
|
||||
highlight = feature;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$(map.getViewport()).on('mousemove', function(evt) {
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
displayFeatureInfo(pixel);
|
||||
});
|
||||
|
||||
map.on('singleclick', function(evt) {
|
||||
var pixel = evt.getPixel();
|
||||
displayFeatureInfo(pixel);
|
||||
});
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -36,7 +35,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,7 +55,7 @@
|
||||
<p id="shortdesc">Demonstrates the use of a Shape symbolizer to render earthquake locations.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example parses a KML file and renders the features as a vector layer. The layer is given a <code>ol.style.Style</code> that renders earthquake locations with a size relative to their magnitude. The style uses a <code>ol.style.Shape</code> symbolizer where the <code>size</code> comes from the <code>magnitude</code> attribute on the features.
|
||||
This example parses a KML file and renders the features as a vector layer. The layer is given a <code>styleFunction</code> that renders earthquake locations with a size relative to their magnitude.
|
||||
</p>
|
||||
<p>See the <a href="kml-earthquakes.js" target="_blank">kml-earthquakes.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
|
||||
@@ -1,41 +1,49 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.expr');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.KML');
|
||||
goog.require('ol.source.KML');
|
||||
goog.require('ol.source.Stamen');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Shape');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
|
||||
var style = new ol.style.Style({
|
||||
symbolizers: [
|
||||
new ol.style.Shape({
|
||||
size: ol.expr.parse('5 + 20 * (magnitude - 5)'),
|
||||
fill: new ol.style.Fill({
|
||||
color: '#ff9900',
|
||||
opacity: 0.4
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ffcc00',
|
||||
opacity: 0.2
|
||||
var styleCache = {};
|
||||
var styleFunction = function(feature, resolution) {
|
||||
// 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
|
||||
// standards-violating <magnitude> tag in each Placemark. We extract it from
|
||||
// the Placemark's name instead.
|
||||
var name = feature.get('name');
|
||||
var magnitude = parseFloat(name.substr(2));
|
||||
var radius = 5 + 20 * (magnitude - 5);
|
||||
var style = styleCache[radius];
|
||||
if (!style) {
|
||||
style = [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: radius,
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 153, 0, 0.4)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(255, 204, 0, 0.2)',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})
|
||||
]
|
||||
});
|
||||
})];
|
||||
styleCache[radius] = style;
|
||||
}
|
||||
return style;
|
||||
};
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.KML(),
|
||||
source: new ol.source.KML({
|
||||
reprojectTo: 'EPSG:3857',
|
||||
url: 'data/kml/2012_Earthquakes_Mag5.kml'
|
||||
}),
|
||||
style: style
|
||||
styleFunction: styleFunction
|
||||
});
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
@@ -65,29 +73,23 @@ var displayFeatureInfo = function(pixel) {
|
||||
left: pixel[0] + 'px',
|
||||
top: (pixel[1] - 15) + 'px'
|
||||
});
|
||||
map.getFeatures({
|
||||
pixel: pixel,
|
||||
layers: [vector],
|
||||
success: function(layerFeatures) {
|
||||
var feature = layerFeatures[0][0];
|
||||
if (feature) {
|
||||
info.tooltip('hide')
|
||||
.attr('data-original-title', feature.get('name'))
|
||||
.tooltip('fixTitle')
|
||||
.tooltip('show');
|
||||
} else {
|
||||
info.tooltip('hide');
|
||||
}
|
||||
}
|
||||
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
return feature;
|
||||
});
|
||||
if (feature) {
|
||||
info.tooltip('hide')
|
||||
.attr('data-original-title', feature.get('name'))
|
||||
.tooltip('fixTitle')
|
||||
.tooltip('show');
|
||||
} else {
|
||||
info.tooltip('hide');
|
||||
}
|
||||
};
|
||||
|
||||
$(map.getViewport()).on('mousemove', function(evt) {
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
displayFeatureInfo(pixel);
|
||||
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
|
||||
});
|
||||
|
||||
map.on('singleclick', function(evt) {
|
||||
var pixel = evt.getPixel();
|
||||
displayFeatureInfo(pixel);
|
||||
displayFeatureInfo(evt.getPixel());
|
||||
});
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -26,7 +25,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,29 +1,26 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.expr');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.KML');
|
||||
goog.require('ol.source.KML');
|
||||
goog.require('ol.source.Stamen');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
/**
|
||||
* Register a function to be used in a symbolizer. Here we want the opacity
|
||||
* of polygons to be based on the offset from local noon. For example, a
|
||||
* timezone where it is currently noon would have an opacity of 0.75. And a
|
||||
* timezone where it is currently midnight would have an opacity of 0. This
|
||||
* doesn't account for daylight savings, so don't use it to plan your vacation.
|
||||
/*
|
||||
* Compute the style of the feature. Here we want the opacity of polygons to
|
||||
* be based on the offset from local noon. For example, a timezone where it is
|
||||
* currently noon would have an opacity of 0.75. And a timezone where it is
|
||||
* currently midnight would have an opacity of 0. This doesn't account for
|
||||
* daylight savings, so don't use it to plan your vacation.
|
||||
*/
|
||||
ol.expr.register('getOpacity', function() {
|
||||
var feature = this;
|
||||
var styleFunction = function(feature, resolution) {
|
||||
var offset = 0;
|
||||
var name = feature.get('name'); // e.g. GMT -08:30
|
||||
var match = name.match(/([-+]\d{2}):(\d{2})$/);
|
||||
var match = name.match(/([\-+]\d{2}):(\d{2})$/);
|
||||
if (match) {
|
||||
var hours = parseInt(match[1], 10);
|
||||
var minutes = parseInt(match[2], 10);
|
||||
@@ -37,27 +34,22 @@ ol.expr.register('getOpacity', function() {
|
||||
if (delta > 12) {
|
||||
delta = 24 - delta;
|
||||
}
|
||||
return 0.75 * (1 - delta / 12);
|
||||
});
|
||||
|
||||
var style = new ol.style.Style({
|
||||
symbolizers: [
|
||||
new ol.style.Fill({
|
||||
color: '#ffff33',
|
||||
opacity: ol.expr.parse('getOpacity()')
|
||||
var opacity = 0.75 * (1 - delta / 12);
|
||||
return [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: [0xff, 0xff, 0x33, opacity]
|
||||
}),
|
||||
new ol.style.Stroke({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ffffff'
|
||||
})
|
||||
]
|
||||
});
|
||||
})];
|
||||
};
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.KML(),
|
||||
source: new ol.source.KML({
|
||||
url: 'data/kml/timezones.kml'
|
||||
}),
|
||||
style: style
|
||||
styleFunction: styleFunction
|
||||
});
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
@@ -87,29 +79,23 @@ var displayFeatureInfo = function(pixel) {
|
||||
left: pixel[0] + 'px',
|
||||
top: (pixel[1] - 15) + 'px'
|
||||
});
|
||||
map.getFeatures({
|
||||
pixel: pixel,
|
||||
layers: [vector],
|
||||
success: function(layerFeatures) {
|
||||
var feature = layerFeatures[0][0];
|
||||
if (feature) {
|
||||
info.tooltip('hide')
|
||||
.attr('data-original-title', feature.get('name'))
|
||||
.tooltip('fixTitle')
|
||||
.tooltip('show');
|
||||
} else {
|
||||
info.tooltip('hide');
|
||||
}
|
||||
}
|
||||
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
return feature;
|
||||
});
|
||||
if (feature) {
|
||||
info.tooltip('hide')
|
||||
.attr('data-original-title', feature.get('name'))
|
||||
.tooltip('fixTitle')
|
||||
.tooltip('show');
|
||||
} else {
|
||||
info.tooltip('hide');
|
||||
}
|
||||
};
|
||||
|
||||
$(map.getViewport()).on('mousemove', function(evt) {
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
displayFeatureInfo(pixel);
|
||||
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
|
||||
});
|
||||
|
||||
map.on('singleclick', function(evt) {
|
||||
var pixel = evt.getPixel();
|
||||
displayFeatureInfo(pixel);
|
||||
displayFeatureInfo(evt.getPixel());
|
||||
});
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -32,7 +31,7 @@
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">KML example</h4>
|
||||
<p id="shortdesc">Example of using the KML parser.</p>
|
||||
<p id="shortdesc">Example of using the KML source.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="kml.js" target="_blank">kml.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
|
||||
@@ -3,55 +3,50 @@ goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.KML');
|
||||
goog.require('ol.source.TileWMS');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.source.KML');
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.TileWMS({
|
||||
url: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
|
||||
crossOrigin: null,
|
||||
params: {
|
||||
'LAYERS': 'basic',
|
||||
'VERSION': '1.1.1',
|
||||
'FORMAT': 'image/jpeg'
|
||||
}
|
||||
source: new ol.source.BingMaps({
|
||||
imagerySet: 'Aerial',
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
|
||||
})
|
||||
});
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.KML({
|
||||
maxDepth: 1, extractStyles: true, extractAttributes: true
|
||||
}),
|
||||
url: 'data/kml/lines.kml'
|
||||
source: new ol.source.KML({
|
||||
reprojectTo: 'EPSG:3857',
|
||||
url: 'data/kml/2012-02-10.kml'
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
target: document.getElementById('map'),
|
||||
view: new ol.View2D({
|
||||
projection: 'EPSG:4326',
|
||||
center: [-112.169, 36.099],
|
||||
zoom: 11
|
||||
center: [876970.8463461736, 5859807.853963373],
|
||||
zoom: 10
|
||||
})
|
||||
});
|
||||
|
||||
var displayFeatureInfo = function(pixel) {
|
||||
map.getFeatures({
|
||||
pixel: pixel,
|
||||
layers: [vector],
|
||||
success: function(featuresByLayer) {
|
||||
var features = featuresByLayer[0];
|
||||
var info = [];
|
||||
for (var i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('name'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || ' ';
|
||||
}
|
||||
var features = [];
|
||||
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
features.push(feature);
|
||||
});
|
||||
if (features.length > 0) {
|
||||
var info = [];
|
||||
var i, ii;
|
||||
for (i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('name'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
|
||||
map.getTarget().style.cursor = 'pointer';
|
||||
} else {
|
||||
document.getElementById('info').innerHTML = ' ';
|
||||
map.getTarget().style.cursor = '';
|
||||
}
|
||||
};
|
||||
|
||||
$(map.getViewport()).on('mousemove', function(evt) {
|
||||
|
||||
54
examples/layer-clipping-webgl.html
Normal file
54
examples/layer-clipping-webgl.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!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="../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>Layer WebGL clipping 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 id="no-webgl" class="alert alert-error" style="display: none">
|
||||
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Layer WebGL clipping example</h4>
|
||||
<p id="shortdesc">Layer WebGL clipping example.</p>
|
||||
<div id="docs">
|
||||
<p>This example shows how to use the <code>precompose</code> and <code>postcompose</code> rendering hooks to clip layers using WebGL.</p>
|
||||
<p>See the <a href="layer-clipping-webgl.js" target="_blank">layer-clipping-webgl.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">clipping, webgl, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=layer-clipping-webgl" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
103
examples/layer-clipping-webgl.js
Normal file
103
examples/layer-clipping-webgl.js
Normal file
@@ -0,0 +1,103 @@
|
||||
goog.require('ol.BrowserFeature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
if (!ol.BrowserFeature.HAS_WEBGL) {
|
||||
var info = document.getElementById('no-webgl');
|
||||
/**
|
||||
* display error message
|
||||
*/
|
||||
info.style.display = '';
|
||||
} else {
|
||||
|
||||
var osm = new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [osm],
|
||||
renderer: ol.RendererHint.WEBGL,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var fragmentShaderSource = [
|
||||
'precision mediump float;',
|
||||
'void main() {',
|
||||
'}'
|
||||
].join('');
|
||||
|
||||
var vertexShaderSource = [
|
||||
'attribute vec2 a_position;',
|
||||
'void main() {',
|
||||
' gl_Position = vec4(a_position, 0, 1);',
|
||||
'}'
|
||||
].join('');
|
||||
|
||||
osm.on('precompose', function(event) {
|
||||
var context = event.getGlContext();
|
||||
|
||||
var gl = context.getGL();
|
||||
var program = gl.createProgram();
|
||||
|
||||
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
|
||||
gl.shaderSource(vertexShader, vertexShaderSource);
|
||||
gl.compileShader(vertexShader);
|
||||
gl.attachShader(program, vertexShader);
|
||||
|
||||
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
|
||||
gl.shaderSource(fragmentShader, fragmentShaderSource);
|
||||
gl.compileShader(fragmentShader);
|
||||
gl.attachShader(program, fragmentShader);
|
||||
|
||||
gl.linkProgram(program);
|
||||
context.useProgram(program);
|
||||
|
||||
var positionLocation = gl.getAttribLocation(program, 'a_position');
|
||||
|
||||
gl.enable(gl.STENCIL_TEST);
|
||||
gl.colorMask(false, false, false, false);
|
||||
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
|
||||
gl.stencilFunc(gl.ALWAYS, 1, 0xff);
|
||||
|
||||
var buffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
|
||||
// first band
|
||||
-1.0, -1.0, -0.75, -1.0, -1.0, 1.0,
|
||||
-1.0, 1.0, -0.75, -1.0, -0.75, 1.0,
|
||||
// second band
|
||||
-0.5, -1.0, -0.25, -1.0, -0.5, 1.0,
|
||||
-0.5, 1.0, -0.25, -1.0, -0.25, 1.0,
|
||||
// third band
|
||||
0.0, -1.0, 0.25, -1.0, 0.0, 1.0,
|
||||
0.0, 1.0, 0.25, -1.0, 0.25, 1.0,
|
||||
// forth band
|
||||
0.5, -1.0, 0.75, -1.0, 0.5, 1.0,
|
||||
0.5, 1.0, 0.75, -1.0, 0.75, 1.0
|
||||
]), gl.STATIC_DRAW);
|
||||
|
||||
gl.enableVertexAttribArray(positionLocation);
|
||||
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 24);
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, null);
|
||||
gl.deleteBuffer(buffer);
|
||||
|
||||
gl.colorMask(true, true, true, true);
|
||||
gl.stencilFunc(gl.NOTEQUAL, 0, 0xff);
|
||||
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
|
||||
});
|
||||
|
||||
osm.on('postcompose', function(event) {
|
||||
var context = event.getGlContext();
|
||||
var gl = context.getGL();
|
||||
gl.disable(gl.STENCIL_TEST);
|
||||
});
|
||||
}
|
||||
49
examples/layer-clipping.html
Normal file
49
examples/layer-clipping.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!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="../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>Layer clipping 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="span12">
|
||||
<h4 id="title">Layer clipping example</h4>
|
||||
<p id="shortdesc">Layer clipping example.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="layer-clipping.js" target="_blank">layer-clipping.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">clipping, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=layer-clipping" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
42
examples/layer-clipping.js
Normal file
42
examples/layer-clipping.js
Normal file
@@ -0,0 +1,42 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
var osm = new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [osm],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
osm.on('precompose', function(event) {
|
||||
var ctx = event.getContext();
|
||||
ctx.save();
|
||||
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
ctx.scale(3, 3);
|
||||
ctx.translate(-75, -80);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(75, 40);
|
||||
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
|
||||
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
|
||||
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
|
||||
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
|
||||
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
|
||||
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
|
||||
ctx.clip();
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
});
|
||||
|
||||
osm.on('postcompose', function(event) {
|
||||
var ctx = event.getContext();
|
||||
ctx.restore();
|
||||
});
|
||||
@@ -19,7 +19,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
59
examples/layer-spy.html
Normal file
59
examples/layer-spy.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!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="../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>Layer Spy 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="span12">
|
||||
<h4 id="title">Layer spy example</h4>
|
||||
<p id="shortdesc">View a portion of one layer over another</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
|
||||
These listeners get an event with a reference to the Canvas rendering context.
|
||||
In this example, the <code>precompose</code> listener sets a clipping mask around the most
|
||||
recent mouse position, giving you a spyglass effect for viewing one layer over another.
|
||||
</p>
|
||||
<p>
|
||||
Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.
|
||||
</p>
|
||||
<p>See the <a href="layer-spy.js" target="_blank">layer-spy.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">spy, image manipulation</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=layer-spy" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
68
examples/layer-spy.js
Normal file
68
examples/layer-spy.js
Normal file
@@ -0,0 +1,68 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.BingMaps');
|
||||
|
||||
var key = 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3';
|
||||
|
||||
var roads = new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({key: key, imagerySet: 'Road'})
|
||||
});
|
||||
|
||||
var imagery = new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [roads, imagery],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: ol.proj.transform([-109, 46.5], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 6
|
||||
})
|
||||
});
|
||||
|
||||
var radius = 75;
|
||||
$(document).keydown(function(evt) {
|
||||
if (evt.which === 38) {
|
||||
radius = Math.min(radius + 5, 150);
|
||||
map.requestRenderFrame();
|
||||
} else if (evt.which === 40) {
|
||||
radius = Math.max(radius - 5, 25);
|
||||
map.requestRenderFrame();
|
||||
}
|
||||
});
|
||||
|
||||
// get the pixel position with every move
|
||||
var mousePosition = null;
|
||||
$(map.getViewport()).on('mousemove', function(evt) {
|
||||
mousePosition = map.getEventPixel(evt.originalEvent);
|
||||
map.requestRenderFrame();
|
||||
}).on('mouseout', function() {
|
||||
mousePosition = null;
|
||||
map.requestRenderFrame();
|
||||
});
|
||||
|
||||
// before rendering the layer, do some clipping
|
||||
imagery.on('precompose', function(event) {
|
||||
var ctx = event.getContext();
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
if (mousePosition) {
|
||||
// only show a circle around the mouse
|
||||
ctx.arc(mousePosition[0], mousePosition[1], radius, 0, 2 * Math.PI);
|
||||
ctx.lineWidth = 5;
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.clip();
|
||||
});
|
||||
|
||||
// after rendering the layer, restore the canvas context
|
||||
imagery.on('postcompose', function(event) {
|
||||
var ctx = event.getContext();
|
||||
ctx.restore();
|
||||
});
|
||||
50
examples/layer-swipe.html
Normal file
50
examples/layer-swipe.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!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="../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>Layer Swipe 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>
|
||||
<input id="swipe" type="range" style="width: 100%">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Layer Swipe example</h4>
|
||||
<p id="shortdesc">Example of a Layer swipe map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="layer-swipe.js" target="_blank">layer-swipe.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">swipe, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=layer-swipe" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
47
examples/layer-swipe.js
Normal file
47
examples/layer-swipe.js
Normal file
@@ -0,0 +1,47 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
var osm = new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
});
|
||||
var bing = new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
|
||||
imagerySet: 'Aerial'
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [osm, bing],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var swipe = document.getElementById('swipe');
|
||||
|
||||
bing.on('precompose', function(event) {
|
||||
var ctx = event.getContext();
|
||||
var width = ctx.canvas.width * (swipe.value / 100);
|
||||
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
|
||||
ctx.clip();
|
||||
});
|
||||
|
||||
bing.on('postcompose', function(event) {
|
||||
var ctx = event.getContext();
|
||||
ctx.restore();
|
||||
});
|
||||
|
||||
swipe.addEventListener('change', function() {
|
||||
map.requestRenderFrame();
|
||||
}, false);
|
||||
@@ -59,6 +59,7 @@
|
||||
pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(params[key]));
|
||||
}
|
||||
|
||||
document.write('<link rel="stylesheet" href="../css/ol.css" type="text/css">');
|
||||
var url = 'http://' + host + '/compile?' + pairs.join('&');
|
||||
document.write('<script type="text/javascript" src="' + url + '"></script>');
|
||||
}());
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
<title>Mobile full screen example</title>
|
||||
<style type="text/css">
|
||||
html, body, .map {
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -38,7 +37,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -60,7 +59,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
49
examples/rtree.html
Normal file
49
examples/rtree.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!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="../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>R-Tree 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="span12">
|
||||
<h4 id="title">R-Tree example</h4>
|
||||
<p id="shortdesc">R-Tree example. Please note that this example only works locally, it does not work when the examples are hosted. This is because it accesses internals the R-Tree data structure, which are not exported in the API.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="rtree.js" target="_blank">rtree.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, rtree</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=rtree" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
109
examples/rtree.js
Normal file
109
examples/rtree.js
Normal file
@@ -0,0 +1,109 @@
|
||||
// NOCOMPILE
|
||||
// FIXME this example dives into private members and will never compile :)
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.extent');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.geom.Polygon');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var i, ii, j, jj;
|
||||
|
||||
var count = 2000;
|
||||
var features = new Array(count);
|
||||
var e = 18000000;
|
||||
for (i = 0; i < count; ++i) {
|
||||
features[i] = new ol.Feature({
|
||||
'geometry': new ol.geom.Point(
|
||||
[2 * e * Math.random() - e, 2 * e * Math.random() - e])
|
||||
});
|
||||
}
|
||||
var vectorSource = new ol.source.Vector({
|
||||
features: features
|
||||
});
|
||||
|
||||
var styleArray = [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 3,
|
||||
fill: null,
|
||||
stroke: new ol.style.Stroke({color: 'red', width: 1})
|
||||
})
|
||||
})];
|
||||
|
||||
var colors = ['red', 'orange', 'yellow', 'blue', 'green', 'indigo', 'violet'];
|
||||
var depthStyle = [];
|
||||
for (i = 0, ii = colors.length; i < ii; ++i) {
|
||||
depthStyle[i] = new ol.style.Style({
|
||||
fill: null,
|
||||
image: null,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: colors[i],
|
||||
width: (7 - i) / 2
|
||||
}),
|
||||
zIndex: i
|
||||
});
|
||||
}
|
||||
var extentsByDepth = [];
|
||||
vectorSource.rBush_.forEachNode(function(node) {
|
||||
if (node.height > 0) {
|
||||
if (goog.isDef(extentsByDepth[node.height])) {
|
||||
extentsByDepth[node.height].push(node.extent);
|
||||
} else {
|
||||
extentsByDepth[node.height] = [node.extent];
|
||||
}
|
||||
}
|
||||
});
|
||||
var rtreeExtentFeatures = [];
|
||||
for (i = 0, ii = extentsByDepth.length; i < ii; ++i) {
|
||||
var extents = extentsByDepth[i];
|
||||
if (!goog.isDef(extents)) {
|
||||
continue;
|
||||
}
|
||||
for (j = 0, jj = extents.length; j < jj; ++j) {
|
||||
var extent = extents[j];
|
||||
var geometry = new ol.geom.Polygon([[
|
||||
ol.extent.getBottomLeft(extent),
|
||||
ol.extent.getTopLeft(extent),
|
||||
ol.extent.getTopRight(extent),
|
||||
ol.extent.getBottomRight(extent)
|
||||
]]);
|
||||
var feature = new ol.Feature({
|
||||
'geometry': geometry,
|
||||
'styleArray': [depthStyle[i]]
|
||||
});
|
||||
rtreeExtentFeatures.push(feature);
|
||||
}
|
||||
}
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: vectorSource,
|
||||
styleFunction: function(feature, resolution) {
|
||||
return styleArray;
|
||||
}
|
||||
});
|
||||
|
||||
var rtree = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: rtreeExtentFeatures
|
||||
}),
|
||||
styleFunction: function(feature, resolution) {
|
||||
return feature.get('styleArray');
|
||||
}
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [vector, rtree],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
108
examples/synthetic-lines.html
Normal file
108
examples/synthetic-lines.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!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="../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>Synthetic lines 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="span12">
|
||||
<h4 id="title">Synthetic lines example</h4>
|
||||
<p id="shortdesc">Synthetic lines example.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="synthetic-lines.js" target="_blank">synthetic-lines.js source</a> to see how this is done.</p>
|
||||
<p>Performance results:</p>
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Device/Browser</th>
|
||||
<th>200 lines</th>
|
||||
<th>500 lines</th>
|
||||
<th>1000 lines</th>
|
||||
<th>2000 lines</th>
|
||||
<th>5000 lines</th>
|
||||
<th>10000 lines</th>
|
||||
<th>20000 lines</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Mac Book Air / Chrome 33 canary</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mac Book Air / FireFox 25</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>22 fps</td>
|
||||
<td>6 fps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mac Book Air / Safari 7</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>40 fps</td>
|
||||
<td>10 fps</td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>iPhone 4S / iOS 7 / Safari</td>
|
||||
<td>60 fps</td>
|
||||
<td>33 fps</td>
|
||||
<td>15 fps</td>
|
||||
<td>5 fps</td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div id="tags">vector</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=synthetic-lines" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="../resources/display-frame-rate.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
66
examples/synthetic-lines.js
Normal file
66
examples/synthetic-lines.js
Normal file
@@ -0,0 +1,66 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.geom.LineString');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var count = 10000;
|
||||
var features = new Array(count);
|
||||
|
||||
var startPoint = [0, 0];
|
||||
var endPoint;
|
||||
|
||||
var delta, deltaX, deltaY;
|
||||
var signX = 1;
|
||||
var signY = -1;
|
||||
|
||||
// Create a square spiral.
|
||||
var i;
|
||||
for (i = 0; i < count; ++i) {
|
||||
delta = (i + 1) * 2500;
|
||||
if (i % 2 === 0) {
|
||||
signY *= -1;
|
||||
} else {
|
||||
signX *= -1;
|
||||
}
|
||||
deltaX = delta * signX;
|
||||
deltaY = delta * signY;
|
||||
endPoint = [startPoint[0] + deltaX, startPoint[1] + deltaY];
|
||||
features[i] = new ol.Feature({
|
||||
'geometry': new ol.geom.LineString([startPoint, endPoint])
|
||||
});
|
||||
startPoint = endPoint;
|
||||
}
|
||||
|
||||
var styleArray = [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#666666',
|
||||
width: 1
|
||||
})
|
||||
})];
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: features
|
||||
}),
|
||||
styleFunction: function(feature, resolution) {
|
||||
return styleArray;
|
||||
}
|
||||
});
|
||||
|
||||
var view = new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 0
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: view
|
||||
});
|
||||
51
examples/synthetic-points.html
Normal file
51
examples/synthetic-points.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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="../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>Synthetic points 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="span12">
|
||||
<h4 id="title">Synthetic points example</h4>
|
||||
<p id="shortdesc">Synthetic points example.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="synthetic-points.js" target="_blank">synthetic-points.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=synthetic-points" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
140
examples/synthetic-points.js
Normal file
140
examples/synthetic-points.js
Normal file
@@ -0,0 +1,140 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.Overlay');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.geom.LineString');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var count = 20000;
|
||||
var features = new Array(count);
|
||||
var e = 18000000;
|
||||
for (var i = 0; i < count; ++i) {
|
||||
features[i] = new ol.Feature({
|
||||
'geometry': new ol.geom.Point(
|
||||
[2 * e * Math.random() - e, 2 * e * Math.random() - e]),
|
||||
'i': i,
|
||||
'size': i % 2 ? 10 : 20
|
||||
});
|
||||
}
|
||||
|
||||
var styles = {
|
||||
'10': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 5,
|
||||
fill: new ol.style.Fill({color: '#666666'}),
|
||||
stroke: new ol.style.Stroke({color: '#bada55', width: 1})
|
||||
})
|
||||
})],
|
||||
'20': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 10,
|
||||
fill: new ol.style.Fill({color: '#666666'}),
|
||||
stroke: new ol.style.Stroke({color: '#bada55', width: 1})
|
||||
})
|
||||
})]
|
||||
};
|
||||
|
||||
var vectorSource = new ol.source.Vector({
|
||||
features: features
|
||||
});
|
||||
var vector = new ol.layer.Vector({
|
||||
source: vectorSource,
|
||||
styleFunction: function(feature, resolution) {
|
||||
return styles[feature.get('size')];
|
||||
}
|
||||
});
|
||||
|
||||
var popup = new ol.Overlay({
|
||||
element: document.getElementById('popup')
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: document.getElementById('map'),
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
}),
|
||||
overlays: [popup]
|
||||
});
|
||||
|
||||
var point = null;
|
||||
var line = null;
|
||||
var displaySnap = function(coordinate) {
|
||||
var closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate);
|
||||
if (closestFeature === null) {
|
||||
point = null;
|
||||
line = null;
|
||||
} else {
|
||||
var geometry = closestFeature.getGeometry();
|
||||
var closestPoint = geometry.getClosestPoint(coordinate);
|
||||
if (point === null) {
|
||||
point = new ol.geom.Point(closestPoint);
|
||||
} else {
|
||||
point.setCoordinates(closestPoint);
|
||||
}
|
||||
if (line === null) {
|
||||
line = new ol.geom.LineString([coordinate, closestPoint]);
|
||||
} else {
|
||||
line.setCoordinates([coordinate, closestPoint]);
|
||||
}
|
||||
}
|
||||
map.requestRenderFrame();
|
||||
};
|
||||
|
||||
$(map.getViewport()).on('mousemove', function(evt) {
|
||||
var coordinate = map.getEventCoordinate(evt.originalEvent);
|
||||
displaySnap(coordinate);
|
||||
});
|
||||
|
||||
map.on('singleclick', function(evt) {
|
||||
var coordinate = evt.getCoordinate();
|
||||
displaySnap(coordinate);
|
||||
});
|
||||
|
||||
var imageStyle = new ol.style.Circle({
|
||||
radius: 10,
|
||||
fill: null,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(255,255,0,0.9)',
|
||||
width: 3
|
||||
})
|
||||
});
|
||||
var strokeStyle = new ol.style.Stroke({
|
||||
color: 'rgba(255,255,0,0.9)',
|
||||
width: 3
|
||||
});
|
||||
map.on('postcompose', function(evt) {
|
||||
var render = evt.getRender();
|
||||
if (point !== null) {
|
||||
render.setImageStyle(imageStyle);
|
||||
render.drawPointGeometry(point);
|
||||
}
|
||||
if (line !== null) {
|
||||
render.setFillStrokeStyle(null, strokeStyle);
|
||||
render.drawLineStringGeometry(line);
|
||||
}
|
||||
});
|
||||
|
||||
$(map.getViewport()).on('mousemove', function(e) {
|
||||
var pixel = map.getEventPixel(e.originalEvent);
|
||||
|
||||
var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
return true;
|
||||
});
|
||||
|
||||
if (hit) {
|
||||
map.getTarget().style.cursor = 'pointer';
|
||||
} else {
|
||||
map.getTarget().style.cursor = '';
|
||||
}
|
||||
});
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,9 +3,8 @@ goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.TopoJSON');
|
||||
goog.require('ol.source.TileJSON');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.source.TopoJSON');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
@@ -17,24 +16,24 @@ var raster = new ol.layer.Tile({
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
url: 'data/topojson/world-110m.json',
|
||||
parser: new ol.parser.TopoJSON()
|
||||
source: new ol.source.TopoJSON({
|
||||
url: 'data/topojson/world-110m.json'
|
||||
}),
|
||||
style: new ol.style.Style({
|
||||
symbolizers: [
|
||||
new ol.style.Fill({
|
||||
color: '#BADA55',
|
||||
opacity: 0.5
|
||||
styleFunction: function(feature, resolution) {
|
||||
var styleArray = [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.6)'
|
||||
}),
|
||||
new ol.style.Stroke({
|
||||
color: '#FFF',
|
||||
opacity: 1,
|
||||
width: 1.5
|
||||
})
|
||||
]
|
||||
})
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#319FD3',
|
||||
width: 1
|
||||
}),
|
||||
zIndex: (feature.getGeometry().getType() !== 'MultiPolygon') ? 2 : 1
|
||||
})];
|
||||
return styleArray;
|
||||
}
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,7 +35,7 @@
|
||||
<div id="docs">
|
||||
<p>See the <a href="vector-layer.js" target="_blank">vector-layer.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, geojson, style</div>
|
||||
<div id="tags">vector, geojson, style, features overlay</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
@@ -1,61 +1,42 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.expr');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.GeoJSON');
|
||||
goog.require('ol.render.FeaturesOverlay');
|
||||
goog.require('ol.source.GeoJSON');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Rule');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
goog.require('ol.style.Text');
|
||||
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
});
|
||||
var styleArray = [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.6)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#319FD3',
|
||||
width: 1
|
||||
})
|
||||
})];
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.GeoJSON(),
|
||||
var vectorLayer = new ol.layer.Vector({
|
||||
source: new ol.source.GeoJSON({
|
||||
url: 'data/countries.geojson'
|
||||
}),
|
||||
style: new ol.style.Style({rules: [
|
||||
new ol.style.Rule({
|
||||
symbolizers: [
|
||||
new ol.style.Fill({
|
||||
color: 'white',
|
||||
opacity: 0.6
|
||||
}),
|
||||
new ol.style.Stroke({
|
||||
color: '#319FD3',
|
||||
opacity: 1
|
||||
})
|
||||
]
|
||||
}),
|
||||
new ol.style.Rule({
|
||||
maxResolution: 5000,
|
||||
symbolizers: [
|
||||
new ol.style.Text({
|
||||
color: 'black',
|
||||
text: ol.expr.parse('name'),
|
||||
fontFamily: 'Calibri,sans-serif',
|
||||
fontSize: 12,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'white',
|
||||
width: 3
|
||||
})
|
||||
})
|
||||
]
|
||||
})
|
||||
]})
|
||||
styleFunction: function(feature, resolution) {
|
||||
return styleArray;
|
||||
}
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
}),
|
||||
vectorLayer
|
||||
],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
@@ -64,17 +45,47 @@ var map = new ol.Map({
|
||||
})
|
||||
});
|
||||
|
||||
var highlightStyleArray = [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f00',
|
||||
width: 1
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,0,0,0.1)'
|
||||
})
|
||||
})];
|
||||
|
||||
var featuresOverlay = new ol.render.FeaturesOverlay({
|
||||
map: map,
|
||||
styleFunction: function(feature, resolution) {
|
||||
return highlightStyleArray;
|
||||
}
|
||||
});
|
||||
|
||||
var highlight;
|
||||
var displayFeatureInfo = function(pixel) {
|
||||
map.getFeatures({
|
||||
pixel: pixel,
|
||||
layers: [vector],
|
||||
success: function(featuresByLayer) {
|
||||
var features = featuresByLayer[0];
|
||||
document.getElementById('info').innerHTML = features.length > 0 ?
|
||||
features[0].getId() + ': ' + features[0].get('name') :
|
||||
' ';
|
||||
}
|
||||
|
||||
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
return feature;
|
||||
});
|
||||
|
||||
var info = document.getElementById('info');
|
||||
if (feature) {
|
||||
info.innerHTML = feature.getId() + ': ' + feature.get('name');
|
||||
} else {
|
||||
info.innerHTML = ' ';
|
||||
}
|
||||
|
||||
if (feature !== highlight) {
|
||||
if (highlight) {
|
||||
featuresOverlay.removeFeature(highlight);
|
||||
}
|
||||
if (feature) {
|
||||
featuresOverlay.addFeature(feature);
|
||||
}
|
||||
highlight = feature;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$(map.getViewport()).on('mousemove', function(evt) {
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@ var projection = ol.proj.configureProj4jsProjection({
|
||||
var extent = [420000, 30000, 900000, 350000];
|
||||
var layers = [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileWMS({
|
||||
source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
|
||||
url: 'http://wms.geo.admin.ch/',
|
||||
crossOrigin: 'anonymous',
|
||||
attributions: [new ol.Attribution({
|
||||
@@ -31,11 +31,12 @@ var layers = [
|
||||
'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
|
||||
'FORMAT': 'image/jpeg'
|
||||
},
|
||||
extent: extent
|
||||
})
|
||||
extent: extent,
|
||||
serverType: 'mapserver'
|
||||
}))
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileWMS({
|
||||
source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
|
||||
url: 'http://wms.geo.admin.ch/',
|
||||
crossOrigin: 'anonymous',
|
||||
attributions: [new ol.Attribution({
|
||||
@@ -45,8 +46,9 @@ var layers = [
|
||||
'National parks / geo.admin.ch</a>'
|
||||
})],
|
||||
params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
|
||||
extent: extent
|
||||
})
|
||||
extent: extent,
|
||||
serverType: 'mapserver'
|
||||
}))
|
||||
})
|
||||
];
|
||||
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,6 +28,7 @@ var layers = [
|
||||
'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
|
||||
'FORMAT': 'image/jpeg'
|
||||
},
|
||||
serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver'),
|
||||
extent: extent
|
||||
})
|
||||
}),
|
||||
@@ -42,6 +43,7 @@ var layers = [
|
||||
'National parks / geo.admin.ch</a>'
|
||||
})],
|
||||
params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
|
||||
serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver'),
|
||||
extent: extent
|
||||
})
|
||||
})
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<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">
|
||||
@@ -15,7 +14,7 @@
|
||||
<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>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user