地理資訊系統（GIS）系列——ArcGIS API for JavaScript 3.9（2）
阿新 • • 發佈：2021-01-24
技術標籤：ArcGIS
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>
< 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 = [];
// 建立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">
<!--[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 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">
<!--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.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">
<!--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 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">
<!--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>