<div id="map" class="smallmap"></div> <div id="options"> <divid="output"></div> <ulid="controlToggle"> <input type="button"name="type" value="長度"id="line" onClick="toggleControl(this);"checked="false"></input> <input type="button"name="type" value="面積"id="polygon" onClick="toggleControl(this);"checked="false"></input> <input type="button"name="type" value="取消"id="cancel" onClick="cancel(this);"checked="false"></input> <li> <input type="checkbox"name="geodesic" id="geodesicToggle"onclick="toggleGeodesic(this);" /> <label for="geodesicToggle">球面測量</label> </li> </ul> </div> <divid='map_element' style='width:1400px;height:800px;'></div> </body>

<styletype="text/css"> #controlToggle li { list-style: none; } #options { position: relative; width: 400px; } #output { float: right; } /* avoid pink tiles */ .olImageLoadError { background-color: transparent !important; } </style>

functioninit(){ map = newOpenLayers.Map('map_element'); var wmsLayer= newOpenLayers.Layer.WMS( "global", "http://192.168.1.50:8080/geoserver/karl/wms", {layers: "global"} ); map.addLayer(wmsLayer); map.addControl(newOpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.MousePosition()); // style the sketch fancy var sketchSymbolizers = { "Point": { pointRadius: 4, graphicName:"square", fillColor:"white", fillOpacity: 1, strokeWidth: 1, strokeOpacity: 1, strokeColor:"#333333" }, "Line": { strokeWidth: 3, strokeOpacity: 1, strokeColor:"#666666", strokeDashstyle:"dash" }, "Polygon": { strokeWidth: 2, strokeOpacity: 0.4, strokeColor:"#666666", fillColor: "red", fillOpacity: 0.3 } }; var style = new OpenLayers.Style(); style.addRules([ new OpenLayers.Rule({symbolizer:sketchSymbolizers}) ]); var styleMap = newOpenLayers.StyleMap({"default": style}); // allow testing of specificrenderers via "?renderer=Canvas", etc var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; renderer = (renderer) ? [renderer]: OpenLayers.Layer.Vector.prototype.renderers; measureControls = { line: newOpenLayers.Control.Measure( OpenLayers.Handler.Path, { persist: true, handlerOptions: { layerOptions: { renderers:renderer, styleMap:styleMap } } } ), polygon: newOpenLayers.Control.Measure( OpenLayers.Handler.Polygon,{ persist: true, handlerOptions: { layerOptions: { renderers:renderer, styleMap:styleMap } } } ) }; var control; for(var key in measureControls) { control = measureControls[key]; control.events.on({ "measure":handleMeasurements, "measurepartial":handleMeasurements }); map.addControl(control); } map.zoomToMaxExtent(); document.getElementById('noneToggle').checked = true; }

functionhandleMeasurements(event) { var geometry = event.geometry; var units = event.units; var order = event.order; var measure = event.measure; var element =document.getElementById('output'); var out = ""; if(order == 1) { out += "結(jié)果: " +measure.toFixed(3) + " " + units; } else { out += "結(jié)果: " +measure.toFixed(3) + " " + units + "<sup>2</" +"sup>"; } element.innerHTML = out; } function toggleControl(element) { //alert("Hello"); toggleImmediate(element); for(key in measureControls) { var control =measureControls[key]; if(element.id == key &&element.checked) { control.activate(); } else { control.deactivate(); } } } function cancel(element) { //measureControl.deactivate(); //map.removeControl(measureControl); for(key in measureControls) { var control =measureControls[key]; if(control != null) { control.deactivate(); map.removeControl(control); } } } function toggleGeodesic(element) { for(key in measureControls) { var control =measureControls[key]; control.geodesic =element.checked; } } function toggleImmediate(element) { for(key in measureControls) { var control =measureControls[key]; control.setImmediate(element.checked); } }