openlayers/examples/openmnnd.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers: OpenMNND</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <script src="../lib/OpenLayers.js"></script>
   7     <script type="text/javascript">
   8         var map, layer;
   9
  10         function init(){
  11             OpenLayers.ProxyHost="/proxy/?url=";
  12             map = new OpenLayers.Map('map', {'maxResolution':'auto', maxExtent: new OpenLayers.Bounds(-203349.72008129774,4816309.33,1154786.8041952979,5472346.5), projection: 'EPSG:26915' } );
  13             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  14                     ["http://geoint.lmic.state.mn.us/cgi-bin/wms"], {layers: 'fsa'} );
  15             map.addLayer(layer);
  16
  17
  18             wfs_url = "http://prototype.openmnnd.org/cgi-bin/mapserv.exe?map=openmnndwfs/openmnndwfs.map";
  19             wms = new OpenLayers.Layer.WMS("Minnesota Parcels (WMS)", wfs_url, {'layers':'streams', 'transparent': true, 'format':'image/gif'});
  20
  21             map.addLayer(wms);
  22
  23             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'])});
  24
  25             // preFeatureInsert can be used to set style before the feature is drawn
  26             wfs.preFeatureInsert= function(feature) { feature.style.strokeWidth="3"; feature.style.strokeColor="blue";
  27             }
  28             wfs.onFeatureInsert = function(feature) {
  29               OpenLayers.Util.getElement('stream_features').innerHTML = feature.layer.features.length;
  30             }
  31             map.addLayer(wfs);
  32
  33             // Or a style can be set on the layer.
  34             pwfsstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
  35             OpenLayers.Util.extend(pwfsstyle, {'fillColor': 'green'});
  36
  37             pwfs = new OpenLayers.Layer.WFS("Minnesota Plat (WFS)", wfs_url,
  38               {'typename':'plat'},
  39               {
  40                ratio:1.25,
  41                minZoomLevel:8,
  42                extractAttributes: true,
  43                style: pwfsstyle
  44               });
  45
  46             pwfs.onFeatureInsert= function(feature) {
  47               OpenLayers.Util.getElement('plat_features').innerHTML = feature.layer.features.length;
  48             }
  49             map.addLayer(pwfs);
  50
  51             rstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
  52             OpenLayers.Util.extend(rstyle, {'strokeColor': 'white', strokeWidth: "4"});
  53             rwfs = new OpenLayers.Layer.WFS("Minnesota Roads (WFS)", wfs_url, {'typename':'roads'},
  54               {ratio:1.25, minZoomLevel:7, extractAttributes: true, style:rstyle});
  55
  56             rwfs.onFeatureInsert= function(feature) {
  57               OpenLayers.Util.getElement('road_features').innerHTML = feature.layer.features.length;
  58             }
  59
  60             map.addLayer(rwfs);
  61
  62             map.events.register('moveend', null, function() {
  63                 OpenLayers.Util.getElement('stream_features').innerHTML = "0";
  64                 OpenLayers.Util.getElement('road_features').innerHTML = "0";
  65                 OpenLayers.Util.getElement('plat_features').innerHTML = "0";
  66             });
  67
  68             var ls = new OpenLayers.Control.LayerSwitcher();
  69             map.addControl(ls);
  70
  71             drawControls = {
  72                 selectPlat: new OpenLayers.Control.SelectFeature(pwfs, {callbacks: {'up':feature_info,'over':feature_info_hover}}),
  73                 selectRoad: new OpenLayers.Control.SelectFeature(rwfs, {callbacks: {'up':feature_info,'over':feature_info_hover}})
  74             };
  75
  76             for(var key in drawControls) {
  77                 map.addControl(drawControls[key]);
  78             }
  79             drawControls.selectPlat.activate();
  80
  81             map.zoomToExtent(new OpenLayers.Bounds(303232.550864,5082911.694856,305885.161263,5084486.682281));
  82         }
  83
  84         function toggleControl(element) {
  85             for(key in drawControls) {
  86                 var control = drawControls[key];
  87                 if(element.value == key && element.checked) {
  88                     control.activate();
  89                 } else {
  90                     control.deactivate();
  91                 }
  92             }
  93         }
  94         var displayedFeature = null;
  95         function feature_info_hover(feature) {
  96             if (displayedFeature != feature &&
  97                (!feature.layer.selectedFeatures.length ||
  98                (feature.layer.selectedFeatures[0] == feature))) {
  99             feature_info(feature);
 100             displayedFeature = feature;
 101            }
 102         }
 103         function feature_info(feature) {
 104             var html = "<ul>";
 105             for(var i in feature.attributes)
 106                html += "<li><b>" + i + "</b>: "+  feature.attributes[i] + "</li>";
 107             html += "</ul>";
 108             OpenLayers.Util.getElement('feature_info').innerHTML = html;
 109         }
 110     </script>
 111   </head>
 112   <body onload="init()">
 113     <h1 id="title">OpenMNND WFS</h1>
 114     <p id="shortdesc">This example shows the use of a WFS service rendered using the OpenLayers vector library.</p>
 115     <div id="map" class="smallmap"></div>
 116     <div id="docs">
 117             <p>
 118             This is an example that shows rendering a WFS service using OpenLayer vectors in the browser. The OpenLayers code will download the GML
 119             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
 120             more information on the vector library, please visit <a href="http://trac.openlayers.org/wiki/Documentation/VectorSupport">vector support wiki</a>.
 121             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.
 122             The streams, roads, and plat layers are drawn from a WFS service using the OpenLayers.Layer.WFS object.
 123             </p>
 124
 125             <p>
 126             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
 127             you renderer more than 200 vectors in the browser the performance decreases dramatically.  Also features that have a lot of vertices
 128             can cause performance issues. In this example the parcel layer is rendered as a WMS layer because at the time of developing this example
 129             there where a handful of features that had too many vertices to render without killing the browser resources.
 130
 131             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.
 132             You can also get feature attributes from the WFS services using the extractAttribute property.  View the source to see the example code.
 133             </p>
 134     </div>
 135     <div id="info">
 136       <ul>
 137         <li>Streams: Feature Count <span id="stream_features">0</span></li>
 138         <li>Plat: Feature Count <span id="plat_features">0</span></li>
 139         <li>Roads: Feature Count <span id="road_features">0</span></li>
 140       </ul>
 141       <div id="feature_info">
 142       </div>
 143       <ul>
 144         <li>
 145             <input type="radio" name="type" value="selectRoad" id="selectToggle" onclick="toggleControl(this);"  />
 146             <label for="selectToggle">select road</label>
 147         </li>
 148         <li>
 149             <input type="radio" name="type" value="selectPlat" id="selectToggle" onclick="toggleControl(this);" checked=checked />
 150             <label for="selectToggle">select polygon</label>
 151         </li>
 152     </ul>
 153     </div>
 154   </body>
 155 </html>