openmnnd.html
5.69 KB
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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 600px;
height: 475px;
border: 1px solid black;
}
#info {
float: right;
}
</style>
<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});
// 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() {
$('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) {
$('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) {
$('road_features').innerHTML = feature.layer.features.length;
}
map.addLayer(rwfs);
map.events.register('moveend', null, function() {
$('stream_features').innerHTML = "0";
$('road_features').innerHTML = "0";
$('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>";
$('feature_info').innerHTML = html;
}
// -->
</script>
</head>
<body onload="init()">
<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>
<div id="map"></div>
</body>
</html>