Implementation of functions such as length measurement and Area Measurement in OpenLayers 2. openlayers Length

Implementation of functions such as length measurement and Area Measurement in OpenLayers 2. openlayers Length

This article demonstrates how to use another method to implement the measurement function.

First, the result graph is displayed.

Function implementation:

1. Create an Interface

Add the following code to the HTMLbody body:

<Div id = "map" class = "smallmap"> </div> <div id = "options"> <divid = "output"> </div> <ulid =" controlToggle "> <input type =" button "name =" type "value =" length "id =" line "onClick =" toggleControl (this ); "checked =" false "> </input> <input type =" button "name =" type "value =" area "id =" polygon "onClick =" toggleControl (this); "checked =" false "> </input> <input type =" button "name =" type "value =" cancel "id =" cancel "onClick =" cancel (this); "checked =" false "> </input> <li> <input type =" checkbox "name =" geodesic "id =" geodesicToggle "onclick =" toggleGeodesic (this ); "/> <label for =" geodesicToggle "> spherical measurement </label> </li> </ul> </div> <divid = 'map _ element' style =' width: 1400px; height: 800px; '> </div> </body>

2. CSS Definition

<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>

3. initialize the init () method. It mainly loads maps and initializes measurement controls.

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;        }

4. Implementation of measurement functions

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 + = "Result:" + measure. toFixed (3) + "" + units;} else {out + = "Result:" + measure. toFixed (3) + "" + units + "<sup> 2 </" + "sup>";} element. innerHTML = out;} function toggleCont Rol (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 );}}

5. function display

Unit for measuring the length of an area ()

Measurement area (area) Unit: measurement length (length) unit.
 
How can I measure the length of a handheld GPS device?

There are two types of handheld GPS Length Measurement: 1. If it is a rule chart, use Route measurement (select a few points on the line you want to test and edit it into a one-day route, the length can be displayed on the route attributes. 2. If it is an irregular figure, use track measurement (start the handheld GPS and then go over the line you want to measure, save the current track and view the track attributes ). Of course, there are also some handheld GPS functions to calculate the area (in fact, it is to use track measurement), click to enter the same steps as method 2, save the view area after completion, there will be a length display!
If you do not understand anything, you can go to "Shaanxi tianmai Navigation Information Co. Ltd." To help you!