ArcGIS API For Javascript之顏色分類實現
阿新 • • 發佈：2019-01-01
在博文（http://blog.csdn.net/lovecarpenter/article/details/52672046）的基礎上，利用該文章中的客戶端渲染唯一值實現了功能。但是做了修改，我渲染的是SimpleLineSymbol。在API3.8的版本中setColor不可行。紅色字型是我自己的程式碼
1.引言
在 GIS當中，總要是不是的製作幾張專題圖，製作專題圖的過程中，不可避免的就要涉及到圖層的渲染問題（即改變圖層的顏色資訊），渲染分為客戶端渲染，伺服器渲染，客戶端渲染要求我們的服務必須是要素服務，或者是可以使用FeatureLayer接收的服務圖層.
2.需求
首先我們檢視一下我們的資料（宿舍樓資訊）
2.1需求一（唯一值渲染）
我想根據alias屬性進行唯一值渲染
2.1.1程式碼實現
- 首先我們先將地圖載入進來
var map = new esri.Map("MyMapDiv");
var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/my/fea/MapServer");
map.addLayer(layer);- 1
- 2
- 3
- 1
- 2
- 3
- 定義一個渲染按鈕
<button - 1
- 1
- 給按鈕繫結相應的事件
- var defaultSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([255, 0, 0]), 3);
- var rRenderer = new UniqueValueRenderer(defaultSymbol,"欄位");
- rRenderer.addValue("欄位",new SimpleLineSymbol().setColor(new Color("#FF8C00")));
- var infoTemplate = new InfoTemplate("程式碼", "${。。。。}");
var xxxxLayer= new FeatureLayer(xxxURL,{
mode:FeatureLayer.MODE_SNAPSHOT,
outField:["*"],
infoTemplate:infoTemplate
on(btn,"click",function(){
//定義一個要素圖層
var featureLayer = new FeatureLayer(
"http://localhost:6080/arcgis/rest/services/Test/ft/MapServer/1",
{
mode:FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
//定義線符號
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);//替代defaultSymbol
//定義面符號
var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color("#FFFFCC"));//不需要
//定義唯一值渲染器，對欄位alias進行渲染，fill是預設的渲染符號
var renderer = new UniqueValueRenderer(fill, "alias");//替代上述rRenderer//設定渲染的方式
renderer.addValue("C區宿舍", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 255, 0, 0.5])));
renderer.addValue("B區宿舍", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 0, 255, 0.5])));
renderer.addValue("A區宿舍",new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([255, 0, 255, 0.5])));
renderer.addValue("公共出口", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([255, 255, 255, 0.75])));
featureLayer.setRenderer(renderer);
map.addLayer(featureLayer);
}) - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
2.1.2全部程式碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>UniqueValueRenderer</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
<style type="text/css">
.MapClass{
width:100%;
height:600px;
border:1px solid #000;
}
</style>
<script type="text/javascript">
require(["esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/on",
"dojo/dom",
"dojo/colors",
"esri/symbols/SimpleFillSymbol",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/UniqueValueRenderer",
"dojo/domReady!"],
function (Map, ArcGISDynamicMapServiceLayer,on,dom,Color,SimpleFillSymbol, FeatureLayer, SimpleLineSymbol,UniqueValueRenderer) {
var map = new esri.Map("MyMapDiv");
var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer");
map.addLayer(layer);
//獲得id為btn的DOM元素
var btn=dom.byId("btn");
//繫結相應的事件
on(btn,"click",function(){
//定義一個要素圖層
var featureLayer = new FeatureLayer(
"http://localhost:6080/arcgis/rest/services/Test/ft/MapServer/1",
{
mode:FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
//定義線符號
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
//定義面符號
var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color("#FFFFCC"));
//定義唯一值渲染器，對欄位alias進行渲染，fill是預設的渲染符號
var renderer = new UniqueValueRenderer(fill, "alias");
//設定渲染的方式
renderer.addValue("C區宿舍", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 255, 0, 0.5])));
renderer.addValue("B區宿舍", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 0, 255, 0.5])));
renderer.addValue("A區宿舍",new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([255, 0, 255, 0.5])));
renderer.addValue("公共出口", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([255, 255, 255, 0.75])));
featureLayer.setRenderer(renderer);
map.addLayer(featureLayer);
})
});
</script>
</head>
<body>
<div id="MyMapDiv" class="MapClass"></div>
<button id="btn">渲染</button>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
執行結果之前：
執行結果之後：
2.2需求二（分類渲染）
根據面積欄位實現分類渲染，由於程式碼只是修改了渲染器，所以直接將程式碼貼出來
2.2.1全部程式碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>UniqueValueRenderer</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
<style type="text/css">
.MapClass{
width:100%;
height:600px;
border:1px solid #000;
}
</style>
<script type="text/javascript">
require(["esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/on",
"dojo/dom",
"dojo/colors",
"esri/symbols/SimpleFillSymbol",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/ClassBreaksRenderer",
"dojo/domReady!"],
function (Map, ArcGISDynamicMapServiceLayer,on,dom,Color,SimpleFillSymbol, FeatureLayer, SimpleLineSymbol,ClassBreaksRenderer) {
var map = new esri.Map("MyMapDiv");
var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer");
map.addLayer(layer);
//獲得id為btn的DOM元素
var btn=dom.byId("btn");
//繫結相應的事件
on(btn,"click",function(){
//定義一個要素圖層
var featureLayer = new FeatureLayer(
"http://localhost:6080/arcgis/rest/services/Test/ft/MapServer/1",
{
mode:FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
//定義線符號
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
//定義面符號
var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color("#FFFFCC"));
//定義唯一值渲染器，對欄位alias進行渲染，fill是預設的渲染符號
var renderer = new ClassBreaksRenderer(fill, "OBJECTID");
//設定渲染間隔
renderer.addBreak(0,20, new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 255, 0, 0.5])));
renderer.addBreak(20,30, new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 0, 255, 0.5])));
renderer.addBreak(30,40,new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([255, 0, 255, 0.5])));
renderer.addBreak(40,60, new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([255, 255, 255, 0.75])));
featureLayer.setRenderer(renderer);
map.addLayer(featureLayer);
})
});
</script>
</head>
<body>
<div id="MyMapDiv" class="MapClass"></div>
<button id="btn">渲染</button>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
執行結果前：
執行結果後：
2.3需求三（伺服器渲染）
當資料量過大時，客戶端渲染變顯得有些慢了，此時可以使用伺服器渲染，伺服器渲染提供了兩種渲染的方式：唯一值渲染，分類渲染，在此處我們用到的為分類渲染。
注意：伺服器渲染不需要要素服務即可。
2.3.1程式碼實現
- 建立一個按鈕（用於觸發伺服器渲染）
<input type="button" id="Btn" value="伺服器渲染" />- 1
- 1
- 給按鈕繫結點選事件
on(btn,"click",function(e){
//定義線符號
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
//定義面符號
var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new dojo.Color("#FFFFCC"));
//建立伺服器渲染物件
var RenderAnalyst = new GenerateRendererTask("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer/1");
//建立伺服器渲染引數物件
var params = new GenerateRendererParameters();
//建立顏色坡道物件
var colorRamp = new AlgorithmicColorRamp();
//顏色的起始位置
colorRamp.fromColor = dojo.colorFromHex("#998ec3");
//顏色的終止位置
colorRamp.toColor = dojo.colorFromHex("#f1a340");
//顏色的型別
colorRamp.algorithm = "hsv";
//告訴伺服器我們需要什麼樣子的渲染器
var unidef = new ClassBreaksDefinition();
//分類的欄位
unidef.classificationField = "Shape.STArea()";
//如何分類
unidef.classificationMethod="natural-breaks";
//分為幾類？
unidef.breakCount = 3;
//預設的符號
unidef.baseSymbol=fill;
//將自定義的顏色坡道告訴伺服器
unidef.colorRamp=colorRamp;
//給渲染引數物件賦值
params.classificationDefinition = unidef;
//進行伺服器渲染
RenderAnalyst.execute(params, showRender);
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 處理伺服器返回的結果
//處理伺服器返回來的結果
function showRender(renderer) {
if (renderer != null) {
//定義要素圖層，注意：這個地方我們用到並不是要素服務，而是地圖服務
var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer/1",{
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
//賦予渲染器
featureLayer.setRenderer(renderer);
featureLayer.refresh();
MyMap.addLayer(featureLayer);
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
2.3.2全部程式碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>GenerateRendererTask</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>