地理信息系统（GIS）系列——ArcGIS API for JavaScript 3.9（2）

小灰灰 2023-01-10 09:56 127阅读 0赞

### 1、Measurement 测量工具 ###

*  测量小部件：提供了工具计算当前位置、测量距离、测量面积
 *  构造函数

new Measurement(params, srcNodeRef)

#### Params 参数 ####

*  defaultAreaUnit：默认面积单位
 *  defaultLengthUnit：默认长度单位
 *  lineSymbol：线的样式
 *  Map：默认地图
 *  pointSymbol：点样式

#### 方法 ####

*  clearResult()：删除图形和测量结果
 *  destroy()：破坏测量部件
 *  getTool()：返回测量工具对象，有两个属性：工具和单位
 *  getUnit()：返回当前测量工具的计量单位
 *  hide()：隐藏部件
 *  hideTool(toolName)：隐藏指定工具
 *  measure(geometry)：调用测量工具创建几何对象
 *  setTool(toolName, activate)：激活或取消激活测量工具
 *  show()：显示绘制的几何对象
 *  showTool(toolName)：显示测量工具
 *  startup()：完成测量工具的创建

#### 事件 ####

*  measure：没有单击时候的事件
 *  measure-end：测量完成后执行的事件
 *  measure-start：测量开始的事件
 *  tool-change：测量工具改变的事件
 *  unit-change：测量单位变化的事件

<!DOCTYPE html>
    <html> 
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Measure Tool</title>
     	<link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/claro/claro.css" />
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
        <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
        <style> html,body { height:100%; width:100%; margin:0; } body { background-color:#FFF; overflow:hidden; font-family:"Trebuchet MS"; } #map { border:solid 2px #808775; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; margin:5px; padding:0px; } #titlePane{ width:240px; } .claro .dijitTitlePaneTitle { background: #fff; font-weight:600; border: none; border-bottom:solid 1px #29201A; border-top:solid 1px #29201A; } .claro .dijitTitlePaneTitleHover { background:#eee; } .claro .dijitTitlePaneTitleActive { background:#808775; } .claro .dijitTitlePaneContentOuter { border-right: none; border-bottom: none; border-left: none; } </style>
      
        <script> var map; require([ "dojo/dom", "esri/Color", "dojo/keys", "dojo/parser", "esri/map", "esri/SnappingManager", "esri/dijit/Measurement", "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/tasks/GeometryService", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/dijit/Scalebar", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane", "dijit/form/CheckBox", "dojo/domReady!" ], function ( dom, Color, keys, parser, Map, SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol, Scalebar, BorderContainer, ContentPane, TitlePane, CheckBox ) { parser.parse(); map = new Map("map", { basemap: "satellite", center: [-85.743, 38.256], zoom: 17 }); var measurement = new Measurement({ map: map }, dom.byId("measurementDiv")); measurement.startup(); measurement.on("measure-end", function(evt){ var evo = evt; alert(evt.target.result); }); }); </script>
      </head>
      
      <body class="claro">
        <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
          <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <div style="position:absolute; right:20px; top:10px; z-Index:999;">
              <div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">
                <div id="measurementDiv"></div>           
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

### 2、时间滑块控件 ###

#### TimeSlider ####

*  位置：esri/dijit/TimeSlider
 *  作用：用于在 Web 端对时态感知图层提供支持
 *  构造函数：

new esri.dijit.TimeSlider(params, srcNodeRef)

#### TimeSlider 属性 ####

*  loop：是否循环执行
 *  playing：是否正在打开
 *  thumbCount：指针计数
 *  thumbMovingRate：指针移动比例
 *  timeStops：一个数组表示停止的日期

#### TimeSlider 方法 ####

createTimeStopsByCount(timeExtent, count?)

*  输入时间范围，执行指定次数
 *  timeExtent：时间范围
 *  count：输入数量

createTimeStopsByTimeInterval(timeExtent, timeInterval?, timeIntervalUnits?)

*  创建指定时间间隔执行的事件
 *  timeExtent：时间范围
 *  timeInterval：时间间隔的长度
 *  timeIntervalUnits：时间间隔单位

getCurrentTimeExtent()

*  获取当前时间范围时间滑块
 *  next()：移到下一个时间
 *  pause()：暂停时间滑块
 *  play()：开始播放
 *  previous()：移动到前一个时间步
 *  setLabels(labels)：指定一个字符串数组作为标签
 *  setLoop(loop)：决定是否循环
 *  setThumbCount(thumbCount)：设置指针数量
 *  setThumbIndexes(indexes)：两个整数数组，第一个值决定指针开始点
 *  setThumbMovingRate(thumbMovingRate)：设置移动速度
 *  setTickCount(count)：指定时间刻度显示在时间滑块上
 *  setTimeStops(timeStops)：设置停止时间

#### TimeSlider 事件 ####

*  time-extent-change：事件发生变化的时间范围

#### TimeExtent ####

*  时间范围

new esri.TimeExtent(startTime,endTime)

*  时间范围构造函数

示例代码：

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Well completion dates for the Hugoton Gas Field Over Time</title>
        
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/claro/claro.css" />
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
        <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
        <style> html, body, #mapDiv { padding:0; margin:0; height:100%; } #mapDiv { position: relative; } #bottomPanel { left: 50%; margin: 0 auto; margin-left: -500px; position: absolute; bottom: 2.5em; } #timeInfo{ border-radius: 4px; border: solid 2px #ccc; background-color: #fff; display: block; padding: 5px; position: relative; text-align: center; width: 1000px; z-index: 99; } </style>
     
        <script> var map; require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/TimeExtent", "esri/dijit/TimeSlider", "dojo/_base/array", "dojo/dom", "dojo/domReady!" ], function ( Map, ArcGISDynamicMapServiceLayer, TimeExtent, TimeSlider, arrayUtils, dom ) { map = new Map("mapDiv", { basemap: "streets", center: [-101.15, 37.604], zoom: 9 }); var opLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSWells/MapServer"); opLayer.setVisibleLayers([0]); // 应用定义表达式,所以只显示一些功能 var layerDefinitions = []; layerDefinitions[0] = "FIELD_KID=1000148164"; opLayer.setLayerDefinitions(layerDefinitions); // 添加图层到地图 map.addLayers([opLayer]); map.on("layers-add-result", initSlider); function initSlider() { var timeSlider = new TimeSlider({ style: "width: 100%;" }, dom.byId("timeSliderDiv")); map.setTimeSlider(timeSlider); var timeExtent = new TimeExtent(); // 开始时间 timeExtent.startTime = new Date("1/1/1921 UTC"); // 结束时间 timeExtent.endTime = new Date("12/31/2009 UTC"); // 设置指针数量 timeSlider.setThumbCount(2); timeSlider.createTimeStopsByTimeInterval(timeExtent, 2, "esriTimeUnitsYears");//创建时间间隔 timeSlider.setThumbIndexes([0, 1]);//设置指针索引 timeSlider.setThumbMovingRate(2000);//设置变化速率 timeSlider.startup(); // 停止时间段获取标签 var labels = arrayUtils.map(timeSlider.timeStops, function (timeStop, i) { if (i % 2 === 0) { return timeStop.getUTCFullYear(); } else { return ""; } }); timeSlider.setLabels(labels); timeSlider.on("time-extent-change", function (evt) { var startValString = evt.startTime.getUTCFullYear(); var endValString = evt.endTime.getUTCFullYear(); dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString + "<\/i>"; }); } }); </script>
      </head>
      <body class="claro">
        <div id="mapDiv">
          <div id="bottomPanel">
            <div id="timeInfo">
              <div>Hugoton Gas Field Wells from <span id="daterange">1921 to 2009</span> (Completion date)</div>
              <div id="timeSliderDiv"></div>
            </div>
          </div>
        </div>
      </body>
    </html>

### 3、ImageServiceTask 数据查询 ###

#### ImageServiceIdentifyTask ####

*  ImageServiceIdentifyTask 与 IdentifyTask 类似，但只能用于识别影像服务数据
 *  构造函数

new ImageServiceIdentifyTask(url)

*  方法

execute(params,callback?,errback?)

#### ImageServiceIdentifyParameters ####

*  ImageServiceIdentifyTask 的查询参数
 *  构造函数

new esri.layers.ImageServiceParameters()

*  ImageServiceIdentifyParameters 属性：
 *  Extent：输出图片的范围
 *  format：地图图像格式
 *  height：寻求单层图像像素的高度
 *  interpolation：当前的插值法
 *  mosaicRule：指定了镶嵌规则，在图像上定义扫描线
 *  renderingRule：呈现规则
 *  timeExtent：影像的时间范围
 *  width：请求的图像的像素宽度

#### ImageServiceIdentifyResult ####

*  ImageServiceIdentifyTask 返回结果
 *  ImageServiceIdentifyResult 属性：
 *  catalogItems：获取返回结果的目录项，是一个 FeatureSet
 *  catalogItemVisibilities：获取目录项的可见性（影像数据集才可以使用该属性）
 *  location：获取点击的位置
 *  name：获取返回结果的名称
 *  objectID：获取对象的 ID
 *  properties：获取属性
 *  value：获取值

### 4、Esri 小部件 BasemapToggle ###

#### 构造函数 ####

new esri.dijit.BasemapToggle(params,srcNodeRef)

*  实现地图服务之间的切换

#### 属性 ####

*  basemap：二级基础图切换
 *  basemaps：对象包含标签和每个基础图图像的url
 *  loaded：小部件是否已经加载
 *  map：地图对象
 *  theme：小部件样式
 *  visible：默认情况下是否可见

#### 方法 ####

*  destroy()：销毁小部件
 *  hide()：隐藏小部件
 *  show()：显示小部件
 *  startup()：创建小部件
 *  toggle()：切换到下一个底图

#### 事件 ####

*  Load：小部件被加载的事件
 *  Toggle：当触发的时候时切换底图

示例代码：

<!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
      <title>Basemap Toggle</title>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/claro/claro.css" />
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
        <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
      	<style> html, body, #map { padding:0; margin:0; height:100%; } #BasemapToggle { position: absolute; top: 20px; right: 20px; z-index: 50; } </style>
    
      	<script> var map; require([ "esri/map", "esri/dijit/BasemapToggle", "dojo/domReady!" ], function ( Map, BasemapToggle ) { map = new Map("map", { center: [-70.6508, 43.1452], zoom: 16, basemap: "topo" }); var toggle = new BasemapToggle({ map: map, basemap: "satellite" }, "BasemapToggle"); toggle.startup(); }); </script>
    </head>
    <body>
      <div id="map" class="map">
        <div id="BasemapToggle"></div>
      </div>
    </body>
    </html>

### 5、Esri 小部件 BasemapGallery ###

#### BasemapGallery ####

###### 构造函数 ######

new esri.dijit.BasemapGallery(params,srcNodeRef?)

*  实现多层地图服务之间的切换

###### 属性 ######

*  basemaps：地图服务集合
 *  loaded：是否加载了服务
 *  portalUrl：可选参数，传入一个url，包括实例的名称，用于访问包含底图的图层服务

###### 方法 ######

*  add(basemap)：添加地图服务
 *  destroy()：破坏小部件
 *  get(id)：返回指定 id 的底图
 *  getSelected()：当前选择的底图
 *  remove(id)：删除指定 id 的底图
 *  select(id)：选择指定 id 的底图
 *  startup()：完成创建部件
 *  事件
 *  add：添加底图
 *  error：错误事件
 *  load：加载事件
 *  remove：移除图层时候发生的事件
 *  selection-change：改变选择的服务时触发的事件

#### Basemap ####

*  底图类，主要用于地图 BasemapGallery

###### 构造函数 ######

new Basemap(params)

###### 属性 ######

*  id：地图编号
 *  thumbnailUrl：底图的缩略图的 url
 *  title：标题
 *  layers：图层集合

###### 方法 ######

*  getLayers()：获取图层列表

var waterTemplateLayer = new esri.dijit.BasemapLayer({  	
    	url: basemapURL 
    });
    
    var waterBasemap = new esri.dijit.Basemap({  
    	layers: [waterTemplateLayer], 
    	title: "Water Template",
    	thumbnailUrl: "images/waterThumb.png" 
    });

<!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      
      <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
      <title>Display Multiple ArcGIS Online Services</title>
      <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/claro/claro.css" />
      <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
      <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
      <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
      <style> html, body { height: 97%; width: 98%; margin: 1%; } #map { border: solid 1px #B5BCC7; padding: 0; } #paneHeader { background: url(images/header.png) repeat-x; color: white; border-bottom: solid 1px #B5BCC7; text-align: center; height: 30px; margin: 0; overflow: hidden; font-size: 16px; padding: 8px 5px; } #rightPane { width: 150px; margin: 0; padding: 0; } </style>
    
      <script> var dojoConfig = { parseOnLoad: true }; </script>
    
      <script> dojo.require("esri.map"); dojo.require("dijit.form.Button"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.dijit.BasemapGallery"); dojo.require("esri.arcgis.utils"); var map; function init() { map = new esri.Map("map"); createBasemapGallery(); } function createBasemapGallery() { // manually create basemaps to add to basemap gallery // Basemap数组 var basemaps = []; // 创建BasemapLayer var waterTemplateLayer = new esri.dijit.BasemapLayer({ url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastructureBasemap/MapServer" }); // 创建Basemap var waterBasemap = new esri.dijit.Basemap({ layers: [waterTemplateLayer], title: "Water Template", thumbnailUrl: "images/butterfly.jpg" }); basemaps.push(waterBasemap); var publicSafetyLayer = new esri.dijit.BasemapLayer({ url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServer" }); var publicSafetyBasemap = new esri.dijit.Basemap({ layers: [publicSafetyLayer], title: "Public Safety", thumbnailUrl: "images/city.jpg" }); basemaps.push(publicSafetyBasemap); var basemapGallery = new esri.dijit.BasemapGallery({ showArcGISBasemaps: false, basemaps: basemaps, map: map }, "basemapGallery"); basemapGallery.startup(); dojo.connect(basemapGallery, "onError", function (error) { console.log(error); }); } dojo.ready(init); </script>
    
    </head>
    <body class="claro">
    	
    	<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">
    
    	 	<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    	  	</div>
    	
    	  	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" id="rightPane">
    	
    		    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
    		      	 <div id="paneHeader" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    		        	<span>Select Basemap</span>
    		      	</div>
    		      	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    		        	<div id="basemapGallery"></div>
    		      	</div>
    		    </div>
      		</div>
    	</div>
    </body>
    </html>

### 6、Editor 编辑器 ###

#### TemplatePicker ####

*  元素样式模板选择器

###### 构造函数 ######

new esri.dijit.editing.TemplatePicker(params,srcNodeRef)

###### 属性 ######

*  Grid：引用数据网格用于显示的模板
 *  Tooltip：显示标签信息

###### 方法 ######

*  attr(name,value?)：获取或设置模板的属性选择器
 *  clearSelection()：清除当前的选择
 *  destroy()：销毁 TemplatePicker
 *  getSelected()：获得用户的选择项
 *  startup()：完成创建部件
 *  update()：更新小部件属性

###### 事件 ######

*  selection-change：选择项发生改变的事件

#### Editor ####

*  包路径：`esri/dijit/editing/Editor`
 *  地图要素编辑器小部件提供了开箱即用的编辑功能，操作在可编辑的要素图层中

###### 构造函数 ######

new esri.toolbars.Edit(map, options?)
    new Editor(params, srcNodeRef)

###### 属性 ######

*  allowAddVertices：允许添加到顶点
 *  allowDeletevertices：用户是否可以删除顶点，有效的多段线，多边形和多点几何图形
 *  ghostLineSymbol：象征画线
 *  ghostVertexSymbol：画有效的多段线和多边形的几何图形的符号
 *  textSymbolEditorHolder：用户自定义的 HTML 元素的编辑器的文本符号
 *  uniformScaling：保留几何缩放大小
 *  vertexSymbol：顶点符号

###### 方法 ######

*  activate(tool, graphic, options?)：激活工具栏编辑的图形
 *  deactivate()：禁止使用
 *  getCurrentState()：描述一个对象的当前状态
 *  refresh()：工具栏刷新的状态

###### 事件 ######

*  load：加载事件
 *  activate：激活产生的事件
 *  deactivate：禁用产生的事件
 *  graphic-click：点击一个图形产生的事件
 *  graphic-first-move：用户第一次移动图形产生的事件
 *  graphic-move：不断移动图形产生的事件
 *  graphic-move-start：开始移动图形产生的事件
 *  graphic-move-stop：移动图形停止的时候产生的事件
 *  rotate：旋转的时候产生的事件
 *  rotate-first-move：第一次旋转移动的时候产生的事件
 *  rotate-start：旋转开始的时候产生的事件
 *  rotate-stop：旋转结束的时候产生的事件
 *  scale：图形被缩放的时候产生的事件
 *  scale-first-move：图形第一次被缩放移动的时候产生的事件
 *  scale-start：缩放开始的时候产生的事件
 *  scale-stop：缩放结束的时候产生的事件
 *  vertex-add：添加顶点的时候产生的事件
 *  vertex-click：顶点被单击的时候产生的事件
 *  vertex-delete：顶点被删除的时候产生的事件
 *  vertex-first-move：顶点被第一次移动的时候产生的事件
 *  vertex-mouse-out：顶点鼠标放下的时候产生的事件
 *  vertex-mouse-over：顶点鼠标抬起的时候产生的事件
 *  vertex-move：顶点移动的时候产生的事件
 *  vertex-move-start：顶点移动开始的时候产生的事件
 *  vertex-move-stop：顶点移动停止的时候产生的事件

###### 常量 ######

*  EDIT\_TEXT：textSymbol 在编辑模式下，编辑文本内容
 *  EDIT\_VERTICES：编辑线，增加、更新、删除顶点
 *  MOVE：移动多边形，线段
 *  ROTATE：旋转
 *  SCALE：缩放一个图形
 *  CREATE\_TOOL\_ARROW：箭头工具
 *  CREATE\_TOOL\_AUTOCOMPLETE：自动完成多边形工具
 *  CREATE\_TOOL\_CIRCLE：圆形工具
 *  CREATE\_TOOL\_ELLIPSE：椭圆工具
 *  CREATE\_TOOL\_FREEHAND\_POLYGON：徒手多边形工具
 *  CREATE\_TOOL\_FREEHAND\_POLYLINE：徒手画多段线
 *  CREATE\_TOOL\_POLYGON：多边形工具
 *  CREATE\_TOOL\_POLYLINE：多段线工具
 *  CREATE\_TOOL\_RECTANGLE：矩形工具
 *  CREATE\_TOOL\_TRIANGLE：三角形工具

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Validate Attributes</title>
    
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/claro/claro.css" />
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
        <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
        <style> .dj_ie .infowindow .window .top .right .user .content { position: relative; } .dj_ie .simpleInfoWindow .content { position: relative; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } #leftPane { overflow: hidden; border: none; color: #5C832F; } #map { border: solid medium #382513; padding:0; } .esriAttributeInspector { atiLayerName: 'Building Details' } .templatePicker { border: none !important; } .templatePicker .grid .groupLabel { display: none; } </style>
    
        
        <script>var dojoConfig = { parseOnLoad: true };</script>
    
        <script> // require selection dijit dojo.require("esri.map"); dojo.require("esri.dijit.editing.Editor-all"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); var map; function init() { // 代理路径 esri.config.defaults.io.proxyUrl = "/proxy/"; // 创建自己的几何服务使用在您的应用程序。 esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); map = new esri.Map("map", { basemap: "topo", center: [-117.282, 34.289], zoom: 13, slider: false }); dojo.connect(map, "onLayersAddResult", initEditor); // 添加一个FeatureLayer var pointsOfInterest = new esri.layers.FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Notes/FeatureServer/0", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, outFields: ['*'] }); map.addLayers([pointsOfInterest]); } function initEditor(results) { var featureLayer = results[0].layer; var templatePicker = new esri.dijit.editing.TemplatePicker({ featureLayers: [featureLayer], rows: 'auto', groupingEnabled: false, columns: 1 }, 'editorDiv'); templatePicker.startup(); var layerInfos = [{ 'featureLayer': featureLayer, 'showAttachments': false, // 无附件 'showDeleteButton': false, // 无按钮 'fieldInfos': [ { 'fieldName': 'name', 'label': 'Name' }, { 'fieldName': 'email', 'label': 'Email' }, ] }]; // 定义编辑器设置 var settings = { map: map, templatePicker: templatePicker, layerInfos: layerInfos }; var params = { settings: settings }; // 创建Editor var editorWidget = new esri.dijit.editing.Editor(params); editorWidget.startup(); map.infoWindow.resize(295, 245); } dojo.ready(init); </script>
      </head>
      <body class="claro">    
        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar'" style="width:100%;height:100%;">
          <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
          <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" style="width:100px;" data-dojo-props="region:'left'">
            <div id="editorDiv"></div>
            <div></div>
          </div>
        </div>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Update Fire Perimeter</title>
        
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/claro/claro.css" />
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
        <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
        <style> html, body { height: 100%; width: 100%; margin: 0; } #map, #header { border: 1px solid #444; } #map { padding: 0; margin: 5px; } #header { height: 45px; margin: 5px 5px 0 5px; padding: 0.5em; font-family: sans-serif; font-weight: 500; color: #0f3b5f; font-size: 1.1em; } .dj_ie .infowindow .window .top .right .user .content { position: relative; } .dj_ie .simpleInfoWindow .content { position: relative; } </style>
    
        <script> var map; require([ "esri/map", "esri/toolbars/edit", "esri/layers/FeatureLayer", "esri/config", "dojo/_base/event", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( Map, Edit, FeatureLayer, esriConfig, event, parser, BorderContainer, ContentPane ) { parser.parse(); // refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/jshelp/ags_proxy.html esriConfig.defaults.io.proxyUrl = "/proxy/"; map = new Map("map", { basemap: "topo", center: [-117.72, 34.352], zoom: 11 }); map.on("layers-add-result", initEditing); var firePerimeterFL = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/2", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"], id: "firePerimeterFL" }); map.addLayers([firePerimeterFL]); function initEditing(evt) { var firePerimeterFL = map.getLayer("firePerimeterFL"); var editToolbar = new Edit(map); editToolbar.on("deactivate", function (evt) { if (evt.info.isModified) { firePerimeterFL.applyEdits(null, [evt.graphic], null);//应用编辑FeatureLayer，参数添加，更新，删除 } }); var editingEnabled = false; firePerimeterFL.on("dbl-click", function (evt) { event.stop(evt); if (editingEnabled === false) { editingEnabled = true; editToolbar.activate(Edit.EDIT_VERTICES, evt.graphic);//编辑多条线段，添加、删除、移动 } else { editToolbar.deactivate(); editingEnabled = false; } }); } }); </script>
      </head>
      <body class="claro"> 
        <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;" gutters="false">
          <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >
             <center> 放大和双击顶点编辑，再次双击结束编辑</center>
          </div>
          <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> </div>
        </div> 
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Default Editor</title>
    
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/claro/claro.css" />
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
        <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
        <style> html, body { height: 100%; width: 100%; margin: 0; } body { background-color: #fff; overflow: hidden; font-family: Helvetica, san-serif; } #templatePickerPane { width: 225px; overflow: hidden; } #panelHeader { background-color: #92A661; border-bottom: solid 1px #92A860; color: #FFF; font-size: 18px; height: 24px; line-height: 22px; margin: 0; overflow: hidden; padding: 10px 10px 10px 10px; } #map { margin-right: 5px; padding: 0; } .esriEditor .templatePicker { padding-bottom: 5px; padding-top: 5px; height: 500px; border-radius: 0px 0px 4px 4px; border: solid 1px #92A661; } .dj_ie .infowindow .window .top .right .user .content, .dj_ie .simpleInfoWindow .content { position: relative; } </style>
    
        <script> var map; require([ "esri/config", "esri/map", "esri/SnappingManager", "esri/dijit/editing/Editor", "esri/layers/FeatureLayer", "esri/tasks/GeometryService", "esri/toolbars/draw", "dojo/keys", "dojo/parser", "dojo/_base/array", "dojo/i18n!esri/nls/jsapi", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( esriConfig, Map, SnappingManager, Editor, FeatureLayer, GeometryService, Draw, keys, parser, arrayUtils, i18n, BorderContainer, ContentPane ) { parser.parse(); // 改变提示信息 i18n.toolbars.draw.start += "<br/>Press <b>CTRL</b> to enable snapping"; i18n.toolbars.draw.addPoint += "<br/>Press <b>CTRL</b> to enable snapping"; // 代理路径 esriConfig.defaults.io.proxyUrl = "/proxy/"; // 集合服务 esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); map = new Map("map", { basemap: "topo", center: [-77.036, 38.891], zoom: 16 }); map.on("layers-add-result", initEditing); var operationsPointLayer = new FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Energy/HSEC/FeatureServer/0", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); var operationsLineLayer = new FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Energy/HSEC/FeatureServer/1", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); var operationsPolygonLayer = new FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Energy/HSEC/FeatureServer/2", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); map.addLayers([ operationsPointLayer, operationsPolygonLayer, operationsLineLayer ]); map.infoWindow.resize(400, 300); function initEditing(event) { var featureLayerInfos = arrayUtils.map(event.layers, function (layer) { return { "featureLayer": layer.layer }; }); var settings = { map: map, layerInfos: featureLayerInfos }; var params = { settings: settings }; var editorWidget = new Editor(params, 'editorDiv'); editorWidget.startup(); } }); </script>
      </head>
      
      <body class="claro">
        <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
          <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
          <div data-dojo-type="dijit/layout/ContentPane" id="templatePickerPane" data-dojo-props="region:'left'">
            <div id="panelHeader">
              Default Editor
            </div>
            <div style="padding:10px;" id="editorDiv"></div>
          </div>
        </div>
      </body>
    
    </html>

### 7、Geometry ###

*  几何对象的基类，这个类没有构造函数

#### Point ####

*  Point 是一个地图坐标单位，一个位置定义的 X 和 Y 坐标

###### 构造函数1： ######

new Point(x, y, spatialReference)
    
    new Point(-118.15, 33.80, new SpatialReference({    wkid: 4326 }));

###### 构造函数2： ######

new Point(coords, spatialReference)
    
    var point = new Point([-122.65,45.53],new SpatialReference({  wkid:4326 }));

*  使用一个数组，其中包含一个 x, y 坐标和空间参考值

###### 构造函数3： ######

new Point(json)					// 参数是一个 JSON 对象
    
    var point = new Point( { "x": -122.65, "y": 45.53, "spatialReference": { "wkid": 4326 } });

###### 构造函数4： ######

new Point(long, lat)
    
    var point = new Point(-98, 38);

###### 构造函数5： ######

new Point(point)
    
    var point = new Point([-98, 38]);
    var point = new Point({ 
    	latitude: 38,
    	longitude: -98
    });

###### Point 属性 ######

*  spatialReference：空间参考（空间参考描述了一个地物在地球上的真实位置）
 *  type：几何图形的类型
 *  X：经度
 *  Y：纬度

###### Point 方法 ######

*  getLatitude()：返回的纬度坐标
 *  getLongitude()：返回的经度坐标
 *  normalize()：变化的 x 坐标在 + / - 180
 *  offset(dx, dy)：点的 x 和 y 方向偏移
 *  setLatitude(lat)：设置纬度坐标
 *  setLongitude(lon)：设置经度坐标
 *  setSpatialReference(sr)：设置空间参考
 *  setX(x)：点的 x 坐标
 *  setY(y)：点的 y 坐标
 *  toJson()：转换为 JSON 对象
 *  update(x, y)：更新 x, y 坐标

#### Polyline ####

*  多段线

###### 构造函数1： ######

new Polyline(spatialReference)
    
    new Polyline(new SpatialReference({ wkid:4326}));

###### 构造函数2： ######

new Polyline(json)
    
    var polylineJson = { 
    	"paths":[
    		[
    			[-122.68,45.53], [-122.58,45.55],
    			[-122.57,45.58],[-122.53,45.6]
    		]
    	],
    	"spatialReference": { "wkid":4326}
    };
    var polyline = new Polyline(polylineJson);

###### 构造函数3： ######

new Polyline(coordinates)
    
    var singlePathPolyline = new Polyline([[-50, 0], [-120, -20], [-130, 0]]);

###### Polyline 属性 ######

*  paths：路径数组
 *  spatialReference：空间参考
 *  type：几何类型

###### Polyline 方法 ######

*  addPath(path)：添加一个路径折线
 *  getExtent()：获取折线范围
 *  getPoint(pathIndex, pointIndex)：返回一个指定的点
 *  insertPoint(pathIndex, pointIndex, point)：在折线上插入一个点
 *  removePath(pathIndex)：移除一条折线
 *  removePoint(pathIndex, pointIndex)：删除给定多段线内的点
 *  setPoint(pathIndex, pointIndex, point)：修改一条线上的点
 *  toJson()：转换为JSON对象

#### Polygon ####

*  多边形

###### 构造函数1： ######

new Polygon(spatialReference)
    
    var poly = new Polygon(new SpatialReference({ wkid:4326}));

###### 构造函数2： ######

new Polygon(json)
    
    var polygonJson  = { 
    	"rings":[
    		[
    			[-122.63,45.52],[-122.57,45.53],	
    			[-122.52,45.50],[-122.49,45.48],
    			[-122.64,45.49],[-122.63,45.52],	
    			[-122.63,45.52]
    		]
    	],
    	"spatialReference": { "wkid":4326 }};
    
    var polygon = new Polygon(polygonJson);

###### 构造函数3： ######

new Polygon(coordinates)
    
    var singleRingPolygon = new Polygon([
    	[50, 0], [150, 20], [150, -20], [50,0]
    ]);

###### Polygon 属性 ######

*  rings：一个数组的环，每个环是由三个或三个以上的点组成的
 *  spatialReference：空间参考
 *  type：几何类型

###### Polygon 方法 ######

*  addRing(ring)：添加一个多边形环
 *  contains(point)：判断指定的点是否在多边形内
 *  fromExtent(extent)：返回一个新的多边形环
 *  getCentroid()：返回多边形的中心点
 *  getExtent()：返回多边形的范围
 *  getPoint(ringIndex, pointIndex)：返回一个指定的点
 *  insertPoint(ringIndex, pointIndex, point)：插入指定点
 *  isClockwise(ring)：判断是否一个多边形环是顺时针方向
 *  removePoint(ringIndex, pointIndex)：移除指定的点
 *  setPoint(ringIndex, pointIndex, point)：修改指定的点
 *  setSpatialReference(sr)：设置空间参考
 *  toJson()：转换为 JSON 对象

示例代码：

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width,user-scalable=no">
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>地图绘图控件</title>
        
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/jsapi_vsdoc12_v38.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
        <style> html, body, #mainWindow { font-family: sans-serif; height: 100%; width: 100%; } html, body { margin: 0; padding: 0; } #header { height: 80px; overflow: auto; padding: 0.5em; } </style>
        
        <script> var map, toolbar, symbol, geomTask; require([ "esri/map", "esri/toolbars/draw", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Point", "esri/SpatialReference", "esri/Color", "esri/InfoTemplate", "esri/graphic", "dojo/dom", "dojo/parser", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!" ], function ( Map, Draw, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Point, SpatialReference, Color, InfoTemplate, Graphic, dom, parser, registry, BorderContainer, ContentPane, Button, WidgetSet ) { parser.parse(); map = new esri.Map("arcgisDiv"); var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/sd/MapServer"); map.addLayer(myTiledMapServiceLayer); map.setZoom(4); // 地图加载创建绘图工具对象 map.on("load", createToolbar); var btzdj = dojo.byId("btzdj"); var btzdjxd = dojo.byId("btzdjxd"); var btzdjdbx = dojo.byId("btzdjdbx"); // 自定义点 dojo.connect(btzdj,"click", function (evt) { var point = new esri.geometry.Point(503111.27809328993, 4054397.1343264896, new esri.SpatialReference({ wkid: 4326 })); var infoTemplate = new esri.InfoTemplate("<a href='javascript:showDetail()'>查看详情</a>"); var symbol = new esri.symbol.PictureMarkerSymbol("images/city.jpg", 25, 25); var graphic = new esri.Graphic(point, symbol, null, infoTemplate); map.graphics.add(graphic); }); // 自定义线 dojo.connect(btzdjxd, "click", function (evt) { var polylineJson = { "paths": [ [ [503111.27809328993, 4054397.1343264896], [503000.27809328993, 40543222.1343264896], [5031222.27809328993, 405439333.1343264896], [5031122.27809328993, 4054327.1343264896] ] ], "spatialReference": { "wkid": 4326 } }; var polyline = new esri.geometry.Polyline(polylineJson); // var point = new esri.geometry.Point(503111.27809328993, 4054397.1343264896, new esri.SpatialReference({ wkid: 4326 })); var infoTemplate = new esri.InfoTemplate("<a href='javascript:showDetail()'>查看详情</a>"); var symbol = new SimpleLineSymbol(); var graphic = new esri.Graphic(polyline, symbol, null, infoTemplate); map.graphics.add(graphic); }); // 自定义面 dojo.connect(btzdjdbx, "click", function (evt) { var triangle = new esri.geometry.Polygon({ "rings": [ [ [503111.27809328993, 4054397.1343264896], [4304933, 12292541], [6183449, 8535508], [2426417, 8535508] ] ], "spatialReference": { "wkid": 102100 } }); var polygonSymbol = new SimpleFillSymbol(); map.graphics.add(new Graphic(triangle, polygonSymbol)); }); // 遍历所有dijit,连接onClick事件 // 为按钮来激活绘图工具 registry.forEach(function (d) { // d 是引用的 dijit // 可能是一个布局容器或一个按钮 if (d.declaredClass === "dijit.form.Button") { //判断是不是按钮 d.on("click", activateTool); } }); function activateTool() { var tool = this.label.toUpperCase().replace(" ", "_");//转换为大写 // alert(tool); toolbar.activate(Draw[tool]);//执行绘图 map.hideZoomSlider(); } function createToolbar(themap) { toolbar = new Draw(map); toolbar.on("draw-end", addToMap); } function addToMap(evt) { var symbol; toolbar.deactivate(); // 使对象无效 map.showZoomSlider(); // 地图放大缩小标尺显示 switch (evt.geometry.type) { case "point": case "multipoint": symbol = new SimpleMarkerSymbol(); break; case "polyline": symbol = new SimpleLineSymbol(); break; default: symbol = new SimpleFillSymbol(); break; } var graphic = new Graphic(evt.geometry, symbol); map.graphics.add(graphic); } }); </script>
      </head>
      <body class="nihilo">
          <button id="btzdj">自定义添加点</button>
          <button id="btzdjxd">自定义添加线段</button>
          <button id="btzdjdbx">自定义添加多边型</button>
    
    	  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
    	    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
    	      <span>Draw:<br /></span>
    	      <button data-dojo-type="dijit/form/Button">Point</button>
    	      <button data-dojo-type="dijit/form/Button">Multi Point</button>
    	      <button data-dojo-type="dijit/form/Button">Line</button>
    	      <button data-dojo-type="dijit/form/Button">Polyline</button>
    	      <button data-dojo-type="dijit/form/Button">Polygon</button>
    	      <button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
    	      <button data-dojo-type="dijit/form/Button">Freehand Polygon</button>
    	      
    	      <button data-dojo-type="dijit/form/Button">Arrow</button>
    	      <button data-dojo-type="dijit/form/Button">Triangle</button>
    	      <button data-dojo-type="dijit/form/Button">Circle</button>
    	      <button data-dojo-type="dijit/form/Button">Ellipse</button>	
    	    </div>
    	    
    	    <div id="arcgisDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
    	        
    	  </div>
      </body>
    </html>

#### Circle ####

*  圆形类

###### 构造函数1： ######

new Circle(center, options?)

###### 构造函数2： ######

new Circle(params)

###### Circle 属性 ######

*  center：圆的中心点
 *  radius：半径
 *  radiusUnit：半径单位
 *  rings：数组的坐标值构成圆环
 *  spatialReference：空间参考
 *  type：几何类型

###### Circle 方法 ######

*  addRing(ring)：添加一个多边形环
 *  contains(point)：指定的点是否在范围内
 *  fromExtent(extent)：根据范围返回一个几何图形
 *  getCentroid()：返回定义多边形的中心点
 *  getExtent()：返回范围
 *  getPoint(ringIndex, pointIndex)：获取指定索引的点
 *  insertPoint(ringIndex, pointIndex, point)：插入点
 *  isClockwise(ring)：判断环是否为顺时针方向
 *  removePoint(ringIndex, pointIndex)：移除点
 *  removeRing(ringIndex)：移除环
 *  setPoint(ringIndex, pointIndex, point)：把一个点添加到圆环中
 *  toJson()：转换为 JSON

#### Extent ####

*  范围

###### 构造函数： ######

new Extent(xmin, ymin, xmax, ymax, spatialReference)

###### Extent 属性 ######

*  spatialReference：空间参考
 *  type：几何类型
 *  Xmax：最大X坐标范围
 *  Xmin：最小X坐标范围
 *  Ymax：最大Y坐标范围
 *  Ymin：最小Y坐标范围

###### Extent 方法 ######

*  centerAt(point)：设置中心点
 *  contains(geometry)：判断几何对象是否在范围内
 *  getCenter()：获得中心点
 *  getHeight()：获得高度
 *  getWidth()：获得宽度
 *  intersects(geometry)：获取相交的范围
 *  update(xmin, ymin, xmax, ymax, spatialReference)：更新范围

#### ScreenPoint ####

*  屏幕坐标对象

###### 构造函数： ######

new ScreenPoint(x, y)

###### ScreenPoint 方法 ######

*  setX(x)
 *  setY(y)
 *  update(x, y)

### 8、符号渲染 ###

#### Renderer ####

*  渲染器的基类，没有构造函数

###### Renderer 属性 ######

*  colorInfo：为图层元素定义颜色信息
 *  opacityInfo：图层元素透明度
 *  rotationInfo：定义旋转符号标志

###### Renderer 方法 ######

*  getColor(graphic)：获取图形颜色
 *  getOpacity(graphic)：获取图像透明度
 *  getRotationAngle(graphic)：获取图形旋转角度
 *  getSize(graphic)：返回图形符号的大小（以像素为单位）
 *  getSymbol(graphic)：得到图形的样式
 *  setColorInfo(info)：设置颜色信息
 *  setOpacityInfo(info)：设置透明度信息
 *  setRotationInfo(info)：设置旋转信息
 *  setSizeInfo()：设置符号大小
 *  toJson()：转换为 JSON 对象

#### ClassBreaksRenderer ####

*  基于某些属性值的类渲染器

###### 构造函数1： ######

new ClassBreaksRenderer(defaultSymbol, attributeField)

###### 构造函数2： ######

new ClassBreaksRenderer(json)

###### ClassBreaksRenderer 属性 ######

*  attributeField：属性字段
 *  backgroundFillSymbol：背景填充样式
 *  classificationMethod：用于生成类，分类方法
 *  colorInfo：颜色信息
 *  defaultSymbol：默认样式
 *  Infos：提供了信息类、渲染信息的数组
 *  isMaxInclusive：是否最大值
 *  normalizationField：规范化字段名称
 *  normalizationTotal：总体规范
 *  normalizationType：规范类型
 *  opacityInfo：透明度信息
 *  rotationInfo：旋转信息
 *  sizeInfo：大小信息

###### ClassBreaksRenderer 方法 ######

*  addBreak(minValueOrInfo, maxValue?, symbol?)：添加一个渲染器
 *  clearBreaks()：清除所有渲染器
 *  getBreakIndex(graphic)：获取图形索引
 *  getBreakInfo(graphic)：返回渲染信息
 *  getColor(graphic)：返回图形颜色
 *  getOpacity(graphic)：返回图形透明度
 *  getRotationAngle(graphic)：返回图形旋转角度
 *  getSize(graphic)：返回图形大小，单位为像素
 *  getSymbol(graphic)：返回样式
 *  removeBreak(minValue, maxValue)：删除渲染
 *  setOpacityInfo(info)：设置透明度信息
 *  setRotationInfo(info)：设置旋转信息
 *  setSizeInfo()：设置符号大小
 *  toJson()：转换为JSON对象

#### DotDensityRenderer ####

*  可视化的数据点密度渲染器

###### 构造函数： ######

new DotDensityRenderer(params)

###### DotDensityRenderer 属性 ######

*  backgroundColor：背景颜色
 *  colorInfo：颜色信息
 *  dotShape：用于渲染点
 *  dotSize：点的大小（以像素为单位）
 *  dotValue：点的像素值
 *  fields：字段数组
 *  opacityInfo：透明度信息
 *  outline：轮廓线特性
 *  rotationInfo：旋转信息
 *  sizeInfo：符号大小

###### DotDensityRenderer 方法 ######

*  getColor(graphic)：获取颜色
 *  getOpacity(graphic)：获取透明度
 *  getRotationAngle(graphic)：获取旋转角度
 *  getSize(graphic)：获取符号大小
 *  getSymbol(graphic)：获取样式
 *  setBackgroundColor(color)：获取背景色
 *  setColorInfo(info)：获取颜色信息
 *  setDotSize(size)：获取点大小
 *  setDotValue(value)：设置点的值
 *  setOpacityInfo(info)：设置透明度
 *  setOutline(outline)：设置轮廓线
 *  setRotationInfo(info)：设置旋转信息
 *  setSizeInfo()：设置符号信息
 *  toJson()：转换为 JSON 对象

#### ScaleDependentRenderer ####

*  具有使用多个渲染器的能力

###### 构造函数： ######

new ScaleDependentRenderer(options?)

###### ScaleDependentRenderer 属性 ######

*  rendererInfos：渲染器信息
 *  其他属性跟 renderer 基类一样

###### ScaleDependentRenderer 方法 ######

*  getRenderInfoByZoom(zoom)：返回缩放级别
 *  getRendererInfo(graphic)：返回图形渲染信息
 *  getRendererInfoByScale(scale)：返回指定的渲染器的信息
 *  其他方法继承于Renderer基类

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
        <title>Dot density renderer</title>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/jsapi_vsdoc12_v38.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
        <style> html, body, #map { height: 100%; margin: 0; } #info { position: absolute; right: 0; top: 0; padding: 1em 1em 0 1em; background: #fff; font: 14px sans-serif; width: 200px; text-align: center; border-radius: 0 0 0 10px; } </style>
     
        <script> var map; require([ "esri/map", "esri/geometry/Extent", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/renderers/DotDensityRenderer", "esri/renderers/ScaleDependentRenderer", "esri/dijit/Legend", "esri/Color", "dojo/_base/array", "dojo/dom", "dojo/domReady!" ], function ( Map, Extent, ArcGISTiledMapServiceLayer, FeatureLayer, InfoTemplate, DotDensityRenderer, ScaleDependentRenderer, Legend, Color, array, dom ) { map = new Map("map", { extent: new Extent({ "xmin": -2460944, "ymin": -1389910, "xmax": 2297115, "ymax": 1643787, "spatialReference": { "wkid": 102003 } }), maxScale: 5000000, minScale: 20000000 }); var basemap = new ArcGISTiledMapServiceLayer("http://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/Dark_Gray_Albers_North_America_Base/MapServer"); map.addLayer(basemap); var layer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0", { outFields: ["STATE", "COUNTY", "M163_07"], infoTemplate: new InfoTemplate("${COUNTY}, ${STATE}", "Corn Planted: ${M163_07:NumberFormat} Acres") }); // 设置图层筛选表达式 layer.setDefinitionExpression("M163_07>10000"); layer.on("load", function (e) { array.forEach(e.layer.fields, function (field) { if (field.alias === "M163_07") { field.alias = "Acres of Corn"; } }); }); // 定义多个选取使用对象 var renderer = new ScaleDependentRenderer({ rendererInfos: [{ // 定义点密度渲染器 renderer: new DotDensityRenderer({ fields: [{ name: "M163_07", color: new Color("#CC8890") }], dotValue: 3200, dotSize: 10 }), maxScale: 17000000, minScale: 20000001 }, { renderer: new DotDensityRenderer({ fields: [{ name: "M163_07", color: new Color("#CC8500") }], dotValue: 1600, dotSize: 10 }), maxScale: 8500000, minScale: 17000000 }, { renderer: new DotDensityRenderer({ fields: [{ name: "M163_07", color: new Color("#CC4800") }], dotValue: 800, dotSize: 10 }), maxScale: 5000000, minScale: 8500000 }] }); layer.setRenderer(renderer); map.addLayers([layer]); var refLayer = new ArcGISTiledMapServiceLayer("http://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/Dark_Gray_Albers_North_America_Reference/MapServer"); map.addLayer(refLayer); map.on("layers-add-result", function (e) { var corn = e.layers[0].layer; var legend = new Legend({ //专题 map: map, layerInfos: [{ layer: corn, title: "US Corn Production (2007)" }] }, "legend"); legend.startup(); }); }); </script>
      </head>
      <body>
        <div id="map"></div>
        <div id="info">
          <div id="legend"></div>
        </div>
      </body>
    </html>

#### HeatmapRenderer ####

*  这个渲染器使用高斯模糊技术，在可视化强调更高密度的区域， 呈现点数据到一个光栅

###### 构造函数： ######

new HeatmapRenderer(options)

###### HeatmapRenderer 属性 ######

*  blurRadius：圆的模糊半径（单位为像素）
 *  colorStops：颜色数组
 *  colors：字符串数组的 CSS 颜色
 *  field：属性的名称字段，用于热图点
 *  maxPixelIntensity：最大渐变颜色
 *  minPixelIntensity：最小渐变颜色

###### HeatmapRenderer 方法 ######

*  setBlurRadius(blurRadius)：设置渲染器的模糊半径
 *  setColorStops(stops)：设置colorStops属性，并返回
 *  setColors(colors)：设置颜色用于插入颜色渲染器
 *  setField(field)：设置渲染器使用的属性字段
 *  setMaxPixelIntensity(maxPixelIntensity)：设置渲染器的最大颜色渐变
 *  setMinPixelIntensity(minPixelIntensity)：设置渲染器的最小颜色渐变
 *  toJson()：转换为JSON对象

#### SimpleRenderer ####

*  符号渲染器

###### 构造函数1： ######

new SimpleRenderer(symbol)

###### 构造函数2： ######

new SimpleRenderer(json)

###### SimpleRenderer 属性 ######

*  Description：渲染器的描述
 *  label：渲染器的标签
 *  symbol：渲染器的符号
 *  其他属性继承自 Renderer

###### SimpleRenderer 方法 ######

*  getSymbol(graphic)：获得图形的样式
 *  其他方法继承自 Renderer

#### UniqueValueRenderer ####

*  图形属性的唯一值渲染器，为每一个值添加渲染

###### 构造函数1： ######

new UniqueValueRenderer(defaultSymbol, attributeField, attributeField2?, attributeField3?, fieldDelimeter?)

###### 构造函数2： ######

new UniqueValueRenderer(json)

###### UniqueValueRenderer 属性 ######

*  attributeField
 *  attributeField2
 *  attributeField3
 *  defaultLabel：默认标题
 *  defaultSymbol：默认样式
 *  fieldDelimiter：字符串之间插入多个属性字段的值
 *  infos：信息数字
 *  opacityInfo：透明度信息
 *  rotationInfo：角度信息
 *  sizeInfo：符号大小信息

###### UniqueValueRenderer 方法 ######

*  addValue(valueOrInfo, symbol?)：添加渲染器
 *  getColor(graphic)：获取图形颜色
 *  getOpacity(graphic)：获取图形透明度
 *  getRotationAngle(graphic)：获取旋转角度
 *  getSize(graphic)：获取图形字符大小
 *  getSymbol(graphic)：获取图形样式
 *  getUniqueValueInfo(graphic)：获取图形渲染器
 *  removeValue(value)：删除值
 *  setColorInfo(info)：设置颜色信息
 *  setOpacityInfo(info)：设置透明度信息
 *  setRotationInfo(info)：设置旋转信息
 *  setSizeInfo()：设置符号大小信息
 *  toJson()：转换为JSON对象

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Unique Value Renderer</title>
         <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/jsapi_vsdoc12_v38.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
        <style> html, body, #map{ height: 100%; margin: 0; padding: 0; } </style>
        <script> var map; require([ "esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/UniqueValueRenderer", "esri/Color", "dojo/domReady!" ], function ( Map, FeatureLayer, InfoTemplate, SimpleLineSymbol, SimpleFillSymbol, UniqueValueRenderer, Color ) { map = new Map("map", { basemap: "streets", center: [-95.625, 39.243], zoom: 4, slider: false }); map.on("load", addFeatureLayer); function addFeatureLayer() { var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL); defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL); // create renderer var renderer = new UniqueValueRenderer(defaultSymbol, "SUB_REGION"); // 为每个值添加符号 renderer.addValue("Pacific", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]))); renderer.addValue("Mtn", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]))); renderer.addValue("N Eng", new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]))); renderer.addValue("S Atl", new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]))); renderer.addValue("Mid Atl", new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.75]))); renderer.addValue("E N Cen", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.5]))); renderer.addValue("W N Cen", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]))); renderer.addValue("E S Cen", new SimpleFillSymbol().setColor(new Color([127, 127, 127, 0.5]))); renderer.addValue("W S Cen", new SimpleFillSymbol().setColor(new Color([0, 0, 0, 0.5]))); var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1", { infoTemplate: new InfoTemplate(" ", "${SUB_REGION}"), mode: FeatureLayer.MODE_ONDEMAND, outFields: ["SUB_REGION"] }); featureLayer.setRenderer(renderer); map.addLayer(featureLayer); } }); </script>
      </head>
      
      <body>
        <div id="map"></div>
      </body>
    
    </html>

<!DOCTYPE html>
    <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>FeatureLayer using HeatmapRenderer</title>
      <link rel="stylesheet" href="//js.arcgis.com/3.14/dijit/themes/claro/claro.css">
      <link rel="stylesheet" href="//js.arcgis.com/3.14/esri/css/esri.css">
      <style> html, body, #map { width: 100%; height: 100%; margin: 0; padding: 0; } </style>
      <script src="//js.arcgis.com/3.14/"></script>
      <script> var map; require([ "esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/map", "esri/renderers/HeatmapRenderer", "dojo/domReady!" ], function ( InfoTemplate, FeatureLayer, Map, HeatmapRenderer) { // -------------------------------------------------------------------- // 格式化InfoWindow属性值的功能 // infowindow可读的东西 // -------------------------------------------------------------------- formatFatalities = function (value, key, data) { var result = value > 1 ? value + " people " : value + " person "; return result; } formatGender = function (value, key, data) { var lookup = { 1: "male", 2: "female", 8: "unknown", 9: "unknown" }; return lookup[value]; } formatConditions = function (value, key, data) { var lookup = { 0: "No Additional Atmospheric Conditions", 1: "Clear", 2: "Rain", 3: "Sleet, Hail (Freezing Rain or Drizzle)", 4: "Snow", 5: "Fog, Smog, Smoke", 6: "Severe Crosswinds", 7: "Blowing Sand, Soil, Dirt", 8: "Other", 10: "Cloudy", 11: "Blowing Snow", 98: "Not Reported", 99: "Unknown" }; if (value !== 1) { return "Road conditions: " + lookup[value] + "<br>"; } } formatWorkZone = function (value, key, data) { var lookup = { 0: "None", 1: "Construction", 2: "Maintenance", 3: "Utility", 4: "Work Zone, Type Unknown" }; if (value !== 0) { return "Work Zone: " + lookup[value] + "<br>"; } } formatAlcoholTestResults = function (value, key, data) { // -------------------------------------------------------------------- // 判断值得格式是否正确 // -------------------------------------------------------------------- var isMatch = value.match(/\b(?!9[5-9])[0-9][0-9]\b|\b[8-9]{1}\b/m); if (isMatch) { return "Driver was over the legal limit for alcohol"; } } map = new Map("map", { basemap: "gray", center: [-119.11, 36.65], zoom: 7, minZoom: 7, maxZoom: 9 }); var infoContentDesc = "<p>${numfatal:formatFatalities} died when a ${age} year old ${sex:formatGender} was involved in a fatal speeding accident.</p>"; var infoContentDetails = "${atmcond:formatConditions}${conszone:formatWorkZone}${alcres:formatAlcoholTestResults}"; var infoContent = infoContentDesc + infoContentDetails; var infoTemplate = new InfoTemplate("Accident details", infoContent); var serviceURL = "//services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/2012_CA_NHTSA/FeatureServer/0"; var heatmapFeatureLayerOptions = { mode: FeatureLayer.MODE_SNAPSHOT, infoTemplate: infoTemplate, outFields: [ "atmcond", "numfatal", "conszone", "age", "alcres", "sex" ] }; var heatmapFeatureLayer = new FeatureLayer(serviceURL, heatmapFeatureLayerOptions); var heatmapRenderer = new HeatmapRenderer(); heatmapFeatureLayer.setRenderer(heatmapRenderer); map.addLayer(heatmapFeatureLayer); }); </script>
      </head>
      <body>
        <div id="map"></div>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Feature Layer - display results as an InfoWindow onHover</title>
    
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/jsapi_vsdoc12_v38.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
        <style> html, body, #mapDiv { padding:0; margin:0; height:100%; } #mapDiv { position: relative; } #info { background: #fff; box-shadow: 0 0 5px #888; left: 1em; padding: 0.5em; position: absolute; top: 1em; z-index: 40; } </style>
    
        <script> var map, dialog; require([ "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang", "esri/Color", "dojo/number", "dojo/dom-style", "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!" ], function ( Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer, Graphic, esriLang, // 实用的方法处理字符串、数组和对象 Color, number, domStyle, TooltipDialog, dijitPopup // 一个 InfoWindow的继承类，InfoWindowBase提供额外的功能 ) { map = new Map("mapDiv", { basemap: "streets", center: [-80.94, 33.646], zoom: 8, slider: false }); var southCarolinaCounties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", { mode: FeatureLayer.MODE_SNAPSHOT, outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"] }); southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'"); var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 255, 0.35]), 1 ), new Color([125, 125, 125, 0.35]) ); southCarolinaCounties.setRenderer(new SimpleRenderer(symbol)); map.addLayer(southCarolinaCounties); map.infoWindow.resize(245, 125); dialog = new TooltipDialog({ id: "tooltipDialog", style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100" }); dialog.startup(); var highlightSymbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 3 ), new Color([125, 125, 125, 0.35]) ); // 鼠标离开的时候关闭对话框 map.on("load", function () { map.graphics.enableMouseEvents(); map.graphics.on("mouse-out", closeDialog); }); southCarolinaCounties.on("mouse-over", function (evt) { var t = "<b>${NAME}</b><hr><b>2000 Population: </b>${POP2000:NumberFormat}<br>" + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br>" + "<b>2007 Population: </b>${POP2007:NumberFormat}<br>" + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}"; var content = esriLang.substitute(evt.graphic.attributes, t);//可以处理通配符替换 var highlightGraphic = new Graphic(evt.graphic.geometry, highlightSymbol); map.graphics.add(highlightGraphic); dialog.setContent(content); domStyle.set(dialog.domNode, "opacity", 0.85); dijitPopup.open({ popup: dialog, x: evt.pageX, y: evt.pageY }); }); function closeDialog() { map.graphics.clear(); dijitPopup.close(dialog); } }); </script>
      </head>
      <body class="tundra">
        <div id="mapDiv">
          <div id="info">
            Hover over a county in South Carolina to get more information.
          </div>
        </div>
      </body>
    </html>

### 9、Symbol 样式符号 ###

*  Symbol 用来显示点、线和多边形图形层

###### 属性 ######

*  color：颜色
 *  type：类型

###### 方法 ######

*  setColor(color)：设置颜色
 *  toJson()：转换为 JSON 对象

#### FillSymbol ####

*  填充符号，是用来绘制多边形图形层特性

###### 属性 ######

*  outline：多边形的轮廓
 *  其他属性继承自 Symbol

###### 方法 ######

*  setOutline(outline)：设置多边形轮廓
 *  其他方法继承自 Symbol

#### LineSymbol ####

*  线符号，用来绘制图层线性特性

###### 属性 ######

*  width：线的宽度
 *  其他属性继承自 Symbol

###### 方法 ######

*  setWidth(width)：设置线的宽度
 *  其他方法继承自 Symbol

#### MarkerSymbol ####

*  标记符号，是用来画点和测点的图形层

###### 属性 ######

*  angle：标记的角度
 *  color：符号颜色
 *  size：符号大小
 *  type：符号类型
 *  xoffset：x 轴的偏移量，单位像素
 *  yoffset：y轴的偏移量，单位像素

###### 方法 ######

*  setAngle(angle)：顺时针旋转，符号围绕其中心指定的角
 *  setColor(color)：设置颜色
 *  setOffset(x, y)：设置偏移
 *  setSize(size)：设置大小
 *  toJson()：转换为 Json 对象

#### PictureFillSymbol ####

*  使用一个图像填充多边形符号，用来绘制多边形图层特性

###### 构造函数1： ######

new PictureFillSymbol(url, outline, width, height)

###### 构造函数2： ######

new PictureFillSymbol(json)

###### 属性 ######

*  color：颜色
 *  height：高度
 *  outline：多边形的轮廓
 *  type：类型
 *  url：图片路径
 *  width：宽度
 *  xoffset：x偏移量
 *  xscale：在x方向比例因子
 *  yoffset：y偏移量
 *  yscale：在y方向的比例因子

###### 方法 ######

*  setColor(color)：设置颜色
 *  setHeight(height)：设置高度
 *  setOffset(x, y)：设置偏移量
 *  setOutline(outline)：设置线轮廓
 *  setUrl(url)：设置图片地址
 *  setWidth(width)：设置宽度
 *  setXScale(scale)：设置x方向比例因子
 *  setYScale(scale)：设置y方向比例因子
 *  toJson()：转换为Json对象

#### PictureMarkerSymbol ####

*  图片标记符号，是用来画点和测点的图形符号

###### 构造函数1： ######

new PictureMarkerSymbol(url, width, height)

###### 构造函数2： ######

new PictureMarkerSymbol(json)

###### 属性 ######

*  angle：标记的角度
 *  color：颜色
 *  height：高度
 *  size：大小
 *  type：类型
 *  url：图片路径
 *  width：宽度
 *  xoffset：x偏移量
 *  yoffset：y偏移量

###### 方法 ######

*  setAngle(angle)：设置角度
 *  setColor(color)：设置颜色
 *  setHeight(height)：设置高度
 *  setOffset(x, y)：设置偏移量
 *  setSize(size)：设置大小
 *  setUrl(url)：设置图片路径
 *  setWidth(width)：设置宽度
 *  toJson()：转换为JSON对象

#### SimpleFillSymbol ####

*  填充符号用来绘制多边形图层，拥有透明和交叉两种模式

###### 构造函数 ######

new SimpleFillSymbol()
    new SimpleFillSymbol(style, outline, color)
    new SimpleFillSymbol(json)

###### 属性 ######

*  color：颜色
 *  outline：轮廓
 *  style：样式
 *  type：类型

###### 方法 ######

*  setColor(color)：设置颜色
 *  setOutline(outline)：设置轮廓线
 *  setStyle(style)：设置样式
 *  toJson()：转换为Json对象

#### SimpleLineSymbol ####

*  线符号是用来绘制图层线性特性，SimpleLineSymbol可以是实线、破折号或点。

###### 构造函数： ######

new SimpleLineSymbol()
    new SimpleLineSymbol(style, color, width)
    new SimpleLineSymbol(json)

###### 属性 ######

*  color：颜色
 *  style：样式
 *  type：类型
 *  width：宽度

###### 方法 ######

*  setColor(color)：设置颜色
 *  setStyle(style)：设置样式
 *  setWidth(width)：设置宽度
 *  toJson() ：转换为 JSON 对象

#### SimpleMarkerSymbol ####

*  标记符号是用来画点和测点的图形层。SimpleMarkerSymbol用于显示点作为一个简单的形状

###### 构造函数 ######

new SimpleMarkerSymbol()
    new SimpleMarkerSymbol(style, size, outline, color)
    new SimpleMarkerSymbol(json)

###### 属性 ######

*  angle：角度
 *  color：颜色
 *  outline：轮廓
 *  size：大小
 *  style：样式
 *  type：类型
 *  xoffset：x偏移量
 *  yoffset：y偏移量

###### 方法 ######

*  setAngle(angle)：设置角度
 *  setColor(color)：设置颜色
 *  setOffset(x, y)：设置偏移量
 *  setOutline(outline)：设置轮廓线
 *  setPath(path)：设置路径
 *  setSize(size)：设置大小
 *  setStyle(style)：设置样式
 *  toJson()：转换为json对象

#### TextSymbol ####

*  文字符号，用于在图形上添加文本图层

new TextSymbol(text)
    new TextSymbol(text, font, color)
    new TextSymbol(json)

###### 属性 ######

*  align：文本对齐的点
 *  angle：文本的角度
 *  color：颜色
 *  decoration：文本装饰
 *  font：字体
 *  horizontalAlignment：水平对齐文本
 *  kerning：决定是否调整间距字符在文本字符串
 *  rotated：决定是否旋转文本字符串中的每个字符
 *  text：文本字符串显示在图形层
 *  type：符号的类型
 *  verticalAlignment：垂直对齐文本
 *  xoffset：x偏移量
 *  yoffset：y偏移量

###### 方法 ######

*  setAlign(align)：设置文本的对齐
 *  setAngle(angle)：设置文本的角度
 *  setColor(color)：设置颜色
 *  setDecoration(decoration)：设置文本的装饰
 *  setFont(font)：设置字体
 *  setHorizontalAlignment(alignment)：更新文本的水平对齐的象征
 *  setKerning(kerning)：是否设置为文本字符串中的字符间距调整
 *  setOffset(x, y)：设置文本的x和y偏移
 *  setRotated(rotated)：设置文本字符串中的每个字符是否旋转
 *  setText(text)：设置文本字符串
 *  setVerticalAlignment(alignment)：更新文本的垂直对齐
 *  toJson()：转换为JSON对象

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Shapes and Symbols</title>
    
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
        <script type="text/javascript" src="http://localhost:3616/arcgisjs/jsapi_vsdoc12_v38.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
    
        <style> #info { top: 20px; color: #444; height: auto; font-family: arial; right: 20px; margin: 5px; padding: 10px; position: absolute; width: 115px; z-index: 40; border: solid 2px #666; border-radius: 4px; background-color: #fff; } html, body, #mapDiv { padding:0; margin:0; height:100%; } button { display: block; } </style>
    
        <script> var map, tb; require([ "esri/map", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/graphic", "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!" ], function ( Map, Draw, SimpleMarkerSymbol, SimpleLineSymbol, PictureFillSymbol, CartographicLineSymbol, Graphic, Color, dom, on ) { map = new Map("mapDiv", { basemap: "streets", center: [-25.312, 34.307], zoom: 3 }); map.on("load", initToolbar); var markerSymbol = new SimpleMarkerSymbol(); markerSymbol.setColor(new Color("#00FFFF")); // 用于徒手画的多段线、多线和线 var lineSymbol = new CartographicLineSymbol( //用来绘制图形层上线符号，,像simplelinesymbol，效果更立体 CartographicLineSymbol.STYLE_SOLID,//样式，颜色，宽度 new Color([255, 0, 0]), 10, CartographicLineSymbol.CAP_ROUND,//线是圆的，只是超出了终点。 CartographicLineSymbol.JOIN_MITER, 5 //连接线不是圆形或斜，加入衔接线的尺寸 ); var fillSymbol = new PictureFillSymbol( "images/mangrove.png", new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color('#000'), 1 ), 42, 42 ); function initToolbar() { tb = new Draw(map); // 画完之后执行 tb.on("draw-end", addGraphic); // 需要为每个单独的按钮绑定事件 on(dom.byId("info"), "click", function (evt) { if (evt.target.id === "info") { return; } var tool = evt.target.id.toLowerCase(); map.disableMapNavigation(); // 开始画图 tb.activate(tool); }); } function addGraphic(evt) { // 关闭工具栏和明确现有的图形 tb.deactivate(); map.enableMapNavigation(); // 找出哪些符号使用 var symbol; if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") { symbol = markerSymbol; } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") { symbol = lineSymbol; } else { symbol = fillSymbol; } map.graphics.add(new Graphic(evt.geometry, symbol)); } }); </script>
      </head>
      
      <body>    
        <div id="info">
          <div></div>
          <button id="Point">画点</button>
          <button id="Multipoint">多点</button>
          <button id="Line">线</button>
          <button id="Polyline">多段线</button>
          <button id="FreehandPolyline">徒手画线</button>
          <button id="Triangle">三角形</button>
          <button id="Extent">正方形</button>
          <button id="Circle">圆</button>
          <button id="Ellipse">椭圆</button>
          <button id="Polygon">面</button>
          <button id="FreehandPolygon">徒手画的多边形</button>
        </div>
        
        <div id="mapDiv"></div>
        
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>The CheckBox Tree with custom Icons</title>
         <style type="text/css"> @import "arcgisjs/js/dojo/dijit/themes/claro/claro.css"; @import "arcgisjs/js/dojo/dijit/themes/claro/document.css"; @import "arcgisjs/js/dojo/dijit/tests/css/dijitTests.css"; @import "arcgisjs/js/dojo/cbtree/themes/claro/claro.css"; @import "arcgisjs/js/dojo/cbtree/icons/networkIcons.css"; </style>
    
        <script type="text/javascript"> var dojoConfig = { async: true, parseOnLoad: true, isDebug: false, baseUrl: "arcgisjs/js/dojo", locale: 'en-us', packages: [ { name: "dojo", location: "dojo" }, { name: "dijit", location: "dijit" }, { name: "cbtree", location: "cbtree" } ] }; </script>
    
        <script type="text/javascript" src="arcgisjs/js/dojo/dojo/dojo.js"></script>
        <script type="text/javascript"> require([ "dojo/data/ItemFileWriteStore", "dojo/ready", "cbtree/Tree", // Checkbox Tree "cbtree/extensions/TreeStyling", // Tree styling extensions "cbtree/models/ForestStoreModel" // Forest Store Model ], function ( ItemFileWriteStore, ready, Tree, TreeStyling, ForestStoreModel ) { var data = { "identifier": "name", "label": "name", "items": [ { "name": "Africa", "type": "continent", "children": [ { "name": "Egypt", "type": "country" }, { "name": "Kenya", "type": "country", "children": [ { "name": "Nairobi", "type": "city" }, { "name": "Mombasa", "type": "city" }] }, { "name": "Sudan", "type": "country", "children": { "name": "Khartoum", "type": "city" } }] }, { "name": "Asia", "type": "continent", "children": [ { "name": "China", "type": "country" }, { "name": "India", "type": "country" }, { "name": "Russia", "type": "country" }, { "name": "Mongolia", "type": "country" }] }, { "name": "Australia", "type": "continent", "children": { "name": "Commonwealth of Australia", "type": "country" } }, { "name": "Europe", "type": "continent", "children": [ { "name": "Germany", "type": "country" }, { "name": "France", "type": "country" }, { "name": "Spain", "type": "country" }, { "name": "Italy", "type": "country" }] }, { "name": "North America", "type": "continent", "children": [ { "name": "Mexico", "type": "country", "children": [ { "name": "Mexico City", "type": "city" }, { "name": "Guadalajara", "type": "city" }] }, { "name": "Canada", "type": "country", "children": [ { "name": "Ottawa", "type": "city" }, { "name": "Toronto", "type": "city" }] }, { "name": "United States of America", "type": "country" }] }, { "name": "South America", "type": "continent", "children": [ { "name": "Brazil", "type": "country" }, { "name": "Argentina", "type": "country" }] } ] }; var store = new ItemFileWriteStore({ data: data }); var model = new ForestStoreModel({ store: store, query: { type: "country" }, rootLabel: "The Earth", checkedAll: true, checkedRoot: true }); ready(function () { var tree = new Tree({ model: model, id: "MenuTree", checkboxMultiState: true, icon: { iconClass: "networkIcon", indent: true }, branchIcons: true, nodeIcons: true }, "CheckboxTree"); tree.startup(); tree.connect(tree, 'onClick', clickTreeNode); function clickTreeNode(item/*点中节点对应的数据项*/, node/*点中的对象，这里node.item就是的第一个参数*/,evt/*事件*/) { alert(item.name); } }); }); </script>
      </head>
    
      <body class="claro">
        <h1 class="DemoTitle">The CheckBox Tree with Custom Icons</h1>
        <p>
          Demonstrate the tree styling API with custom icons.
        </p>
        <div id="CheckboxTree"></div>
      </body>
    </html>