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 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>OpenLayers: OpenMNND</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(){ OpenLayers.ProxyHost="/proxy/?url="; map = new OpenLayers.Map('map', {'maxResolution':'auto', maxExtent: new OpenLayers.Bounds(-203349.72008129774,4816309.33,1154786.8041952979,5472346.5), projection: 'EPSG:26915' } ); layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", ["http://geoint.lmic.state.mn.us/cgi-bin/wms"], {layers: 'fsa'} ); map.addLayer(layer); wfs_url = "http://prototype.openmnnd.org/cgi-bin/mapserv.exe?map=openmnndwfs/openmnndwfs.map"; wms = new OpenLayers.Layer.WMS("Minnesota Parcels (WMS)", wfs_url, {'layers':'streams', 'transparent': true, 'format':'image/gif'}); map.addLayer(wms); wfs = new OpenLayers.Layer.WFS("Minnesota Streams (WFS)", wfs_url, {'typename':'streams'}, {ratio:1.25, minZoomLevel:4, style: OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default'])}); // preFeatureInsert can be used to set style before the feature is drawn wfs.preFeatureInsert= function(feature) { feature.style.strokeWidth="3"; feature.style.strokeColor="blue"; } wfs.onFeatureInsert = function(feature) { OpenLayers.Util.getElement('stream_features').innerHTML = feature.layer.features.length; } map.addLayer(wfs); // Or a style can be set on the layer. pwfsstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); OpenLayers.Util.extend(pwfsstyle, {'fillColor': 'green'}); pwfs = new OpenLayers.Layer.WFS("Minnesota Plat (WFS)", wfs_url, {'typename':'plat'}, { ratio:1.25, minZoomLevel:8, extractAttributes: true, style: pwfsstyle }); pwfs.onFeatureInsert= function(feature) { OpenLayers.Util.getElement('plat_features').innerHTML = feature.layer.features.length; } map.addLayer(pwfs); rstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); OpenLayers.Util.extend(rstyle, {'strokeColor': 'white', strokeWidth: "4"}); rwfs = new OpenLayers.Layer.WFS("Minnesota Roads (WFS)", wfs_url, {'typename':'roads'}, {ratio:1.25, minZoomLevel:7, extractAttributes: true, style:rstyle}); rwfs.onFeatureInsert= function(feature) { OpenLayers.Util.getElement('road_features').innerHTML = feature.layer.features.length; } map.addLayer(rwfs); map.events.register('moveend', null, function() { OpenLayers.Util.getElement('stream_features').innerHTML = "0"; OpenLayers.Util.getElement('road_features').innerHTML = "0"; OpenLayers.Util.getElement('plat_features').innerHTML = "0"; }); var ls = new OpenLayers.Control.LayerSwitcher(); map.addControl(ls); drawControls = { selectPlat: new OpenLayers.Control.SelectFeature(pwfs, {callbacks: {'up':feature_info,'over':feature_info_hover}}), selectRoad: new OpenLayers.Control.SelectFeature(rwfs, {callbacks: {'up':feature_info,'over':feature_info_hover}}) }; for(var key in drawControls) { map.addControl(drawControls[key]); } drawControls.selectPlat.activate(); map.zoomToExtent(new OpenLayers.Bounds(303232.550864,5082911.694856,305885.161263,5084486.682281)); } function toggleControl(element) { for(key in drawControls) { var control = drawControls[key]; if(element.value == key && element.checked) { control.activate(); } else { control.deactivate(); } } } var displayedFeature = null; function feature_info_hover(feature) { if (displayedFeature != feature && (!feature.layer.selectedFeatures.length || (feature.layer.selectedFeatures[0] == feature))) { feature_info(feature); displayedFeature = feature; } } function feature_info(feature) { var html = "<ul>"; for(var i in feature.attributes) html += "<li><b>" + i + "</b>: "+ feature.attributes[i] + "</li>"; html += "</ul>"; OpenLayers.Util.getElement('feature_info').innerHTML = html; } </script> </head> <body onload="init()"> <h1 id="title">OpenMNND WFS</h1> <p id="shortdesc">This example shows the use of a WFS service rendered using the OpenLayers vector library.</p> <div id="map" class="smallmap"></div> <div id="docs"> <p> This is an example that shows rendering a WFS service using OpenLayer vectors in the browser. The OpenLayers code will download the GML from the WFS service for each layer, parse it and create features using the OL vector library to draw the features on the map. For more information on the vector library, please visit <a href="http://trac.openlayers.org/wiki/Documentation/VectorSupport">vector support wiki</a>. In this example there are 4 layers shown on the map. The base layer and parcel layer are created from a WMS service using the OpenLayers.Layer.WMS object. The streams, roads, and plat layers are drawn from a WFS service using the OpenLayers.Layer.WFS object. </p> <p> Rendering WFS layers into vectors is possible, but you need to be cautions when showing the features on the map. Testing has shown that when you renderer more than 200 vectors in the browser the performance decreases dramatically. Also features that have a lot of vertices can cause performance issues. In this example the parcel layer is rendered as a WMS layer because at the time of developing this example there where a handful of features that had too many vertices to render without killing the browser resources. There are a number of properties that can be set for each WFS layer, such color and line weight using style properties such as strokeColor and strokeWidth. You can also get feature attributes from the WFS services using the extractAttribute property. View the source to see the example code. </p> </div> <div id="info"> <ul> <li>Streams: Feature Count <span id="stream_features">0</span></li> <li>Plat: Feature Count <span id="plat_features">0</span></li> <li>Roads: Feature Count <span id="road_features">0</span></li> </ul> <div id="feature_info"> </div> <ul> <li> <input type="radio" name="type" value="selectRoad" id="selectToggle" onclick="toggleControl(this);" /> <label for="selectToggle">select road</label> </li> <li> <input type="radio" name="type" value="selectPlat" id="selectToggle" onclick="toggleControl(this);" checked=checked /> <label for="selectToggle">select polygon</label> </li> </ul> </div> </body> </html> |