OpenLayers学习笔记4——使用jQuery UI实现測量对话框

OpenLayers学习最好的方式就是跟着其自带的演示样例进行学习，另外对web前端的开发设计要了解，慢慢积累，这样在一般的小项目中应该是足够用了。

本篇參照量測demo实现对话框形式的量測，抛砖引玉，通过这个功能。后面的查询、定位等基于对话框的形式就非常easy实现了。

先看下效果图：

长度測量：

面积測量：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2lzZXJfd2h1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

代码基本都是demo里的代码。就不贴出来了。

这里须要注意的问题是，在关闭窗体的时候一定要使measureTools   deactive

 //測量
            $("#Measure").click(function ()
            {
                $("#measureDialog").dialog(
                        {
                            open: function ()
                            {
                                clearMeasureText();
                            },
                            //关闭測量窗体前使measureTools  deactive
                            beforeClose: function ()
                            {
                                deactiveMeasureControl();

                            },
                            title: "測量",
                            resizable: false,
                            buttons: {
                                "确定": function ()
                                {
                                    $(this).dialog("close");
                                },
                                "取消": function ()
                                {
                                    $(this).dialog("close");
                                }
                            }

                        }
                );
            });

function deactiveMeasureControl()
{
    for (var key in measureControls)
    {
        var control = measureControls[key];
        control.deactivate();
    }
}