e633f7f8c1
This reverts4d619d71b1(see #1527), going back to what we had aftere13075f6ff(see #881). To avoid the 404 in the hosted examples, the css is copied to the same relative path when hosted as during development.
61 lines
2.3 KiB
HTML
61 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
|
<title>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="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
<script src="loader.js?id=layer-spy" type="text/javascript"></script>
|
|
|
|
</body>
|
|
</html>
|