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

来源：互联网发布：js new date format 编辑：程序博客网时间：2024/05/07 03:36

OpenLayers学习最好的方式就是跟着其自带的示例进行学习，另外对web前端的开发设计要了解，慢慢积累，这样在一般的小项目中应该是足够用了。本篇参照量测demo实现对话框形式的量测，抛砖引玉，通过这个功能，后面的查询、定位等基于对话框的形式就很容易实现了。先看下效果图：

长度测量：

面积测量：

代码基本都是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();    }}

1 0