OpenLayers学習ノート4-jQuery UIを使用した測定ダイアログ


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