Port over layer-clipping-webgl, layer-clipping, layer-extent, layer-group, layer-spy, layer-swipe examples
This commit is contained in:
Bart van den Eijnden
committed by
Andreas Hocevar
Andreas Hocevar
parent
e3face3d9d
commit
c75c704e9f
@@ -1,56 +1,16 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Layer WebGL clipping example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Layer WebGL clipping example."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
This example shows how to use the <code>precompose</code> and <code>postcompose</code> rendering hooks to clip layers using WebGL.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "clipping, webgl, openstreetmap"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<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 class="span12">
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="no-webgl" class="alert alert-error" style="display: none">
|
||||||
<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>.
|
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
||||||
</div>
|
</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="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=layer-clipping-webgl" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,51 +1,13 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Layer clipping example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Layer clipping example"
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
Layer clipping example
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "clipping, openstreetmap"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<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 class="span12">
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
</div>
|
</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="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=layer-clipping" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,68 +1,22 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Limited Layer Extent"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Restricting layer rendering to a limited extent."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
|
||||||
<title>Limited Layer Extent</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">Limited layer extent</h4>
|
|
||||||
<p id="shortdesc">Restricting layer rendering to a limited extent.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>
|
|
||||||
This example uses the <code>layer.setExtent()</code> method to
|
This example uses the <code>layer.setExtent()</code> method to
|
||||||
modify the extent of the overlay layer. Use the controls below
|
modify the extent of the overlay layer. Use the controls below
|
||||||
to limit rendering based on an extent.
|
to limit rendering based on an extent.
|
||||||
</p>
|
tags: "extent, tilejson"
|
||||||
<p>
|
---
|
||||||
<div class="btn-group">
|
<div class="row-fluid">
|
||||||
|
<div class="span12">
|
||||||
|
<div id="map" class="map"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
<button type="button" class="btn btn-default" id="northwest">northwest</button>
|
<button type="button" class="btn btn-default" id="northwest">northwest</button>
|
||||||
<button type="button" class="btn btn-default" id="northeast">northeast</button>
|
<button type="button" class="btn btn-default" id="northeast">northeast</button>
|
||||||
<button type="button" class="btn btn-default" id="southeast">southeast</button>
|
<button type="button" class="btn btn-default" id="southeast">southeast</button>
|
||||||
<button type="button" class="btn btn-default" id="southwest">southwest</button>
|
<button type="button" class="btn btn-default" id="southwest">southwest</button>
|
||||||
<button type="button" class="btn btn-default" id="world">world</button>
|
<button type="button" class="btn btn-default" id="world">world</button>
|
||||||
</div>
|
</div>
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
See the <a href="layer-extent.js" target="_blank">layer-extent.js
|
|
||||||
source</a> for details on how this is done.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">extent, tilejson</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=layer-extent" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
3
examples_src/layer-group.css
Normal file
3
examples_src/layer-group.css
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
#layertree li > span {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
@@ -1,44 +1,15 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Layer group example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of a map with layer group."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
Example of a map with layer group.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "tilejson, input, bind, group, layergroup"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
|
||||||
<style>
|
|
||||||
#layertree li > span {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<title>Layer group 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="span6">
|
<div class="span6">
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|
||||||
<h4 id="title">Layer group example</h4>
|
|
||||||
<p id="shortdesc">Example of a map with layer group.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="layer-group.js" target="_blank">layer-group.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="tags">tilejson, input, bind, group, layergroup</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="layertree" class="span6">
|
<div id="layertree" class="span6">
|
||||||
<h5>Click on layer nodes below to change their properties.</h5>
|
<h5>Click on layer nodes below to change their properties.</h5>
|
||||||
<ul>
|
<ul>
|
||||||
@@ -113,14 +84,5 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=layer-group" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,60 +1,17 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Layer Spy Example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "View a portion of one layer over another"
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
<p>Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
These listeners get an event with a reference to the Canvas rendering context.
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
In this example, the <code>precompose</code> listener sets a clipping mask around the most
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
recent mouse position, giving you a spyglass effect for viewing one layer over another.</p>
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<p>Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.</p>
|
||||||
<title>Layer Spy Example</title>
|
tags: "spy, image manipulation"
|
||||||
</head>
|
---
|
||||||
<body>
|
<div class="row-fluid">
|
||||||
|
|
||||||
<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 class="span12">
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
</div>
|
</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="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=layer-spy" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,52 +1,14 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Layer Swipe example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of a Layer swipe map."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
Example of a Layer swipe map.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "swipe, openstreetmap"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<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 class="span12">
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<input id="swipe" type="range" style="width: 100%">
|
<input id="swipe" type="range" style="width: 100%">
|
||||||
</div>
|
</div>
|
||||||
</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="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=layer-swipe" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user