唯一值和分级渲染JSON定义
1.环境说明
ArcGIS 10.4.1
JS API 3.15
2.以JSON参数构建唯一值和分级渲染
使用JSON的好处，在前面文章中已经说明。专题渲染方法对应的JSON格式可在REST API中查看，也可以先按常规方法定义后，在调用toJson()方法输出。
（1）唯一值渲染的JSON格式定义
唯一值渲染需要结合点、线和面符号一起使用，JSON定义格式如下：
{
"type": "uniqueValue",
"field1": "渲染字段名",
"defaultSymbol": {
"color": [0, 0, 0, 64],
"outline": {
"color": [0, 0, 0, 255],
"width": 1,
"type": "esriSLS",
"style":"esriSFSNull"
},
"type": "esriSFS",
"style":"esriSFSNull"
},
"uniqueValueInfos": [{
"value": "唯一值1",
"symbol": {
"color": [255, 0, 0, 128],
"outline": {
"color": [0, 0, 0, 255],
"width": 1,
"type": "esriSLS",
"style":"esriSLSSolid"
},
"type": "esriSFS",
"style":"esriSFSSolid"
}
}, {
"value": "唯一值2",
"symbol": {
"color": [0, 255, 0, 128],
"outline": {
"color": [0, 0, 0, 255],
"width": 1,
"type":"esriSLS",
"style":"esriSLSSolid"
},
"type": "esriSFS",
"style":"esriSFSSolid"
}
},
……]
}
（2）分级渲染的JSON格式定义
分级渲染需要结合点、线和面符号一起使用，JSON定义格式如下：
{
"type":"classBreaks",
"field":"渲染字段名",
"defaultSymbol":{
"color":[150,150,150,128],
"outline":{
"color":[0,0,0,255],
"width":1,
"type":"esriSLS",
"style":"esriSLSSolid"
},
"type":"esriSFS",
"style":"esriSFSSolid"
},
"minValue":最小值,
"classBreakInfos":[{
"symbol":{
"color":[56,168,0,128],
"outline":{
"color":[0,0,0,255],
"width":1,
"type":"esriSLS",
"style":"esriSLSSolid"
},
"type":"esriSFS",
"style":"esriSFSSolid"
},
"classMaxValue":区间值1
},
{
"symbol":{
"color":[139,209,0,128],
"outline":{
"color":[0,0,0,255],
"width":1,
"type":"esriSLS",
"style":"esriSLSSolid"
},
"type":"esriSFS",
"style":"esriSFSSolid"
},
"classMaxValue":区间值2
},
……]
}
3.唯一值渲染和分级渲染测试
（1）构建唯一值渲染JSON数据
//创建唯一值JSON，面填充符号function createUniqueRendererJson(uniqueFieldName,uniqueValues,uniqueColors){
var rendererJson= {
"type":"uniqueValue",
"field1": uniqueFieldName,
"defaultSymbol": {
"color": uniqueColors[0],
"type":"esriSFS",
"style":"esriSFSSolid"},
"uniqueValueInfos": []
};
var i=0;
for(i;i < uniqueValues.length;i++){
var idx=1+i;
var obj= {
"value": uniqueValues[i],
"symbol": {
"color": uniqueColors[idx],
"type":"esriSFS",
"style":"esriSFSSolid"}
};
rendererJson.uniqueValueInfos.push(obj);
}
return rendererJson;
}
（2）构建分级渲染JSON数据
//创建分级渲染JSON，点符号function createClassbreakRendererJson(classbreakFieldName,classbreakValues,classbreakColors){
var rendererJson= {
"type":"classBreaks",
"field": classbreakFieldName,
"defaultSymbol": {
"color": classbreakColors[0],
"size":12,
"type":"esriSMS",
"style":"esriSMSCircle"},
"minValue": classbreakValues[0],
"classBreakInfos": []
};
vari=1;
for(i;i < classbreakValues.length;i++){
var obj= {
"classMaxValue": classbreakValues[i],
"symbol": {
"color": classbreakColors[i],
"size":12,
"type":"esriSMS",
"style":"esriSMSCircle"}
};
rendererJson.classBreakInfos.push(obj);
}
return rendererJson;
}
（3）设置FeatureLayer的渲染
var statesUrl="https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2";
var states=new FeatureLayer(statesUrl,{
outFields:["*"]
});
var uniqueJson=createUniqueRendererJson("sub_region",["Pacific","Mtn","W N Cen","Mid Atl"],[[128,128,128],[165,42,42],[30,144,255],[34,139,34],[255,215,0]]);
var uniqueRenderer=new UniqueValueRenderer(uniqueJson);
states.setRenderer(uniqueRenderer);
map.addLayer(states);
var citiesUrl="https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0";
var citiesLayer=new FeatureLayer(citiesUrl,{
outFields: ["*"]
});
var classbreaksRenderer=new ClassBreaksRenderer(createClassbreakRendererJson("pop2000",[10000,30000,50000,80000,100000,200000],[[128,128,128],[178,34,34],[218,165,32],[50,205,50],[0,191,255],[123,104,238]]));
citiesLayer.setRenderer(classbreaksRenderer);
map.addLayer(citiesLayer);
效果：
