本文的实例实现了以下几个功能：
交互操作实现绘制多段线、面的绘制；
添加绘图结束事件；
已绘制对象缓存；
通过上面几个功能，后续就能实现自定义范围空间查询了。
使用方法：
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);
}
}
}
绘图对象封装了一定的方法和属性，接口已经预留可以根据需要进一步扩展。效果图就不上了