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 += "
" + "周长：" + 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