gutter.html
1.9 KB
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
<html>
<head>
<style type="text/css">
#map {
width: 500px;
height: 300px;
border: 1px solid gray;
}
p.caption {
width: 500px;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
var map;
window.onload = function() {
options = {maxExtent: new OpenLayers.Bounds(-73.5295, 41.2318,
-69.9097, 42.8883),
maxResolution: 0.0003}
map = new OpenLayers.Map('map', options);
var roads15 = new OpenLayers.Layer.WMS( "Roads (15px gutter)",
"http://boston.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/boston/map/gmaps.map&",
{layers: 'roads_200_40'},
{gutter: 15});
var roads = new OpenLayers.Layer.WMS( "Roads (no gutter)",
"http://boston.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/boston/map/gmaps.map&",
{layers: 'roads_200_40'});
map.addLayers([roads, roads15]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(-71.848, 42.2), 0);
}
// -->
</script>
</head>
<body>
<h1>OpenLayers Gutter Example</h1>
<div id="map"></div>
<p class="caption">
When you render tiles with certain types of symbols, there are artifacts
at tile edges that make symbology not look continuous. In the center of
the above map (when it first loads), the large orange road is split
vertically by a tile. Open the layer switcher and change to the layer
with a 15 pixel gutter to see how the symbology looks nicer.
</p>
</body>
</html>