ArcGIS Server for javascript构建自己的GraphicsLayer
提起GraphicLayer就不得不说说Graphic,GraphicLayer是一个包含多个Graphic的容器;而Graphic则是一个包含了图形、符号、属性及一个弹出提示框的元素,他显示在一个GraphicLayer中,通过GraphicLayer可以监听发生在Graphic身上的事件。
如何声明一个全新的Graphic呢,方法有两种,如下
结构 |
描述 |
通过接口进行参数指定 |
|
通过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 |
方法
方法 |
值 |
描述 |
添加Graphic到GraphicLayer |
||
none |
清除GraphicLayer中所有的Graphic |
|
none |
禁止在图形图层上的所有鼠标事件。 |
|
none |
使在图形图层上的所有鼠标事件有效可用。 |
|
移除一个Graphic |
||
none |
设置或者改变图层上的弹出信息框 |
|
none |
设置图层的透明度.不支持Internet Explorer. |
|
none |
设置图层的透明度 |
事件
Event |
Description |
在Graphic被单击的时候触发 |
|
在Graphic被双击的时候触发 |
|
在一个graphic被添加到GraphicsLayer时被触发. |
|
在一个graphic被从GraphicsLayer中移除时被触发. |
|
清空GraphicLayer中的Graphic的时候触发 |
|
鼠标按钮被按下并将鼠标光标在图形上时触发 |
|
当鼠标被拖动,直到鼠标按钮被释放触发 |
|
当鼠标在GraphicLayer上的Graphic上移动时被触发 |
|
当鼠标从GraphicLayer上的Graphic上移出时被触发 |
|
当鼠标首次进入图形上的GraphicsLayer触发 |
|
当鼠标在GraphicLayer的Graphic上抬起,并没有离开Graphic范围的时候被触发 |
想要了解更多关于GraphicLayer的信息,请登陆Esri官网进行查阅,地址如下
http://help.arcgis.com/en/webapi/javascript/arcgis/