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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>OpenLayers Styles Unique Value Styles 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 map, layer; function init(){ map = new OpenLayers.Map('map', {maxResolution:'auto'}); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); map.addLayer(wms); map.setCenter(new OpenLayers.LonLat(0, 0), 0); // create 20 random features with a random type attribute. The // type attribute is a value between 0 and 2. var features = new Array(20); for (var i=0; i<20; i++) { features[i] = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90), {type: parseInt(Math.random()*3)} ); } // create a styleMap with a custom default symbolizer var styleMap = new OpenLayers.StyleMap({ fillOpacity: 1, pointRadius: 10 }); // create a lookup table with different symbolizers for 0, 1 and 2 var lookup = { 0: {externalGraphic: "../img/marker-blue.png"}, 1: {externalGraphic: "../img/marker-green.png"}, 2: {externalGraphic: "../img/marker-gold.png"} } // add rules from the above lookup table, with the keyes mapped to // the "type" property of the features, for the "default" intent styleMap.addUniqueValueRules("default", "type", lookup); layer = new OpenLayers.Layer.Vector('Points', { styleMap: styleMap }); layer.addFeatures(features); map.addLayer(layer); // create 20 random features with a random state property. var features = new Array(20); var states = [ OpenLayers.State.UNKNOWN, OpenLayers.State.UPDATE, OpenLayers.State.DELETE, OpenLayers.State.INSERT ]; for (var i=0; i<20; i++) { features[i] = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90) ); features[i].state = states[parseInt(Math.random()*4)]; } var context = function(feature) { return feature; } var styleMap = new OpenLayers.StyleMap(); // create a lookup table with different symbolizers for the different // state values var lookup = {}; lookup[OpenLayers.State.UNKNOWN] = {fillColor: "green"}; lookup[OpenLayers.State.UPDATE] = {fillColor: "green"}; lookup[OpenLayers.State.DELETE] = {fillColor: "red"}; lookup[OpenLayers.State.INSERT] = {fillColor: "orange"}; styleMap.addUniqueValueRules("default", "state", lookup, context); layer = new OpenLayers.Layer.Vector('Points', { styleMap: styleMap }); layer.addFeatures(features); map.addLayer(layer); } </script> </head> <body onload="init()"> <h1 id="title">Unique Value Styles Example</h1> <div id="tags"></div> <p id="shortdesc"> Shows how to create a style based on unique feature attribute values (markers) and feature state values (circles). </p> <div id="map" class="smallmap"></div> <div id="docs"></div> </body> </html> |