地圖服務(wù)一般僅提供地圖展示的基礎(chǔ)信息秀睛，如果需要根據(jù)外部數(shù)據(jù)來(lái)渲染圖層耀里，怎么辦呛每？例如：通過(guò)不同的顏色來(lái)表示河道或道路的擁堵情況扁掸。本文將通過(guò)實(shí)現(xiàn)對(duì)河段擁堵情況展示一例來(lái)講述FeatureLayer的自定義渲染。
實(shí)現(xiàn)思路
- FeatureLayer添加自定義屬性（Field）
- 通過(guò)FeatureLayer自定義屬性來(lái)渲染圖層
加載河道FeatureLayer：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" >
<link rel="stylesheet" >
<script src="http://192.168.2.118:8484/arcgis_js_api/library/3.20/3.20/init.js"></script>
<title>要素圖層</title>
<script type="text/javascript">
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/Color",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/domReady!"
], function(
Map,FeatureLayer,SimpleRenderer,Color,SimpleFillSymbol,SimpleLineSymbol
){
map= new Map("map",{
//去掉logo
logo:false,
zoom:5
});
//京杭運(yùn)河要素圖層
var url="http://124.128.48.217:6080/arcgis/rest/services/shuili/MapServer/6";
var sk_layer = new FeatureLayer(url,{
//注意這里的mode一定要指定MODE_SNAPSHOT诺擅，否則每次放大或縮小或者是平移都會(huì)執(zhí)行FeatureLayer的update-end操作
mode: FeatureLayer.MODE_SNAPSHOT,
//輸出所有屬性
outFields: ["*"]
});
//添加圖層
map.addLayer(sk_layer);
sk_layer.on("update-end", function(){
//輸出graphic(線要素)的所有屬性
for(var i = 0;i<sk_layer.graphics.length;i++){
//輸出要素屬性
console.log(sk_layer.graphics[i].attributes);
//輸出要素類型
console.log(sk_layer.geometryType);
}
});
});
</script>
</head>
<body>
<div id="map" style="width: 100%;height:450px;border: 1px blue solid;">
</div>
</body>
</html>
河道原始圖.png
FeatureLayer添加自定義屬性（Field）
- 打印圖層屬性
//圖層更新結(jié)束事件打印圖層屬性
sk_layer.on("update-end", function(){
//輸出graphic(線要素)的所有屬性
for(var i = 0;i<sk_layer.graphics.length;i++){
//輸出要素屬性
console.log(sk_layer.graphics[i].attributes);
//輸出要素類型
console.log(sk_layer.geometryType);
}
});
河道基礎(chǔ)屬性.png
FeatureLayer添加自定義屬性主要原理
featureLayer.graphics[i].attributes["屬性名"]=屬性值;
注意：該方法可以直接修改（或添加）FeatureLayer的屬性市袖，但這種修改只存在于client端，修改的數(shù)據(jù)不影響server端掀虎。
添加自定義屬性凌盯，關(guān)鍵代碼：
//yd_array用于存儲(chǔ)OBJECTID與擁堵級(jí)別
var yd_array = new Array();
yd_array.push([1,1]);
yd_array.push([2,2]);
yd_array.push([3,3]);
yd_array.push([4,4]);
yd_array.push([5,5]);
sk_layer.on("update-end", function(){
//輸出graphic(線要素)的所有屬性
for(var i = 0;i<sk_layer.graphics.length;i++){
for(var j=0;j<yd_array.length;j++){
if(sk_layer.graphics[i].attributes["OBJECTID"] == yd_array[j][0]){
//添加自定義的航道擁堵屬性并賦值
sk_layer.graphics[i].attributes["yd_level"]=yd_array[j][1];
}
}
//輸出要素屬性
console.log(sk_layer.graphics[i].attributes);
}
});
-
打印添加自定義屬性后的圖層屬性
自定義屬性打印.gif
自定義渲染FeatureLayer
關(guān)鍵代碼：
sk_layer.on("update-end", function(){
//輸出graphic(線要素)的所有屬性
for(var i = 0;i<sk_layer.graphics.length;i++){
for(var j=0;j<yd_array.length;j++){
if(sk_layer.graphics[i].attributes["OBJECTID"] == yd_array[j][0]){
//添加自定義的航道擁堵屬性并賦值
sk_layer.graphics[i].attributes["yd_level"]=yd_array[j][1];
}
}
//輸出要素屬性
console.log(sk_layer.graphics[i].attributes);
/*根據(jù)擁堵級(jí)別渲染航道*/
if(sk_layer.graphics[i].attributes["yd_level"] == 1){
map.lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 128, 0,1]),2.5);
sk_layer.graphics[i].setSymbol(map.lineSymbol);
}
if(sk_layer.graphics[i].attributes["yd_level"] == 2){
map.lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([65, 105, 225,1]),2.5);
sk_layer.graphics[i].setSymbol(map.lineSymbol);
}
if(sk_layer.graphics[i].attributes["yd_level"] == 3){
map.lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 0,1]),2.5);
sk_layer.graphics[i].setSymbol(map.lineSymbol);
}
if(sk_layer.graphics[i].attributes["yd_level"] == 4){
map.lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 165, 0,1]),2.5);
sk_layer.graphics[i].setSymbol(map.lineSymbol);
}
if(sk_layer.graphics[i].attributes["yd_level"] == 5){
map.lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 69, 0,1]),2.5);
sk_layer.graphics[i].setSymbol(map.lineSymbol);
}
}
});
最終效果：
自定義渲染效果.png
