Openlayers Learning Note 4--using the jquery UI to implement the Measurement dialog box

Openlayers learning the best way is to follow its own example to learn, in addition to the Web front-end development and design to understand, and slowly accumulate, so in general small projects should be enough. The Reference measurement demo implementation of the format of the dialog box measurement, the use of this function, the following query, positioning, etc. based on the form of dialog box is easy to achieve. First look at the following:

Length measurement:

Area measurement:

The code is basically a demo code, it is not posted out. The point to note here is that you must make Measuretools deactive when you close the window.

 Measure $ ("#Measure"). Click (function () {$ ("#measureDialog"). Dialog ( {open:function () {Clearmeas                            Uretext ();                            },//Close the measurement window before making Measuretools deactive beforeclose:function ()                            {Deactivemeasurecontrol (); }, Title: "Measurement", Resizable:false, buttons : {"OK": function () {$                                (this). dialog ("Close"); }, "Cancel": function () {$ (                                This). dialog ("Close");              }              }                        }                ); });

function Deactivemeasurecontrol () {for    (var key in Measurecontrols)    {        var control = measurecontrols[key];< C3/>control.deactivate ();    }}

Openlayers Learning Note 4--using the jquery UI to implement the Measurement dialog box