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.Server.9.3和ArcGIS API for JavaScript中GraphicsLayer应用(初学GIS)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" >     Un...

ArcGIS.Server.9.3和ArcGIS API for JavaScript中GraphicsLayer应用(五)

原址:http://www.cnblogs.com/hll2008/archive/2008/11/23/1339348.html 目的: 1.ArcGIS.Server.9.3和ArcGIS A...

(五)ArcGIS API For Javascript之GraphicsLayer

引言 需求 1根据具体坐标生成Graphic 11代码实现 12全部代码 13代码解释 2GraphicsLayer的属性查询 21代码实现 22全部代码 23代码解释 3实现用户交互画图 3...

ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面(五)

目的: 1.ArcGIS API for Flex实现GraphicsLayer上画点、线、面。 准备工作: 1.这次地图数据就用Esri提供的http://server.arcgisonlin...

ArcGIS API for iOS开发教程四 使用GraphicsLayer

原文地址: http://www.giser.net/?p=20 http://tm.esrichina-bj.cn/tm/tech/?p=604 在前面的章节中,我们已经知道,如何在Ap...

Arcgis Server for JavaScript API之自定义InfoWindow

用过Arcgis Server for JavaScript API肯定知道InfoWIndow,你在用InfoWindow的时候会发现各种问题,例如不能完全显示的问题,遮盖对象的问题等等,所以呢我在...

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow

Arcgis API for js自定义InfoWindow,源代码下载地址http://download.csdn.net/detail/gisshixisheng/7412517...

ArcGIS Server for JavaScript api 3.3 离线部署

ArcGIS Server for JavaScript api 离线部署已经很简单了只需要改一个或者两个文件为什么是或者后面就知道了,但是每部署一次就要修改很麻烦。 为了达到减少修改次数的目的...

ArcGIS Server for JavaScript 3.3 的安装部署

ArcGIS Server for JavaScript 3.3 的安装部署               这两天要研究ArcGIS for Server的开发技术,ArcGIS for Se...

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ArcGIS Server for javascript构建自己的GraphicsLayer(一)
举报原因:
原因补充:

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