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

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"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><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"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><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"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><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 = [];// 创建BasemapLayervar waterTemplateLayer = new esri.dijit.BasemapLayer({url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastructureBasemap/MapServer"});// 创建Basemapvar 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"><!--[if IE 7]><style>html, body {margin: 0;}</style><![endif]--><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"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><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><!-- specify dojo configuration to parse dijits at load time --><script>var dojoConfig = { parseOnLoad: true };</script><script>// require selection dijitdojo.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);// 添加一个FeatureLayervar 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 };// 创建Editorvar 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"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><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.htmlesriConfig.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"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><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><!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol--><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)

<!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></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%; width: 100%; margin: 0; padding: 0; }#controls {background: #fff;box-shadow: 0 6px 6px -6px #999;color: #444;font-family: sans-serif;height: auto;left: 1em;padding: 1em;position: absolute;top: 1em;width: auto;z-index: 40;}#controls div {padding: 0 0 1em 0;}</style><script>var map;require(["esri/map", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol","esri/graphic", "esri/layers/GraphicsLayer","dojo/dom", "dojo/dom-attr", "dojo/domReady!"], function (Map, Circle, SimpleFillSymbol,Graphic, GraphicsLayer,dom, domAttr) {map = new Map("map", {basemap: "streets",center: [-120.741, 56.39],slider: false,zoom: 6});var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("blue");var gl = new GraphicsLayer({ id: "circles" });map.addLayer(gl);map.on("click", function (e) {var radius = map.extent.getWidth() / 10;var circle = new Circle({// 中心点center: e.mapPoint,// 半径radius: radius});var graphic = new Graphic(circle, symbol);gl.add(graphic);});});</script></head><body><div id="map"></div>   </body>
</html>

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"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>Class Breaks 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/SimpleFillSymbol","esri/renderers/ClassBreaksRenderer","esri/Color", "dojo/dom-style", "dojo/domReady!"], function (Map, FeatureLayer,InfoTemplate, SimpleFillSymbol,ClassBreaksRenderer,Color, domStyle) {map = new Map("map", {basemap: "streets",center: [-98.215, 38.382],zoom: 7,slider: false});var symbol = new SimpleFillSymbol();symbol.setColor(new Color([150, 150, 150, 0.5]));var renderer = new ClassBreaksRenderer(symbol, "POP07_SQMI");//定义字段类渲染器renderer.addBreak(0, 25, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));renderer.addBreak(25, 75, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));renderer.addBreak(75, 175, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));renderer.addBreak(175, 400, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));renderer.addBreak(400, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));var infoTemplate = new InfoTemplate("${NAME}", "${*}");var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {mode: FeatureLayer.MODE_SNAPSHOT,//根据表达式和时间获取信息outFields: ["*"],infoTemplate: infoTemplate});featureLayer.setDefinitionExpression("STATE_NAME = 'Kansas'");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>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"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><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 renderervar 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"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><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"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><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>

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

地理信息系统（GIS）系列——ArcGIS API for JavaScript 3.9（1）
Visual Studio 智能提示配置:将以下 JavaScript 文件引入项目中 arcgis_js_v39_sdk\arcgis_js_api\sdk\jshelp\jsapi_vsdoc12 ...
缓冲区分析—ArcGIS API for JavaScript
缓冲区分析是地理信息系统中的空间分析基本功能之一,是众多空间分析方法的基础.缓冲区分析是指为了识别某地理实体或空间物体对其周围的邻近性或影响度而在其周围建立的一定宽度的带状区. 缓冲区介绍缓冲区分析 ...
初学ArcGIS API for JavaScript
初学ArcGIS API for JavaScript 对于初学者来说,关于esri提供的一些样式和dojo自带的一些样式还是需要有一定的了解,这块在<WebGIS开发从基础到实践>讲解的 ...
用ArcGIS API for JavaScript制作三维可视化图
前段时间接了一个项目,涉及到了空间信息三维可视化的工作.之前在网上查找无意中看到ArcGIS API for JavaScript(以下简称"ArcGIS API"或"该 ...
视频教程-主流前端框架下ArcGIS API for JavaScript的开发-其他
主流前端框架下ArcGIS API for JavaScript的开发毕业于中国矿业大学地理信息科学专业.现就任于全球领先的GIS公司,主要担任地理平台研发工作,日常工作任务是ArcGIS JS A ...
ArcGIS API for JavaScript 3.23汉化（下）
ArcGIS API for JavaScript 3.23汉化(下) 4更为具体一.Default API configurations 默认API配置三.Retrieve data from ...
ArcGIS API for Javascript学习
一.ArcGIS API for Javascript 介绍 ArcGIS API for Javascript 是由美国 Esri 公司推出,跟随ArcGIS 9.3 同时发布的,是Esri 基于d ...
基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录应用场景需求分析效果图实现代码原理解读应用场景部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能（六）
目的: 1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能,鼠标点击后获取被点击对象的然后以infoWindow的方式显示点击对象的属性 ...
ArcGIS API for JavaScript心得体验
首发GIS派:ArcGIS API for JavaScript心得体验学习和使用ArcGIS API for JavaScript开发差不多有两年了吧,跌跌撞撞断断续续也做了几个小项目,学习之路相 ...