[地图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的这种前端框架。

框架部分就更新到这里，希望对大家有所帮助。

希望大家多多推荐，顶起来。^^