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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ArcIMS Thematic Example</title> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script src="../lib/OpenLayers.js"></script> <script type="text/javascript"> var lon = 0; var lat = 0; var zoom = 1; var map, layer; var query, renderer; function init() { OpenLayers.ProxyHost = "proxy.cgi?url="; map = new OpenLayers.Map('map'); query = {where: "FIPS_ID>100 AND FIPS_ID<200"}; renderer = { type: 'valuemap', lookupfield: 'FIPS_ID', ranges: [ { lower: 100, upper: 120, symbol: { type: 'simplepolygon', fillcolor: '255,0,0' } }, { lower: 120, upper: 140, symbol: { type: 'simplepolygon', fillcolor: '255,255,0' } }, { lower: 140, upper: 160, symbol: { type: 'simplepolygon', fillcolor: '0,255,0' } }, { lower: 160, upper: 180, symbol: { type: 'simplepolygon', fillcolor: '0,255,255' } }, { lower: 180, upper: 200, symbol: { type: 'simplepolygon', fillcolor: '0,0,255' } } ] }; var options = { layers: [{ id: "1", visible: true, query: query, renderer: renderer }], serviceName: "OpenLayers_Sample", singleTile: true, async: true }; layer = new OpenLayers.Layer.ArcIMS( "Global Sample Map", "http://sample.avencia.com/servlet/com.esri.esrimap.Esrimap", options ); map.addLayer(layer); map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); map.addControl(new OpenLayers.Control.LayerSwitcher()); } </script> </head> <body onload="init()"> <h1 id="title">ArcIMS Thematic Example</h1> <div id="tags"> </div> <p id="shortdesc"> Shows the advanced use of OpenLayers using a thematic ArcIMS layer </p> <div id="map" class="smallmap"></div> <div id="docs"> <p>This is an example of how to add an ArcIMS layer to an OpenLayers map.</p> <p>Following the ArcXML convention to create a thematic (or chloropleth) map, a layer definition is created with a query and a renderer to select portions of the map data, and change their representation in the generated map tiles.</p> </div> </body> </html> |