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 id="btn">渲染</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>
<style type="text/css">
.MapClass{
width:100%;
height:500px;
border:1px solid #000;
}
</style>
<script type="text/javascript">
require(["esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/dom",
"dojo/on",
"esri/tasks/GenerateRendererTask",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/GenerateRendererParameters",
"esri/tasks/ClassBreaksDefinition",
"esri/tasks/AlgorithmicColorRamp",
"dojo/domReady!"], function
(Map,
ArcGISDynamicMapServiceLayer,
dom,on,
GenerateRendererTask,
FeatureLayer,
SimpleFillSymbol,
SimpleLineSymbol,
GenerateRendererParameters,
ClassBreaksDefinition,
AlgorithmicColorRamp
) {
//服務器端渲染
var MyMap = new Map("MyMapDiv");
var layer = new ArcGISDynamicMapServiceLayer
("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer/");
MyMap.addLayer(layer)
//獲得id爲Btn的DOM對象
var btn=dom.byId("Btn");
//給btn綁定點擊事件
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);
});
//處理服務器返回來的結果
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);
}
}
});
</script>
</head>
<body>
<div id="MyMapDiv" class="MapClass"></div>
<input type="button" id="Btn" value="服務器渲染" />
</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
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 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
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
運行之前的結果:
運行之後的結果: