在三维GIS的规划、公安等应用系统中，常需要操作者在地图上动态勾画出面状区域，以便用来观看，并能够进行保存查看。

  skyline的BS开发是采用JavaScript语言进行开发，最新版的6.6可以支持chrome、Firefox、IE浏览器，但随着chrome的更新，不再支持npgapi的方式，最新版的chrome上会失效，一直以来在IE浏览器上的支持比较稳定，建议在IE上开发使用。

  面状区域绘制类似于TerraExplorer上的画面操作，只是这个用程序实现。

  具体步骤如下： 

   在开始进行标绘时，首先仿照TE的方式，先将鼠标的样式变化一下，之后进行事件绑定

     //变换鼠标的样式，定义全局使用对象

     SGWorld.Window.SetInputMode(1,"",0);

LbFlags=true;

polygon=null;

       //绑定TE的三个事件：左键、右键、每帧变化
       SGWorld.AttachEvent("OnLButtonDown", OnleftbtnUp);
	SGWorld.AttachEvent("OnRButtonDown", OnRButtonUpp);
	SGWorld.AttachEvent("OnFrame", Onframe);
	//OnleftbtnUp、OnRButtonUpp、Onframe是三个事件的具体实现，使用JavaScript的function即可；
	//左键事件实现
	function OnleftbtnUp(Flags,X,Y)
       {
	if (LbFlags) {
	        //首先获得屏幕上点击的左键鼠标的地图位置，需要将鼠标位置转换地图坐标
		var CursorCoord = SGWorld.Window.pixelToWorld(X, Y);
		if (CursorCoord == null) 
			return false;
		
		if (polygon == null) {
			// 在进行画面的时候，通常是先画一条线，因为一个面至少需要3个点
	var myGeometry = SGWorld.Creator.GeometryCreator.CreateLineStringGeometry([CursorCoord.Position.x, CursorCoord.Position.y, 0, CursorCoord.Position.x, CursorCoord.Position.y, 0]);
			polygon = SGWorld.Creator.createPolyline(myGeometry, SGWorld.Creator.CreateColor(255, 255, 0, 1), 2, -1,"gPolylineText");
			polygon.LineStyle.Width = 1;
			polygon.Geometry.StartEdit();
			
		}
		else {
			if (polygon.ObjectType == 1) {
				//当有3个点的时候，就把前边画的线给删除掉
				var x = polygon.Geometry.Points.Item(0).X;
				var y = polygon.Geometry.Points.Item(0).Y;
				SGWorld.Creator.DeleteObject(polygon.ID);
				
				// 开始画面
				var myGeometry = SGWorld.Creator.GeometryCreator.CreateLinearRingGeometry([x, y, 0, CursorCoord.Position.x, CursorCoord.Position.y, 0, CursorCoord.Position.x, CursorCoord.Position.y, 0])
				polygon = SGWorld.Creator.createPolygon(myGeometry, SGWorld.Creator.CreateColor(255, 255, 0, 255), SGWorld.Creator.CreateColor(255, 255, 0, 255), 2, 0, "gPolygonText");
				polygon.LineStyle.Width = 1;
				polygon.Terrain.GroundObject = true;
				polygon.Geometry.StartEdit();
			}
			else {
			//编辑面的环中点，并增加点
				polygon.Geometry.Rings(0).Points.Item(polygon.Geometry.Rings(0).Points.count - 1).X = CursorCoord.Position.x;
				polygon.Geometry.Rings(0).Points.Item(polygon.Geometry.Rings(0).Points.count - 1).Y = CursorCoord.Position.y;
				polygon.Geometry.Rings(0).Points.Item(polygon.Geometry.Rings(0).Points.count - 1).Z = 0;
				polygon.Geometry.Rings(0).Points.AddPoint(CursorCoord.Position.x, CursorCoord.Position.y, 0);
			}
		}
		
	}
}

	//每帧事件，实现在没有完成画面的时候，面的最后一个跟随鼠标移动
	function Onframe()
{
	if (polygon != null) {
        try {
           //获得当前鼠标的位置，使面的最后一个点随着鼠标移动
            var mouseInfo = SGWorld.Window.GetMouseInfo()
            var CursorCoord = SGWorld.Window.pixelToWorld(mouseInfo.X, mouseInfo.Y);
            if (CursorCoord == null)
                return false;
            if (polygon.ObjectType == 2) {
                polygon.Geometry.Rings(0).Points.Item(polygon.Geometry.Rings(0).Points.count - 1).X = CursorCoord.Position.x;
                polygon.Geometry.Rings(0).Points.Item(polygon.Geometry.Rings(0).Points.count - 1).Y = CursorCoord.Position.y;
                polygon.Geometry.Rings(0).Points.Item(polygon.Geometry.Rings(0).Points.count - 1).Z = 0;
            }
            else {
                polygon.Geometry.Points.Item(polygon.Geometry.Points.count - 1).X = CursorCoord.Position.x;
                polygon.Geometry.Points.Item(polygon.Geometry.Points.count - 1).Y = CursorCoord.Position.y;
                polygon.Geometry.Points.Item(polygon.Geometry.Points.count - 1).Z = 0;
            }
        }
        catch (e) { }
    }
}

//右键事件，面绘制完成时，将状态恢复到画面之前，完成画面。

function OnRButtonUpp(Flags, X, Y){

//SGWorld.ProjectTree.EndEdit();

if (polygon != null) 

{

if (polygon.ObjectType == 1)

        polygon.Geometry.Points.DeletePoint(polygon.Geometry.Points.count - 1);

    else polygon.Geometry.Rings(0).Points.DeletePoint(polygon.Geometry.Rings(0).Points.count - 1); 

    polygon.Geometry.EndEdit();

    }

SGWorld.Window.SetInputMode(0,"",0);

LbFlags=false;

}

  上边是整个应用功能实现的代码，其中像线宽、填充颜色等参数，参照API文档，就可以自定义进行实现。