渲染器可以為特征圖層或者圖形圖層定義一組符號（通俗就是為了圖層需要表達的要素更為直觀）ArcGIS API For JS中有五種不同的渲染器，SimpleRenderer、ClassBreaksRenderer、UniqueValueRenderer、DotDensityRenderer和TemporalRenderer五種，無論那種渲染都要創建渲染示例，定義渲染符號，最后將渲染器添加到圖層。
一、ClassBreaksRenderer(分級渲染)
1、可以根據圖層中的某個特定的屬性值進行分析渲染，例如可以用於聚合標注時候進行渲染
2、使用案例：
//下面是設置聚合效果模型，根據聚合的點數來分三個等級，不同等級用不同的大小以及顏色圖標來表示，0-2為Marker；2-200為Marker-1；200-1001為Marker-2
var defaultSym = new esri.symbol.SimpleMarkerSymbol().setSize(4);
var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
var picBaseUrl = "lib/";
var blue = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "Marker.png", 32, 32).setOffset(0, 15);
var green = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "Marker-1.png", 64, 64).setOffset(0, 15);
var red = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "Marker-2.png", 72, 72).setOffset(0, 15);
renderer.addBreak(0, 2, blue);
renderer.addBreak(2, 100, green);
renderer.addBreak(100, 200, red)
clusterLayer.setRenderer(renderer);二、UniqueValueRenderer（唯一值渲染）
1、可以根據要素的某個字段進行分類，例如，我們再全國地圖中，我國有那么多省，怎么一目了然就能分辨出，每個省的范圍，這個時候我們就可以用唯一值渲染就能很好用不同的顏色划分出不同的省區范圍：
2、使用案例：
var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);
//create renderer
var renderer = new UniqueValueRenderer(defaultSymbol, "SUB_REGION");
//add symbol for each possible value
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("https://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);效果查看點擊打開鏈接
三、DotDensityRenderer（密度渲染）
1、常用於離散空間的密度分情況，例如人口密度
2、使用案例：
var renderer = new ScaleDependentRenderer({
rendererInfos: [{
renderer: new DotDensityRenderer({
fields: [{
name: "M163_07",
color: new Color("#CC8800")
}],
dotValue: 3200,
dotSize: 1
}),
maxScale: 17000000,
minScale: 20000001
}, {
renderer: new DotDensityRenderer({
fields: [{
name: "M163_07",
color: new Color("#CC8800")
}],
dotValue: 1600,
dotSize: 1
}),
maxScale: 8500000,
minScale: 17000000
}, {
renderer: new DotDensityRenderer({
fields: [{
name: "M163_07",
color: new Color("#CC8800")
}],
dotValue: 800,
dotSize: 1
}),
maxScale: 5000000,
minScale: 8500000
}]
});
layer.setRenderer(renderer);
基於M163_07字段創建dotValue值為1600，dotSize為1即是創建一個像素大小一個點代表1600人
四、TemporalRenderer（時間渲染）
1、時間渲染器對圖層中的要素提供基於時間的服務
2、使用案例：
var observationRenderer = new ClassBreaksRenderer(new SimpleMarkerSymbol(), "mag");
observationRenderer.addBreak(7, 12, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 24, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));
observationRenderer.addBreak(6, 7, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 21, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));
observationRenderer.addBreak(5, 6, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 18,new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));
observationRenderer.addBreak(4, 5, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 15,new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));
observationRenderer.addBreak(3, 4, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 12,new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));
observationRenderer.addBreak(2, 3, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 9,new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));
observationRenderer.addBreak(0, 2, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 6,new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));
//build a legend for the temporal renderer using the template picker
var symbols = arrayUtils.map(observationRenderer.infos,function(info){
return {label: info.minValue + " - " + info.maxValue,symbol:info.symbol};
});
symbols.reverse(); //flip the array so the lowest magnitude symbol displays on top
var infos = [
{ minAge: 48, maxAge: Infinity, color: new dojo.Color([255,0,0])},
{ minAge: 24, maxAge: 48, color: new dojo.Color([49,154,255])},
{ minAge: 0, maxAge: 24, color: new dojo.Color([255,255,8])}
];
var ageSymbols = [];
ageSymbols.push({label: "Less than 1 month",symbol: new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([255,0,0])).setWidth(10)});
ageSymbols.push({label: "1 - 6 months",symbol: new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([49,154,255])).setWidth(10)});
ageSymbols.push({label: "6+ months",symbol: new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([255,255,8])).setWidth(10)});
var legend = new TemplatePicker({
items : symbols,
rows: 7,
columns: 1
}, "magnitudeDiv");
legend.startup();
var legend2 = new TemplatePicker({
items : ageSymbols,
rows: 3,
columns: 1
}, "ageDiv");
legend2.startup();
var ager = new TimeClassBreaksAger(infos, TimeClassBreaksAger.UNIT_WEEKS);
var renderer = new TemporalRenderer(observationRenderer, null, null, ager);
featureLayer.setRenderer(renderer);
五、SimpleRenderer（簡單符號渲染）
1、簡單富豪渲染是最簡單的符號化渲染方式，對雖有要素使用同一種符號，只需要設置一個符號然后賦值給簡單符號渲染器即可
2、使用案例
var facilityPointSymbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_SQUARE,
20,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([89,95,35]), 2
),
new Color([130,159,83,0.40])
);
var incidentPointSymbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
16,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([89,95,35]), 2
),
new Color([130,159,83,0.40])
);
incidentsGraphicsLayer = new GraphicsLayer();
var incidentsRenderer = new SimpleRenderer(incidentPointSymbol);
incidentsGraphicsLayer.setRenderer(incidentsRenderer);
六、總結
簡單符號、唯一值、分級渲染用的比較多，使用的過程幾乎都是一樣，代碼參考官網，也很容易理解。FeatureLayer在加載服務是地圖服務，地圖服務的單個圖層，服務器端渲染也是這樣。