渲染---服务器分类渲染

留言
1.引入模块
1
2
3
4
"esri/tasks/GenerateRendererTask",
         "esri/tasks/GenerateRendererParameters",
         "esri/tasks/ClassBreaksDefinition",
         "esri/tasks/AlgorithmicColorRamp",
2.与前两个相比

当数据量很大的时候，服务器渲染的速度明显快过客户端渲染。
客户端和服务端的渲染都分为两种：唯一值渲染和分类渲染

3.服务器分类步骤相比客户端较多，有层次
  1. 创建对象
    1
    2
    3
    4
    5
    6
    7
    8
    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/demo/Practice/MapServer/1");
    //创建服务器渲染参数对象
    var params = new GenerateRendererParameters();   
    //创建颜色坡道对象
                var colorRamp = new AlgorithmicColorRamp();
  2. 设置颜色位置、类型
    1
    2
    3
    4
    5
    6
    //颜色的起始位置
                colorRamp.fromColor = dojo.colorFromHex("#998ec3");
    //颜色的终止位置
                colorRamp.toColor = dojo.colorFromHex("#f1a340");
    //颜色的类型
                colorRamp.algorithm = "hsv";
  3. 渲染器样式、分类字段，怎么分，分几类
1
2
3
4
5
6
7
8
//渲染器样式
var unidef = new ClassBreaksDefinition();
//分类字段
unidef.classificationField = "Shape.STArea()";
//如何分类
            unidef.classificationMethod="natural-breaks";
//几类
unidef.breakCount = 3;
  1. 显示分类符号，颜色，赋值渲染
    1
    2
    3
    4
    5
    6
    7
    8
    //默认的符号
                unidef.baseSymbol=fill;
    //将自定义的颜色坡道告诉服务器
                unidef.colorRamp=colorRamp;
    //给渲染参数对象赋值
                params.classificationDefinition = unidef;
    //进行服务器渲染
                RenderAnalyst.execute(params, showRender);
4.贴代码
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
<!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" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/tundra/tundra.css"/>
    <script  type="text/Javascript" src="https://js.arcgis.com/3.28/"></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/demo/Practice/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/demo/Practice/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/demo/Practice/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>