Add same Graphics to two Graphics layers

shafitrumboo — Mon, 24 Sep 2012 05:39:03 GMT

I have widget where user can input x and y co-ordinates and select geometry type. I have two graphics layers one for showing the geometry and other where user actually commits the geometry. e,g
1. If user has selected Line geometry type
2. User will enter the x, y and click on "addPointBtn" button and say this is first point then handleaddPointBtnClick will be called and a point graphics will be created and added to _tempgraphicsLayer layer
3. User will enter the x, y and click on "addPointBtn" button and say this is second point then handleaddPointBtnClick will be called and _tempgraphicsLayer will be cleared first and new line graphics will be created using two points and added to _tempgraphicsLayer layer
4. User will enter the x, y and click on "addPointBtn" button and say this is third point then handleaddPointBtnClick will be called and _tempgraphicsLayer will be cleared first and new line graphics will be created using three points and added to _tempgraphicsLayer layer.
5. Now user clicks on finishDrawingBtn button then handlefinishDrawingBtnClick function will be called and _tempgraphicsLayer will be cleared and new line graphics will be created using three points and added to _graphicsLayer layer.

Problem: Once I commit the no graphics appears on map

[HTML]package widgets.DrawGraphics1.mediators
{
import com.esri.ags.Graphic;
import com.esri.ags.geometry.Extent;
import com.esri.ags.geometry.MapPoint;
import com.esri.ags.geometry.Polygon;
import com.esri.ags.geometry.Polyline;
import com.esri.ags.layers.GraphicsLayer;
import com.esri.ags.symbols.Symbol;
import com.esri.ags.tools.DrawTool;
import com.esri.ags.utils.WebMercatorUtil;

import de.giscon.swiz.mediators.AbstractViewMediator;

import flash.display.Graphics;
import flash.events.Event;
import flash.events.MouseEvent;

import mx.controls.Alert;
import mx.controls.Image;

import widgets.DrawGraphics1.views.DrawGraphicsView;

public class DrawGraphics extends AbstractViewMediator
{
private var _graphicsLayer:GraphicsLayer;
private var _tempgraphicsLayer:GraphicsLayer;
private var selectedDrawingIcon:Image;
private var selectedDrawingIconfillStyle:Image;
private var drawingCircle:Boolean;

[Bindable]
private var drawingPolygon:Boolean;
[Bindable]
private var drawingLine:Boolean;
[Bindable]
private var drawingPoint:Boolean;

private var drawMode:String;
private var drawSymbol:Symbol;
private var drawType:String;
private var finishDrawing:Boolean;
var mapPointArray:Array = new Array();

public function DrawGraphics()
{
   super(this, DrawGraphicsView);
}
public function get view():DrawGraphicsView
{
   return _view as DrawGraphicsView;
}
protected override function widgetConfigurationLoaded(event:Event):void
{
   this.view.addPointBtn.addEventListener(MouseEvent.CLICK, handleaddPointBtnClick);
   this.view.finishDrawingBtn.addEventListener(MouseEvent.CLICK, handlefinishDrawingBtnClick);

   addGraphicsLayer();
}
protected function handlefinishDrawingBtnClick(event:MouseEvent):void
{

    if(drawingLine == true)
    {
     createPolyline(false);
    }
    if(drawingPolygon == true)
    {
     createPolygon(false);
    }
    mapPointArray.length = 0;
}

protected function handleaddPointBtnClick(event:MouseEvent):void
{
   if(this.view.xCordTxt.text.toString() != "" && this.view.yCordTxt.text.toString() != "")
   {
    var mapPoint:MapPoint = new MapPoint(Number(this.view.xCordTxt.text), Number(this.view.yCordTxt.text), baseWidget.map.spatialReference);
    var webMapPoint:MapPoint = WebMercatorUtil.geographicToWebMercator(mapPoint) as MapPoint;
    if( drawingPoint == true)
    {
     mapPointArray.length = 0;
     mapPointArray.push(webMapPoint);
     baseWidget.map.centerAt(webMapPoint);
     createPoint(false);
    }
    if(drawingLine == true)
    {
     mapPointArray.push(webMapPoint);
     if(mapPointArray.length == 1)
     {
      createPoint(true);
     }
     else
     {
      createPolyline(true);
     }
    }
    if(drawingPolygon == true)
    {
     mapPointArray.push(webMapPoint);
     if(mapPointArray.length == 1)
     {
      createPoint(true);
     }
     else if(mapPointArray.length == 2)
     {
      createPolyline(true);
     }
     else
     {
      createPolygon(true);
     }

    }
   }
}
private function handlegeomtypeImgClick(event:MouseEvent):void
{

   // apply glow
   selectedDrawingIcon = Image(event.currentTarget);
   clearSelectionFilter();
   selectedDrawingIcon.filters = [ this.view.glowFilter ];
   drawingPolygon = false;
   drawingLine = false;
   drawingPoint = false;
   mapPointArray.length = 0;

   drawType = selectedDrawingIcon.name;
   switch (drawType)
   {
    case DrawTool.MAPPOINT:
    {
     drawingPoint = true;
     break;
    }
    case DrawTool.POLYLINE:
    {
     drawingLine = true;
     break;
    }
    case DrawTool.EXTENT:
    {
     drawingPolygon = true;
     break;
    }
   }

}
protected function createPolyline(temp:Boolean):void
{

   if(mapPointArray.length >= 2)
   {
    var polyline:Polyline = new Polyline(new Array(mapPointArray), baseWidget.map.spatialReference);
    var graphics:Graphic = new Graphic(polyline);
    graphics.symbol = this.view.lineSymbol
    addGraphic(graphics, temp);
   }
}
protected function createPoint(temp:Boolean):void
{

   var mapPoint:MapPoint = mapPointArray[0];
   var graphics:Graphic = new Graphic(mapPoint);
   graphics.symbol = this.view.pointSymbol;
   addGraphic(graphics, temp);
}

protected function createPolygon(temp:Boolean):void
{

   if(mapPointArray.length >= 3)
   {
    var polygon:Polygon = new Polygon(new Array(mapPointArray), baseWidget.map.spatialReference);
    var graphics:Graphic = new Graphic(polygon);
    graphics.symbol = this.view.fillSymbol
    addGraphic(graphics, temp);
   }
}
private function addGraphic(graphics:Graphic, temp:Boolean):void
{
   if(temp == true)
   {
    //_tempgraphicsLayer.clear();
    GraphicsLayer(baseWidget.map.getLayer("TempDrawGraphicsID")).clear();
    var submitGraphics:Graphic = GraphicsUtil.cloneGraphic(graphics);
    _tempgraphicsLayer.add(submitGraphics);
   }
   else
   {
                               GraphicsLayer(baseWidget.map.getLayer("TempDrawGraphicsID")).clear();
    var submitGraphics:Graphic = GraphicsUtil.cloneGraphic(graphics);
    _graphicsLayer.add(submitGraphics);
   }

}

private function addGraphicsLayer():void
{
   _graphicsLayer = new GraphicsLayer();
   _graphicsLayer.name = "DrawGraphics";
   _graphicsLayer.id = "DrawGraphicsID";
   baseWidget.map.addLayer(_graphicsLayer) ;

   _tempgraphicsLayer = new GraphicsLayer();
   _tempgraphicsLayer.name = "TempDrawGraphics";
   _tempgraphicsLayer.id = "TempDrawGraphicsID";
   baseWidget.map.addLayer(_tempgraphicsLayer) ;
}
}
}[/HTML]

Re: Add same Graphics to two Graphics layers

IvanBespalov — Sun, 12 Dec 2021 16:07:14 GMT

1 :confused: from your code

if(drawingLine == true)
if (drawingLine)

2 :confused: from your code

this.view.xCordTxt.text.toString()
this.view.xCordTxt.text
this.view.xCordTxt.text.length > 0 or this.view.xCordTxt.text != ""

3 :confused: from your code

// create new point based on input coordinates and Map spatial reference
var mapPoint:MapPoint = new MapPoint(Number(this.view.xCordTxt.text), Number(this.view.yCordTxt.text), baseWidget.map.spatialReference);
// create new point based on existing point with NOT Map  spatial reference
var webMapPoint:MapPoint = WebMercatorUtil.geographicToWebMercator(mapPoint) as MapPoint;
if (drawingPoint == true)
{
 mapPointArray.length = 0;
 mapPointArray.push(webMapPoint);
        // center at no one knows where, 
        // because map spatial ref. not equals with center point spatial ref.
 baseWidget.map.centerAt(webMapPoint);
 createPoint(false);
}

4 a good way to understand what's happening in this pile of code - listening events, debug code, trace some info to console

private function addGraphicsLayer():void
{
 _graphicsLayer = new GraphicsLayer();
 _graphicsLayer.name = "DrawGraphics";
 _graphicsLayer.id = "DrawGraphicsID";
        // Fires after layer properties for the layer are successfully populated.
        _graphicsLayer.addEventListener(LayerEvent.LOAD, onLayerLoad); 
        // Fires when a graphic is added to the GraphicsLayer.
        _graphicsLayer.addEventListener(GraphicEvent.GRAPHIC_ADD, onGraphicAdd);
        // Fires when all graphics in the GraphicsLayer are cleared.
        _graphicsLayer.addEventListener(GraphicsLayerEvent.GRAPHICS_CLEAR, onGraphicClear);
...
}

protected function onLayerLoad(event:LayerEvent):void
{
      // now you can work with layer
      trace("Layer with id='" + event.layer.id + "' added to map");
}

protected function onGraphicAdd(event:GraphicEvent):void
{
      // now you can work with added graphic - zoom to it, change symbol, tooltip, attributes ...
      var gr:Graphic = event.graphic;
      trace("Graphic with id='" + gr.id + "' just added");
}

protected function onGraphicClear(event:GraphicsLayerEvent):void
{
      // now graphics layer is empty
      trace("Graphics layer is cleared");
}

Good luck.

topic Re: Add same Graphics to two Graphics layers in ArcGIS API for Flex Questions

Add same Graphics to two Graphics layers

Re: Add same Graphics to two Graphics layers