ArcGIS Server for javascript构建自己的GraphicsLayer(一)

原创 2013年12月03日 15:28:39

提起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 = 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之间可以进行排序,但在mapGraphicLayer只能放在最顶部,即其他图层之上,包括TiledMapServiceLayersDynamicMapServiceLayers.

 

声明一个新的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)方法加载到当前的地图中去。

 

ArcGIS API for Javascript Graphic心得

1、map对象中默认有一个GraphicLayer,置于最顶层,使用它的方式是map.graphics.  比如map.graphics.add(graphci); 2、可以给GraphicLa...
  • change2970955076
  • change2970955076
  • 2017年09月22日 09:25
  • 168

ArcGIS Server for javascript构建自己的GraphicsLayer

ArcGIS  Server for  javascript构建自己的GraphicsLayer 提起GraphicLayer就不得不说说Graphic,GraphicLayer是一个包含多个Gra...
  • jixg1800
  • jixg1800
  • 2012年12月24日 21:13
  • 12036

Arcgis for Js之Graphiclayer扩展详解(饼图)

在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的。在本节,就详细的讲讲esri/la...
  • huyanliang
  • huyanliang
  • 2016年04月29日 09:57
  • 2318

创建graphic的方式:可以添加属性、infoTemplate

var graphic=new Graphic(geometry?, symbol?, attributes?, infoTemplate?)//具体参考官网
  • qq_15167261
  • qq_15167261
  • 2015年09月16日 10:07
  • 826

ArcGIS for javascript 构建GraphicsLayer

ArcGIS for javascript 构建GraphicsLayer,并解决居中效果无效的问题。
  • cwb1128
  • cwb1128
  • 2014年10月01日 01:27
  • 6339

(五)ArcGIS API For Javascript之GraphicsLayer

引言 需求 1根据具体坐标生成Graphic 11代码实现 12全部代码 13代码解释 2GraphicsLayer的属性查询 21代码实现 22全部代码 23代码解释 3实现用户交互画图 3...
  • LoveCarpenter
  • LoveCarpenter
  • 2016年09月27日 10:53
  • 8410

ArcGIS GraphicsLayer层的特殊要求

如果你要使用GraphicsLayer这个绘图层,那么你需要注意自己的布局的模式不可以使用:layout="absolute" 如果你使用了这个布局,那么你的GraphicsLayer层可能会无法使...
  • tengdazhang770960436
  • tengdazhang770960436
  • 2012年05月22日 18:09
  • 2324

Silverlight API graphicsLayer.ClearGraphics()不能清除数据

前两天做了个程序发现使用graphicsLayer.ClearGraphics();清除数据的时候不能成功,提示graphiclayer数据为只读属性,百思不得其解,偶然的机会发现在添加数据的时候使用...
  • SYDBC
  • SYDBC
  • 2013年12月08日 17:32
  • 1322

ArcGIS API For Javascript之GraphicsLayer和Graphic

1、map对象中默认有一个GraphicLayer,置于最顶层,使用它的方式是map.graphics. 比如map.graphics.add(graphci);2、可以给GraphicLayer添...
  • birdflyto206
  • birdflyto206
  • 2016年05月20日 15:06
  • 2157

ArcGIS Server10.1 Javascript API的本地部署

用户在使用server的时候可能会发现在REST地址中的javascript方式浏览地图,需要计算在联网的情况下才能使用,原因是调用了在线的javascript API导致的,接下来我们来看如何让se...
  • esricd
  • esricd
  • 2012年08月03日 15:11
  • 2853
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ArcGIS Server for javascript构建自己的GraphicsLayer(一)
举报原因:
原因补充:

(最多只允许输入30个字)