ArcGIS for Js Graphic、GraphicLayer、Geometry、（Point，Line，Polygon）、Rings（Coordinates）之间的关系

一、名词解释

Graphic

图形,只一个展示在底图上的一个图形。构造函数Graphic（Geometry，Sysmol,Attribute,InfoTemplate）

参数一：Geometry：

几何构造，

是一个抽象类，具体是由（Point，Line，Polygon）来进行实现。

参数二：Sysmol：

图形样式，对集合对象的显示进行调整的对象。

参数三：Attribute：

属性，就是关于图形的相关数据都可以用这个进行承载。

参数四：InfoTemplate：

信息模板，就是用于展示属性信息或者其他内容的一个模板。这代表了显示模板的内容和样式都是可以自己定义的。

GraphicLayer

图层，可以理解为Graphic的集合。通过map.addLayer（graphicLayer）添加并显示在底图上。

Point，Line，Polygon

Point：

点 坐标点，由（x,y,SpatialReference）

PolyLine：

线 坐标点集合（points，SpatialReference）

Polygon:

面 面集合, 一个完整的面对象，将所有坐标点收尾相连。

rings（coordinates）：

环：因为在gis中存在多个面的情况，复合面等，所以在面中是以环的方式进行保存的。所以加入了环的概念。

SpatialReference:

空间参考系 再不同的地域使用不同的空间参考系得到的结果不同。需要对于wkid有一个简单的理解，和查询wkid的能力，这算是地理信息专业的尝试，如果有跨界的新手需要注意，我也是其中一个。

二、代码示例

let item= data[i];//这里是源数据 
//创建map
var map = new Map("map", {
                    //basemap:"delorme",slider:false,	zoom: 2,
                    logo: false, isZoomSlider: false,
                    slider: false, nav: false,
                });
//创建图层
var graphicsLayerWYTC = new GraphicsLayer();
  graphicsLayerWYTC.id = "CCC"
//图形样式
let symbol2 = new SimpleFillSymbol(
                        SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol(
                            SimpleLineSymbol.STYLE_SOLID,
                            new esri.Color([255, 0, 0]), 1
                        ),
                        new esri.Color([125, 125, 125, 0.2])
                    );  
	let sr =item.geometry.spatialReference
	let polygonPath = item.geometry.rings[0];//获取环中的第一个面。
	let polygon = new Polygon(sr);
	polygon.properties = {"id":item.id};
	polygon.addRing(polygonPath);
	var graphic = new Graphic(polygon, symbol2, polygon.properties, null);
	graphicsLayerWYTC.add(graphic);
	let centroid = item.geometry.cache._centroid;
	let pt = new esri.geometry.Point({"x": centroid.x,"y": centroid.y, "spatialReference": centroid.spatialReference});
	map.addLayer(graphicsLayerWYTC);//添加图层
	map.centerAndZoom(pt, 9);//指定Zoom级别并平移到指定点。
                                
        /**
         * 加载属性面板的样式。
         * 加入进入选择图斑的情况。
         * @return {InfoTemplate}
         */
		function loadInfoTemplate() {
            //当是在选择图斑的时候
            // 改变graphic的显示方式1
            //保存编号和点的信息。
            //alert("绑定模板");
            let infoTemplate = new InfoTemplate();
            infoTemplate.setTitle(function (graphic) {
                let id = graphic.attributes.OBJECTID ? graphic.attributes.OBJECTID : graphic.attributes.ID
                return "编号:" + id;
            });
            let width = document.body.clientWidth * 0.7 < 320 ? document.body.clientWidth * 70 / 100 : 320;//350为最小宽度
      
            // console.log(" 通过屏幕获取宽度", width);
            map.infoWindow.resize(width, 350);
            infoTemplate.setContent(function (graphic) {
                //  currentClickPoint = graphic.geometry.getCentroid();//中心点;
 				//自定义的模板
                var param = "attrWindow.html?data=" + encodeURI(JSON.stringify(graphic.attributes));
               
                attrHtmlDiv = "<div style='width: 100%;height: 310px'><iframe src='" + param + "'   frameborder='0'  style='width:100%; height:100%;padding:3px; margin:0px'>  </iframe></div>";
                return attrHtmlDiv;
            });
            return infoTemplate;
        }

三、跳坑记录

1. SpatialReference的问题

如果空间参考系不对的话是无法显示在同一个地图上的。

2. Graphic的第一个参数

Geometry，但Geometry是一个抽象类，所以需要用Point，PolyLine，Polygon作为实体类进行载入

3.Polygon的Rings

因为加入的是一个面，但是在shapefile数据中，面往往是以环的方式展示的，所以去rings[0]，以免解析报错。让做数据的人，尽量一个rings中只放一个面。