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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Vendored
+97
@@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
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>
|
||||
|
||||
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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
|
||||
+20
-68
@@ -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({
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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');
|
||||
|
||||
+3
-3
@@ -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>
|
||||
|
||||
+62
-22
@@ -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>
|
||||
|
||||
+3
-4
@@ -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">
|
||||
|
||||
+61
-44
@@ -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 = '';
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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
@@ -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);
|
||||
}
|
||||
});
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
+42
-40
@@ -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>
|
||||
|
||||
+30
-44
@@ -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());
|
||||
});
|
||||
|
||||
+2
-3
@@ -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>
|
||||
|
||||
+26
-31
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
+1
-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">
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
});
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
+16
-17
@@ -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">
|
||||
|
||||
+61
-50
@@ -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