config.xml文件的配置如下：
<widget label="态势标绘" icon="assets/images/impact_area_over.png"
config="widgets/esri/NewPlot/NewPlotWidget.xml" url="widgets/esri/NewPlot/NewPlotWidget.swf" />
源代码目录如下：
界面效果：
大概的思路如下：利用arcgis api for flex的draw绘制接口以及一个第三方的绘制api PlotAPI4flex,来绘制各种箭头以及多边形、圆形等图形，文本和图片的绘制用的是arcgis api。
NewPlotWidget.xml：配置计算周长和面积的单位信息等等
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<geometryservice>http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer</geometryservice>
<spatialref>4326</spatialref>
<distanceunit>千米</distanceunit>
<areaunit>平方公里</areaunit>
<showMeasurements>显示测量结果</showMeasurements>
<perimeter>周长：</perimeter>
<arealabel>面积：</arealabel> </configuration>
NewPlotWidget.mxml：
简单的描述一下思路好了
1.响应绘制的事件，要激活draw工具：
//集成后的标会响应函数
private function activateDrawTool(event:MouseEvent):void
{
this.drawToolbar.deactivate();
graphicsLayer.visible=true;
selectedDrawingIcon =BorderImage(event.currentTarget);
clearSelectionFilter();
selectedDrawingIcon.filters = [ glowFilter ]; finishDrawing = false;
showMeasurements = false;
drawType = selectedDrawingIcon.name; borVisibleChange(selectedDrawingIcon.id); switch (drawType)
{ case DrawTool.POLYLINE:
{
addingPlot=false;
drawingPolygon = false;
drawingLine = true;
showMeasurements = true; outlineColorId.visible=false;
outlineColor.visible=false; drawStatus = drawLineLabel; this.drawtool.deactivate();
setMapAction(drawType, drawStatus, lineSymbol, drawEnd);
break;
}
case DrawTool.FREEHAND_POLYLINE:
{
addingPlot=drawingPolygon =false;
drawingLine=showMeasurements = true; outlineColorId.visible=false;
outlineColor.visible=false; drawStatus = drawFreehandLineLabel; this.drawtool.deactivate();
setMapAction(drawType, drawStatus, lineSymbol, drawEnd);
break;
}
case DrawTool.POLYGON:
{
addingPlot= drawingLine = false;
drawingPolygon = showMeasurements = true; outlineColorId.visible=true;
outlineColor.visible=true; drawStatus = drawPolygonLabel; this.drawtool.deactivate();
setMapAction(drawType, drawStatus, fillSymbol, drawEnd);
break;
}
case DrawTool.EXTENT:
{
addingPlot= drawingLine = false;
drawingPolygon = showMeasurements = true; outlineColorId.visible=true;
outlineColor.visible=true; drawStatus = drawExtentLabel; this.drawtool.deactivate();
setMapAction(drawType, drawStatus, fillSymbol, drawEnd);
break;
}
case DrawTool.CIRCLE:
{
addingPlot= drawingLine = false;
drawingPolygon = showMeasurements = true; outlineColorId.visible=true;
outlineColor.visible=true; drawStatus = drawCircleLabel; this.drawtool.deactivate();
setMapAction(drawType, drawStatus, fillSymbol, drawEnd);
break;
}
case DrawTool.FREEHAND_POLYGON:
{
addingPlot= drawingLine = false;
drawingPolygon =showMeasurements = true; outlineColorId.visible=true;
outlineColor.visible=true; drawStatus = drawFreehandPolygonLabel; this.drawtool.deactivate();
setMapAction(drawType, drawStatus, fillSymbol, drawEnd);
break;
}
case DrawTool.MAPPOINT:
{
this.addingPlot=drawingPolygon =drawingLine = showMeasurements = false;
this.addingText=true;
drawStatus = drawMapPointLabel; outlineColorId.visible=true;
outlineColor.visible=true; this.drawtool.deactivate();
setMapAction(drawType,drawStatus,null,drawEnd);
break;
}
default:
{
//响应态势标会
drawingPolygon =drawingLine = showMeasurements = false;
this.addingPlot=true; outlineColorId.visible=true;
outlineColor.visible=true; this.setMapAction(null,null,null,null);
var outline:SimpleLineSymbol=new SimpleLineSymbol("solid", this.outlineColor.selectedColor, this.customAlpha.value, 1);
drawtool.fillSymbol=new SimpleFillSymbol("solid", this.fillColor.selectedColor, customAlpha.value, outline); this.drawtool.activate(drawType); } } }
2.绘制完之后的结束事件，获取geometry等信息，分别判断是属于哪种类型（点、线、面等等），然后转换graphic，添加在地图上展示出来
private function drawEnd(event:DrawEvent):void
{ finishDrawing = true;
this.drawtool.deactivate();
this.setMapAction(null,null,null,null); selectedDrawingIcon = null;
clearSelectionFilter();
event.target.deactivate();
var outSR:SpatialReference = new SpatialReference(102113);
var geom:Geometry = event.graphic.geometry; lastDrawGraphic = new Graphic(geom); if(addingPlot==true)
{ var outline:SimpleLineSymbol=new SimpleLineSymbol("solid", this.outlineColor.selectedColor, this.customAlpha.value, 1);
lastDrawGraphic.symbol=new SimpleFillSymbol("solid", this.fillColor.selectedColor, customAlpha.value, outline);
this.drawtool.deactivate(); }
else
{
switch (geom.type)
{
/* case Geometry.MAPPOINT:
{
//文本标会就是对点的symbol进行了修改
if (txtLabel.text == "")
return;
var text:String=txtLabel.text;
var color:uint=cpText.selectedColor;
var font:String=textFont.selectedItem.font;
var size:Number=numTextSize.value;
var textFormat:TextFormat=new TextFormat(font, size, color, bold.selected, italic.selected, underline.selected);
var textSymbol:TextSymbol=new TextSymbol(text);
textSymbol.textFormat=textFormat;
lastDrawGraphic.symbol=textSymbol;
break; } */
case Geometry.POLYLINE:
{
lastDrawGraphic.symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, fillColor.selectedColor, customAlpha.value, 6);
if (chkMeasurements.selected)
{
var param:ProjectParameters=new ProjectParameters();
param.geometries=[geom];
param.outSpatialReference=outSR;
geometryService.project(param);
var polyline:Polyline = geom as Polyline;
measurePt = polyline.extent.center;
}
break;
}
case Geometry.POLYGON:
{ lastDrawGraphic.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, fillColor.selectedColor, customAlpha.value, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, outlineColor.selectedColor, 1, 2));
if (chkMeasurements.selected)
{
var param:ProjectParameters=new ProjectParameters();
param.geometries=[geom];
param.outSpatialReference=outSR;
geometryService.project(param);
var polygon:Polygon = geom as Polygon;
measurePt = polygon.extent.center;
}
break; }
case Geometry.EXTENT:
{
lastDrawGraphic.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, fillColor.selectedColor, customAlpha.value, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, outlineColor.selectedColor, 1, 2));
if (chkMeasurements.selected)
{
var param:ProjectParameters=new ProjectParameters();
param.geometries=[geom];
param.outSpatialReference=outSR;
geometryService.project(param);
var extent:Extent = geom as Extent;
measurePt = extent.center;
}
break;
}
}
} //添加删除要素监听事件
lastDrawGraphic.addEventListener(MouseEvent.CLICK, onGraphicClick); graphicsLayer.add(lastDrawGraphic);
onePlanGraphics.addItem(lastDrawGraphic);
savePlanBtn.enabled=true; }
3.投影结果函数，计算周长和面积等信息
//使用GeometryService计算距离和面积等响应
private function projectCompleteHandler(event:GeometryServiceEvent):void
{
var geom:Geometry = (event.result as Array)[0];
var lengthsParameters:LengthsParameters = new LengthsParameters();
var areasAndLengthsParameters:AreasAndLengthsParameters = new AreasAndLengthsParameters();
switch (geom.type)
{
case Geometry.POLYLINE:
{
var pLine:Polyline = Polyline(geom);
lengthsParameters.geodesic = true;
lengthsParameters.polylines = [ pLine ];
geometryService.lengths(lengthsParameters);
break;
}
case Geometry.POLYGON:
{
var pGon:Polygon = Polygon(geom);
areasAndLengthsParameters.polygons = [ pGon ];
geometryService.areasAndLengths(areasAndLengthsParameters);
break;
}
case Geometry.EXTENT:
{
var extent:Extent = Extent(geom);
// convert it to a polygon for measurment
const arrPoints:Array = [
new MapPoint(extent.xmin, extent.ymin),
new MapPoint(extent.xmin, extent.ymax),
new MapPoint(extent.xmax, extent.ymax),
new MapPoint(extent.xmax, extent.ymin),
new MapPoint(extent.xmin, extent.ymin)
];
var polygon:Polygon = new Polygon();
polygon.addRing(arrPoints);
polygon.spatialReference = extent.spatialReference;
areasAndLengthsParameters.polygons = [ polygon ];
geometryService.areasAndLengths(areasAndLengthsParameters);
break;
}
}
}
private function arealengthsCompleteHandler(event:GeometryServiceEvent):void
{
var area:Number = event.result.areas[0]; //event.arealengths.areas[0];
var length:Number = event.result.lengths[0]; // or (event.result as Array)[0]; //event.arealengths.lengths[0];
var label:String = "面积：" + numFormatter.format(area/1000000) + "平方千米";
label += "\n" + "周长：" + numFormatter.format(length/1000) + "千米";
addDrawLabel(label, lastDrawGraphic);
}
private function lengthsCompleteHandler(event:GeometryServiceEvent):void
{
var length:Number = (event.result as Array)[0];
var label:String = "距离：" + numFormatter.format(length/1000) + "千米";
addDrawLabel(label, lastDrawGraphic);
}
备注：
GIS技术交流QQ群：432512093
WebGIS二次开发培训入门群： 238339408