ArcGIS Server for javascript构建自己的GraphicsLayer

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 = new esri.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":"Mesa Mint"};

//声明一个弹出提示框
var infoTemplate = new esri.InfoTemplate("Vernal Pool Locations","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)方法加载到当前的地图中去。

 

主要的属性和方法如下

 

属性

属性	类型	描述
graphics	Graphic[]	返回Graphic数组
renderer	Renderer	返回Renderer

方法

方法	值	描述
add(graphic)	Graphic	添加Graphic到GraphicLayer
clear()	none	清除GraphicLayer中所有的Graphic
disableMouseEvents()	none	禁止在图形图层上的所有鼠标事件。
enableMouseEvents()	none	使在图形图层上的所有鼠标事件有效可用。
remove(graphic)	Graphic	移除一个Graphic
setInfoTemplate(infoTemplate)	none	设置或者改变图层上的弹出信息框
setOpacity(opacity)	none	设置图层的透明度.不支持Internet Explorer.
setRenderer(renderer)	none	设置图层的透明度

事件

Event	Description
onClick(event)	在Graphic被单击的时候触发
onDblClick(event)	在Graphic被双击的时候触发
onGraphicAdd(graphic)	在一个graphic被添加到GraphicsLayer时被触发.
onGraphicRemove(graphic)	在一个graphic被从GraphicsLayer中移除时被触发.
onGraphicsClear()	清空GraphicLayer中的Graphic的时候触发
onMouseDown(event)	鼠标按钮被按下并将鼠标光标在图形上时触发
onMouseDrag(event)	当鼠标被拖动，直到鼠标按钮被释放触发
onMouseMove(event)	当鼠标在GraphicLayer上的Graphic上移动时被触发
onMouseOut(event)	当鼠标从GraphicLayer上的Graphic上移出时被触发
onMouseOver(event)	当鼠标首次进入图形上的GraphicsLayer触发
onMouseUp(event)	当鼠标在GraphicLayer的Graphic上抬起，并没有离开Graphic范围的时候被触发

 

想要了解更多关于GraphicLayer的信息，请登陆Esri官网进行查阅，地址如下

http://help.arcgis.com/en/webapi/javascript/arcgis/