地图服务一般仅提供地图展示的基础信息，如果需要根据外部数据来渲染图层，怎么办？例如：通过不同的颜色来表示河道或道路的拥堵情况。本文将通过实现对河段拥堵情况展示一例来讲述FeatureLayer的自定义渲染。
实现思路
- FeatureLayer添加自定义属性（Field）
- 通过FeatureLayer自定义属性来渲染图层
加载河道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" href="http://192.168.2.118:8484/arcgis_js_api/library/3.20/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://192.168.2.118:8484/arcgis_js_api/library/3.20/3.20/esri/css/esri.css">
<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
});
//京杭运河要素图层
var url="http://124.128.48.217:6080/arcgis/rest/services/shuili/MapServer/6";
var sk_layer = new FeatureLayer(url,{
//注意这里的mode一定要指定MODE_SNAPSHOT，否则每次放大或缩小或者是平移都会执行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）
- 打印图层属性
//图层更新结束事件打印图层属性
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);
}
});
河道基础属性.png
FeatureLayer添加自定义属性主要原理
featureLayer.graphics[i].attributes["属性名"]=属性值;
注意：该方法可以直接修改（或添加）FeatureLayer的属性，但这种修改只存在于client端，修改的数据不影响server端。
添加自定义属性，关键代码：
//yd_array用于存储OBJECTID与拥堵级别
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
关键代码：
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);
/*根据拥堵级别渲染航道*/
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
网友评论