ArcGIS Server for javascript构建自己的GraphicsLayer

ArcGIS  Server for  javascript构建自己的GraphicsLayer

提起GraphicLayer就不得不说说GraphicGraphicLayer是一个包含多个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

弹出提示框

 

具体写法如下

//声明一个点,指定xy坐标及所在的坐标系

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之间可以进行排序,但在mapGraphicLayer只能放在最顶部,即其他图层之上,包括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.01.0之间,0.0100%透明,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

添加GraphicGraphicLayer

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)

当鼠标在GraphicLayerGraphic上抬起,并没有离开Graphic范围的时候被触发

 

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

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

 

 

 

 

展开阅读全文

没有更多推荐了,返回首页