Syline6.5学习心得-web-绘图

本文的实例实现了以下几个功能：

交互操作实现绘制多段线、面的绘制；

添加绘图结束事件；

已绘制对象缓存；

通过上面几个功能，后续就能实现自定义范围空间查询了。

使用方法：

function test() {
    Draw.onDrawCompleted = onDrawCompleted;
    Draw.Polygon();
    
}
function onDrawCompleted(geo) {
    var sSuccess = "返回地物成功";
    if (geo == undefined || geo == null) {
        sSuccess = "返回地物失败";
        alert("绘制完成," + sSuccess);
    }
    else {
        var area=geo.Area;
        alert("绘制完成，面积为：" + area+" 平方米");
    }
    
}

绘图对象代码：

/*
*绘图对象
*/
var Draw = {
    drawObjects: [],
    objectID:0,
    polyline: null,
    polygon: null,
    sgworld: null,
    drawType: 'point',
    
    onDrawCompleted:null,

   
    Polyline:function(){
        this.drawType = 'polyline';
        this.polyline = null;
        this.drawObject();
    },
    Polygon:function(){
        this.drawType = 'polygon';
        this.polygon = null;
        this.drawObject();
    },
    drawObject: function () {
        if (this.sgworld == null)
            this.sgworld = document.getElementById('sgworld');
        if (this.drawType == "polylin")
            this.polyline = null;
        else if (this.drawType == "polygon")
            this.polygon = null;
        //添加事件
        this.sgworld.AttachEvent("OnLButtonDown", this.onLButtonDown);
        this.sgworld.AttachEvent("OnRButtonDown", this.onRButtonDown);
        this.sgworld.AttachEvent("OnFrame", this.onFrame);
        //设置输入模式
        //1：鼠标按下移动时地球不旋转
        this.sgworld.Window.SetInputMode(1);
    },
   
    //鼠标左键事件
    onLButtonDown:function(flag,x,y){
        var groupid = "";//默认在根节点下
        var startPoint = Draw.sgworld.Window.PixelToWorld(x, y);
        if (startPoint == null) {
            return false;
        }
        else {
          if (Draw.drawType == "polyline") {
                var color = Draw.sgworld.Creator.CreateColor(255, 0, 255, 155);
                Draw.editPolyline(color, startPoint.Position);
            }
            else if(Draw.drawType=="polygon"){
                var nLineColor = 0xFF00FF00; // Abgr value -> solid green
                var nFillColor = 0x7FFF0000; // Abgr value -> 50% transparent blue
                Draw.editPolygon(nLineColor, nFillColor, startPoint.Position);
            }
        }
        return true;
    },
    //鼠标右键结束绘图
    onRButtonDown: function (flag, x, y) {
        
        //注销事件
        Draw.sgworld.DetachEvent("OnFrame", Draw.onFrame);
        Draw.sgworld.DetachEvent("OnLButtonDown", Draw.onLButtonDown);
        Draw.sgworld.DetachEvent("OnRButtonDown", Draw.onRButtonDown);

       

        //设置交互模式
        //0:恢复漫游
        Draw.sgworld.Window.SetInputMode(0);
        //结束编辑
        var geo = null;
        if (Draw.drawType == "polyline") {
            geo = Draw.polyline.Geometry.EndEdit();
        }
        else if (Draw.drawType == "polygon")
            geo = Draw.polygon.Geometry.EndEdit();

        if (Draw.onDrawCompleted != null) {//绘图结束调用方法，结束后进行其他操作，例如空间查询等
            Draw.onDrawCompleted(geo);
        }
        return true;//屏蔽右键菜单
    },
    onFrame: function () {
        var mouseInfo = Draw.sgworld.Window.GetMouseInfo();
        var endPoint = Draw.sgworld.Window.PixelToWorld(mouseInfo.X, mouseInfo.Y);

        var geometry = null;
        if (Draw.drawType == "polyline") {
            if (Draw.polyline != null)
                geometry = Draw.polyline.Geometry;
        }
        else if (Draw.drawType == "polygon") {
            if (Draw.polygon != null) {
                var polygonGeometry = Draw.polygon.Geometry;
                geometry = polygonGeometry.Rings(0);
            }
        }
        if (geometry != null) {
            var geoEndPoint = geometry.EndPoint;
            var height = 0;
            geoEndPoint.X = endPoint.Position.X;
            geoEndPoint.Y = endPoint.Position.Y;
            geoEndPoint.Z = height;
        }
    },
    editPolyline: function (color, position) {
        if (this.polyline == null) {
            var height = 0;//高度默认为0
            var lineStringGeometry = this.sgworld.Creator.GeometryCreator.CreateLineStringGeometry(
                    [position.X, position.Y, height,
                    position.X, position.Y, height]);
            this.polyline = this.sgworld.Creator.CreatePolyline(lineStringGeometry,
                   color, 0, "", "polyline");
           
            this.polyline.Geometry.StartEdit();

            //缓存
            var object = { 'id': this.objectID, 'object': this.polyline };
            Draw.drawObjects.push(object);
            this.objectID++;
        }
        else {
            var lineGeometry = this.polyline.Geometry;
            var endPoint = lineGeometry.EndPoint;
            //设置线的结束点
            endPoint.X = position.X;
            endPoint.Y = position.Y;
            endPoint.Z = height;
            //扩展点
            lineGeometry.Points.AddPoint(position.X, position.Y, height);
        }
    },
    editPolygon: function (lineColor, fillColor, position) {
        if (this.polygon == null) {
            var height = 0;
            var cRingGeometry = this.sgworld.Creator.GeometryCreator.CreateLinearRingGeometry([
                position.X, position.Y, height,
                 position.X, position.Y, height,
                 position.X, position.Y, height,
                 position.X, position.Y, height
            ]);
            var cPolygonGeometry = this.sgworld.Creator.GeometryCreator.CreatePolygonGeometry(cRingGeometry, null);

            this.polygon = this.sgworld.Creator.CreatePolygon(cPolygonGeometry, lineColor, fillColor, 0, "", "polygon");
            this.polygon.Geometry.StartEdit();
            var obj = { 'id': this.objectID, 'object': this.polygon };
            this.drawObjects.push(obj);
            this.objectID++;

        }
        else {
            var polygonGeometry = this.polygon.Geometry;
            var ringsGeo = polygonGeometry.Rings(0);
            var endPoint = ringsGeo.EndPoint;
            //设置线的结束点
            endPoint.X = position.X;
            endPoint.Y = position.Y;
            endPoint.Z = height;
            //扩展点
            ringsGeo.Points.AddPoint(position.X, position.Y, height);
        }

    }

}

绘图对象封装了一定的方法和属性，接口已经预留可以根据需要进一步扩展。效果图就不上了