[地圖SkyLine二次開發]框架(5)完結篇

上節講到，將菜單懸浮到地圖上面，並且任何操做都不會讓地圖把菜單蓋住。

 

這節帶你們，具體開發一個簡單的功能，來了進一步瞭解，這個框架。

 

1.想菜單中添加按鈕

-上節定義的mainLayout.js文件裏，定義按鈕，並實例化它。

 

-將按鈕添加到，ZZH.view.MainLayout中。

 

-運行看一下效果。

 

2.按鈕加事件

-app/control文件夾裏建立MainController.js里加上以下代碼

 

-運行，並點擊按鈕測試，就是以下效果。

 

3.開發一個，畫直線的功能。

-在MainController.js文件最下面加上以下代碼。

//建立線對象
var CreateTerrainProfile_Line = null;
function CreateTerrainProfile_DrawLine() {

    if (sgworld == null) {
        sgworld = CreateSGObj();
    }
    CreateTerrainProfile_Line = null;
    sgworld.AttachEvent("OnLButtonDown", CreateTerrainProfile_OnLButtonDown);
    sgworld.AttachEvent("OnFrame", CreateTerrainProfile_OnFrame);
    sgworld.AttachEvent("OnRButtonDown", CreateTerrainProfile_OnRButtonDown);
    sgworld.Window.SetInputMode(1);



}

//建立線右鍵事件
function CreateTerrainProfile_OnRButtonDown(Flags, X, Y) {

    sgworld.DetachEvent("OnFrame", CreateTerrainProfile_OnFrame);
    sgworld.DetachEvent("OnLButtonDown", CreateTerrainProfile_OnLButtonDown);
    sgworld.DetachEvent("OnRButtonDown", CreateTerrainProfile_OnRButtonDown);
    var lineGeometry = CreateTerrainProfile_Line.Geometry;
    lineGeometry.Points.DeletePoint(lineGeometry.Points.Count - 1);
    sgworld.Window.SetInputMode(0);
    CreateTerrainProfile_Line.Geometry.EndEdit();
    return true;

}
//建立線左鍵事件
function CreateTerrainProfile_OnLButtonDown(Flags, X, Y) {
    var groupid = sgworld.ProjectTree.FindItem("[畫圖]");

    var startPoint = sgworld.Window.PixelToWorld(X, Y);

    if (startPoint == null) {
        return false;
    }
    else {
        if (CreateTerrainProfile_Line == null) {
            var lineString = sgworld.Creator.GeometryCreator.CreateLineStringGeometry([startPoint.Position.X, startPoint.Position.Y, 0, startPoint.Position.X, startPoint.Position.Y, 0]);

            CreateTerrainProfile_Line = sgworld.Creator.CreatePolyline(lineString, sgworld.Creator.CreateColor(255, 0, 255, 155), 0, groupid, "polyline");
            CreateTerrainProfile_Line.LineStyle.Width = -2;
            CreateTerrainProfile_Line.Geometry.StartEdit();

        }
        else {
            var lineGeometry = CreateTerrainProfile_Line.Geometry;
            var endPoint = lineGeometry.EndPoint;
            endPoint.X = startPoint.Position.X;
            endPoint.Y = startPoint.Position.Y;
            endPoint.Z = 0;
            lineGeometry.Points.AddPoint(startPoint.Position.X, startPoint.Position.Y, 0);
        }
    }
    return true;

}
//畫線橡皮筋效果
function CreateTerrainProfile_OnFrame() {
    var mouseInfo = sgworld.Window.GetMouseInfo();
    var endPoint = sgworld.Window.PixelToWorld(mouseInfo.X, mouseInfo.Y);
    if (CreateTerrainProfile_Line != null) {
        var lineGeometry = CreateTerrainProfile_Line.Geometry;
        var lineEndPoint = lineGeometry.Endpoint;
        lineEndPoint.X = endPoint.Position.X;
        lineEndPoint.Y = endPoint.Position.Y;
        lineEndPoint.Z = 0;
    }
}

 

-並在MainController咱們剛添加的測試按鈕中，添加CreateTerrainProfile_DrawLine()的調用

 

-運行看效果(圖片上五角星就是我畫出來的折線)

 

-在工程樹上能夠看到剛畫出來折線的對象，這裏就不展現了。

 

4.結束語

  到這裏，咱們的SkyLine項目的前段Web應用框架就搭好了，具體菜單頁的佈局，以及菜單的伸縮等等，這都要靠你們的想象力啦。。。

 

  開發了3-4個月左右，感受Skyline項目不是那麼太難，涉及到的算法或技術，在幫助文檔裏面也都能找到。

  問題就在前端美工，用Skyline自帶的彈出式HTML頁，有不少不便，因此才採用了Iframe配合Extjs的這種前端框架。

 

框架部分就更新到這裏，但願對你們有所幫助。

但願你們多多推薦，頂起來。^^