OpenLayers学习最好的方式就是跟着其自带的演示样例进行学习,另外对web前端的开发设计要了解,慢慢积累,这样在一般的小项目中应该是足够用了。
本篇參照量測demo实现对话框形式的量測,抛砖引玉,通过这个功能。后面的查询、定位等基于对话框的形式就非常easy实现了。
先看下效果图:
长度測量:
面积測量:
代码基本都是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(); } }