3.三维-Skyline实现绘制线功能

本文讲述实现Skyline三维地图上画线的功能，实现效果如下：

绘制线功能主要通过鼠标按下事件（OnLButtonDown）、鼠标帧被渲染前发送事件（OnFrame）、鼠标右键放下事件（OnRButtonUp）实现。

项目源代码：

 <input type="button" value="绘制线" id="btnDrawLine" />

 

 1  //绘制线 
 2             var polyLine = null;//定义绘制时的线对象
 3             $("#btnDrawLine").bind("click", function () {
 4                 //注册事件
 5                 SGWorld66.Window.SetInputMode(1);//鼠标样式修改
 6                 SGWorld66.AttachEvent("OnLButtonDown", StartDrawLine);
 7                 SGWorld66.AttachEvent("OnFrame", DrawLineOnFrame);
 8                 SGWorld66.AttachEvent("OnRButtonUp", StopDrawLine)
 9             });
10             function StartDrawLine(flags, x, y) {
11                 //flags:虚拟键按下的标记;x、y为屏幕坐标
12                 var lineColor = SGWorld66.Creator.CreateColor(255, 100, 0, 125);//定义线渲染样式
13                 try {
14                     if (1 == flags)//左键
15                     {
16                         var pWorldPointInfo = SGWorld66.Window.PixelToWorld(x, y, -1); //将屏幕坐标转换为地理坐标
17                         if (null == pWorldPointInfo) {
18                             return false;
19                         }
20                         var pos = pWorldPointInfo.Position;
21                         if (!polyLine) {
22                             var geometry = SGWorld66.Creator.GeometryCreator.CreateLineStringGeometry([pos, pos]);
23                             polyLine = SGWorld66.Creator.CreatePolyline(geometry, lineColor, 2, SGWorld66.ProjectTree.RootID, "线");
24                             polyLine.Geometry.StartEdit();//开始编辑线
25                         }
26                         else {
27                             polyLine.Geometry.Points.AddPoint(pos.X, pos.Y, 0);
28                         }
29                     }
30                 }
31                 catch (ex) {
32                     alert(ex.description);
33                 }
34             }
35             function DrawLineOnFrame() {
36                 //鼠标移动时绘制线的效果
37                 try {
38                     var mouseInfo = SGWorld66.Window.GetMouseInfo();
39                     var mousePoint = SGWorld66.Window.PixelToWorld(mouseInfo.X, mouseInfo.Y);
40                     if (null == mousePoint) {
41                         return false;
42                     }
43                     var pos = mousePoint.Position;
44                     if (polyLine) {
45                         var pPoints = polyLine.Geometry.Points;
46                         pPoints.Item(pPoints.count - 1).X = pos.X;
47                         pPoints.Item(pPoints.count - 1).Y = pos.Y;
48                         pPoints.Item(pPoints.count - 1).Z = 0;
49                     }
50                 }
51                 catch (ex) {
52                     alert(ex.description);
53                 }
54             }
55             function StopDrawLine(flags, x, y) {
56                 //结束线编辑功能
57                 SGWorld66.DetachEvent("OnLButtonDown", StartDrawLine);
58                 SGWorld66.DetachEvent("OnRButtonUp", StopDrawLine);
59                 SGWorld66.DetachEvent("OnFrame", DrawLineOnFrame);
60                 polyLine = null;
61                 SGWorld66.Window.SetInputMode(0);//鼠标恢复效果
62             }
JavaScript Code

 涉及主要接口、方法说明：

  • OnLButtonDown：
  • OnRButtonUp：
  • OnLButtonDown： 
  • CreateColor：
  • PixelToWorld：（屏幕坐标转地理坐标）
  • CreateLineStringGeometry： 
  • CreatePolyline：     
  • AddPoint： 
  • AttachEvent： 
  • DetachEvent：

 详细信息请关注GIS应用开发学院

转载请注明出处：http://lygis.me/2016/10/11/drawpolyline

 

posted @ 2016-10-11 09:12  LYGIS  阅读(354)  评论(0)    收藏  举报