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 | <html> <head> <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> <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> <div id="tags"></div> <p id="shortdesc"> Demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion. </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. </p> </div> </body> </html> |