Merge pull request #1 from ahocevar/2897

Updating the gutter example.
This commit is contained in:
Frédéric Junod
2011-12-07 22:56:05 -08:00

View File

@@ -13,26 +13,6 @@
}
</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 id="title">Gutter Example</h1>
@@ -42,19 +22,34 @@
</div>
<p id="shortdesc">
Demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion.
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, 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.
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://demo.opengeo.org/geoserver/wms",
{layers: 'topp:states'},
{gutter: 15});
var states = new OpenLayers.Layer.WMS( "Roads (no gutter)",
"http://demo.opengeo.org/geoserver/wms",
{layers: 'topp:states'});
map.addLayers([states, states15]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(-71.848, 42.2), 5);
</script>
</html>