1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Gutter Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
p.caption {
width: 512px;
}
</style>
<script src="../lib/OpenLayers.js"></script>
</head>
<body>
<h1 id="title">Gutter Example</h1>
<div id="tags">
gutter, quality, tile, light
</div>
<p id="shortdesc">
Demonstrates OpenLayer's facility for dealing with tiling artifacts.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p class="caption">
When you render tiles with certain types of symbols, some map
servers may render artifacts at tile edges that make symbology not
look continuous. Look at the state abbreviations, open the layer
switcher and change to the layer with a 15 pixel gutter to see how
the symbology looks different (the server in this example doesn't
render such artifacts, so the client-side gutter won't make things
look nicer).
</p>
</div>
</body>
<script type="text/javascript">
var map = new OpenLayers.Map('map');
var states15 = new OpenLayers.Layer.WMS( "States (15px gutter)",
"http://suite.opengeo.org/geoserver/wms",
{layers: 'usa:states'},
{gutter: 15, transitionEffect: "resize"});
var states = new OpenLayers.Layer.WMS( "States (no gutter)",
"http://suite.opengeo.org/geoserver/wms",
{layers: 'usa:states'});
map.addLayers([states, states15]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(-71.848, 42.2), 5);
</script>
</html>
|
