5.三维-Skyline实现绘制多边形功能
本文讲述实现Skyline三维地图上绘制多边形的功能，实现效果如下：
绘制线功能主要通过鼠标按下事件（OnLButtonDown）、鼠标帧被渲染前发送事件（OnFrame）、鼠标右键放下事件（OnRButtonUp）实现。
项目源代码：
HTML：
<input type="button" value="绘制多边形" id="btnDrawPolygon" />
JavaScript：
1 //绘制多边形 2 var pPolygon = null;//多边形对象 3 $("#btnDrawPolygon").bind("click", function () { 4 //注册地图事件 5 SGWorld66.Window.SetInputMode(1);//鼠标样式修改 6 SGWorld66.AttachEvent("OnLButtonDown", StartDrawPolygon); 7 SGWorld66.AttachEvent("OnFrame", DrawPolygonOnFrame); 8 SGWorld66.AttachEvent("OnRButtonUp", StopDrawPolygon) 9 }) 10 //绘制多边形 11 var tPolyLine = null; 12 function StartDrawPolygon(flags, x, y) { 13 //定义渲染样式 14 var lineColor, lineWidth = 1, lineOpacity = 1, fillColor, fillOpacity = 0.5; 15 lineColor = SGWorld66.Creator.CreateColor(255, 100, 0, 125);//定义线样式 16 fillColor = SGWorld66.Creator.CreateColor(100, 255, 0, 125);//定义面样式 17 //将屏幕坐标转换为地理坐标 18 var pWorldPointInfo = SGWorld66.Window.PixelToWorld(x, y, -1); 19 if (null == pWorldPointInfo) { 20 return false; 21 } 22 try { 23 if (null == pPolygon) { 24 if (!tPolyLine) { 25 var lineGeometry = SGWorld66.Creator.GeometryCreator.CreateLineStringGeometry([pWorldPointInfo.Position, pWorldPointInfo.Position]); 26 tPolyLine = SGWorld66.Creator.CreatePolyline(lineGeometry, lineColor, 2, SGWorld66.ProjectTree.RootID, "线"); 27 tPolyLine.Geometry.StartEdit(); 28 } 29 else if (tPolyLine.Geometry.Points.Count < 3) { 30 tPolyLine.Geometry.Points.AddPoint(pWorldPointInfo.Position.X, pWorldPointInfo.Position.Y, pWorldPointInfo.Position.Altitude); 31 } 32 else { 33 var points = tPolyLine.Geometry.Points; 34 var ring = SGWorld66.Creator.GeometryCreator.CreateLinearRingGeometry([ 35 points.Item(0).X, points.Item(0).Y, points.Item(0).Z, 36 points.Item(1).X, points.Item(1).Y, points.Item(1).Z, 37 points.Item(2).X, points.Item(2).Y, points.Item(2).Z, 38 pWorldPointInfo.Position.X, pWorldPointInfo.Position.Y, pWorldPointInfo.Position.Altitude 39 ]); 40 var polygonGeometry = SGWorld66.Creator.GeometryCreator.CreatePolygonGeometry(ring, null); 41 pPolygon = SGWorld66.Creator.CreatePolygon(polygonGeometry, lineColor, fillColor, 2, SGWorld66.ProjectTree.RootID, "多边形"); 42 pPolygon.LineStyle.Width = lineWidth; 43 pPolygon.LineStyle.Color.SetAlpha(lineOpacity); 44 pPolygon.TreeItem.ShowInViewerTree = true; 45 pPolygon.Geometry.StartEdit(); 46 //删除临时的线对象 47 SGWorld66.ProjectTree.DeleteItem(tPolyLine.ID); 48 tPolyLine = null; 49 } 50 51 } else { 52 pPolygon.Geometry.ExteriorRing.Points.AddPoint(pWorldPointInfo.Position.X, pWorldPointInfo.Position.Y, pWorldPointInfo.Position.Altitude); 53 } 54 } catch (ex) { 55 alert(ex.description); 56 } 57 } 58 function DrawPolygonOnFrame() { 59 //鼠标移动时渲染 60 var teWindow, mouseInfo, mouseInfo, point, lastPoint; 61 teWindow = SGWorld66.Window; 62 mouseInfo = teWindow.GetMouseInfo(); 63 point = teWindow.PixelToWorld(mouseInfo.X, mouseInfo.Y, 0); 64 if (null != tPolyLine) { 65 lastPoint = tPolyLine.Geometry.Points.Item(tPolyLine.Geometry.Points.Count - 1); 66 lastPoint.X = point.Position.X; 67 lastPoint.Y = point.Position.Y; 68 lastPoint.Z = point.Position.Altitude; 69 return; 70 } 71 if (null == pPolygon) { 72 return; 73 } 74 lastPoint = pPolygon.Geometry.ExteriorRing.Points.Item(pPolygon.Geometry.ExteriorRing.Points.Count - 1); 75 lastPoint.X = point.Position.X; 76 lastPoint.Y = point.Position.Y; 77 lastPoint.Z = point.Position.Altitude; 78 79 } 80 function StopDrawPolygon(flags, x, y) { 81 //结束多边形编辑功能 82 SGWorld66.DetachEvent("OnLButtonDown", StartDrawPolygon); 83 SGWorld66.DetachEvent("OnRButtonUp", StopDrawPolygon); 84 SGWorld66.DetachEvent("OnFrame", DrawPolygonOnFrame); 85 pPolygon = null; 86 SGWorld66.Window.SetInputMode(0);//鼠标恢复效果 87 }
Javascript Code
涉及主要接口、方法说明：
- OnLButtonDown：
- OnRButtonUp：
- OnLButtonDown：
- CreateColor：
- PixelToWorld：（屏幕坐标转地理坐标）
- CreateLineStringGeometry：
- CreatePolyline：
- AddPoint：
- AttachEvent：
- DetachEvent：
- CreatePolygonGeometry：
- CreatePolygon：
(详情)转载请注明出处：http://lygis.me/2016/10/12/drawpolygon
版权声明：本文为lygis原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。