ArcGIS Server for javascript构建自己的GraphicsLayer（一）

提起GraphicLayer就不得不说说Graphic，GraphicLayer是一个包含多个Graphic的容器；而Graphic则是一个包含了图形、符号、属性及一个弹出提示框的元素，他显示在一个GraphicLayer中，通过GraphicLayer可以监听发生在Graphic身上的事件。

如何声明一个全新的Graphic呢，方法有两种，如下

结构	描述
esri.Graphic(geometry, symbol, attributes,  infoTemplate)	通过接口进行参数指定
esri.Graphic(json)	通过json串直接生成

 

可以根据自己的实际情况进行接口的应用，下面用两个例子来进行说明：

方法一：通过接口进行参数指定，各个参数的含义如下

 

<Geometry> geometry	Required	图形
<Symbol> symbol	Required	符号
<Object> attributes	Required	属性，组织方式为 key value
<InfoTemplate>  infoTemplate	Required	弹出提示框

 

 

具体写法如下

//声明一个点，指定x，y坐标及所在的坐标系

var pt = newesri.geometry.Point(xloc,yloc,map.spatialReference)；

//声明一个符号
var sms = new esri.symbol.SimpleMarkerSymbol().setStyle(
  esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE).setColor(
  new dojo.Color([255,0,0,0.5]));

//甚至想要的属性给这个Graphic
var attr = {"Xcoord":evt.mapPoint.x,"Ycoord":evt.mapPoint.y,"Plant":"MesaMint"};

//声明一个弹出提示框
var infoTemplate = new esri.InfoTemplate("Vernal PoolLocations","Latitude: ${Ycoord} <br/>
  Longitude: ${Xcoord} <br/>
  Plant Name:${Plant}");

//声明一个Graphic，同时将所有的参数进行指定
var graphic = new esri.Graphic(pt,sms,attr,infoTemplate);

 

方法二、通过json进行声明（这里不过多说明json的组织方式，可以查阅相关文档）

下面分别介绍点、线、面的生成方式

创建线

var myLine ={geometry:{"paths":[[[-91.40625,6.328125],[6.328125,19.3359375]]],

  "spatialReference":{"wkid":4326}},

  "symbol":{"color":[0,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"}};

var gra=new esri.Graphic(myLine);

创建多边形

var myPolygon ={"geometry":{"rings":[[[-115.3125,37.96875],[-111.4453125,37.96875],

  [-99.84375,36.2109375],[-99.84375,23.90625],[-116.015625,24.609375],

  [-115.3125,37.96875]]],"spatialReference":{"wkid":4326}},

  "symbol":{"color":[0,0,0,64],"outline":{"color":[0,0,0,255],

  "width":1,"type":"esriSLS","style":"esriSLSSolid"},

  "type":"esriSFS","style":"esriSFSSolid"}};

var gra =new esri.Graphic(myPolygon);

创建多点

var myMultiPoint ={"geometry":{"points":[[-92.109375,44.296875],[-86.1328125,31.9921875],

  [-73.4765625,45.703125]],"spatialReference":4326},"symbol":{"color":[255,255,255,64],

  "size":12,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSCircle",

  "outline":{"color":[0,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"}}};

var gra =new esri.Graphic(myMultiPoint);

创建点并指定一个弹出提示框

var myPoint ={"geometry":{"x":-104.4140625,"y":69.2578125,

  "spatialReference":{"wkid":4326}},"attributes":{"XCoord":-104.4140625,

  "YCoord":69.2578125,"Plant":"Mesa Mint"},"symbol":{"color":[255,0,0,128],

  "size":12,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS",

  "style":"esriSMSSquare","outline":{"color":[0,0,0,255],"width":1,

  "type":"esriSLS","style":"esriSLSSolid"}},

  "infoTemplate":{"title":"Vernal Pool Locations","content":"Latitude: ${YCoord} <br/>

   Longitude: ${XCoord} <br/> Plant Name:${Plant}"}};

var gra=new esri.Graphic(myPoint);

 

当然了Graphic还有其他的一些属性，这里就不多做介绍了。

 

接下来继续介绍GraphicLayer

 

在map中默认最顶层为一个GraphicLayer图层，获取为map.Graphics；同时可以声明独立的GraphicLayer图层加载到map中去，即map中可以加载多个GraphicLayer，同时GraphicLayer之间可以进行排序，但在map中GraphicLayer只能放在最顶部，即其他图层之上，包括TiledMapServiceLayers和DynamicMapServiceLayers.

 

声明一个新的GraphicLayer有两种方法：

esri.layers.GraphicsLayer()和esri.layers.GraphicsLayer(options?)

 

方法一：直接声明一个空的没有进行任何设置的GraphicLayer；

var graphicsLayer =new esri.layers.GraphicsLayer();

 

方法二、通过参数设置声明新的GraphicLayer

 

<Boolean>  displayOnPan	如果为true，图形的平移过程中显示。为false时，图形的水平运动期间关闭。设置为false，可以提高性能，在Internet  Explorer中。默认值是true。
<String>  id	ID
<Number>  opacity	图层透明度。值的范围从0.0到1.0之间，0.0是100％透明，1.0没有透明度。默认值是1.0。不支持Internet  Explorer。
<Boolean>  visible	图层是否可见

 

 

例如 var graphicsLayer = new esri.layers.GraphicsLayer({opacity:0.20});

通过map.addLayer(graphicsLayer)方法加载到当前的地图中去。