ArcGIS API for JavaScript开发-以JSON参数构建地图渲染之三

唯一值和分级渲染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],



[/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,



"symbol": {



"color": classbreakColors,



"size":12,



"type":"esriSMS",



"style":"esriSMSCircle"}



};



rendererJson.classBreakInfos.push(obj);



}



return rendererJson;



}

（3）设置FeatureLayer的渲染

var statesUrl="https://sampleserver6.arcgison ... 3B%3B



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.arcgison ... 3B%3B



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);

效果：


 
文章来源：http://www.jianshu.com/p/89ea16efa29e

ArcGIS API for JavaScript开发-以JSON参数构建地图渲染之一：http://zhihu.esrichina.com.cn/article/2825
ArcGIS API for JavaScript开发-以JSON参数构建地图渲染之二：http://zhihu.esrichina.com.cn/article/2826
ArcGIS API for JavaScript开发-以JSON参数构建地图渲染之三：http://zhihu.esrichina.com.cn/article/2827
ArcGIS API for JavaScript开发-以JSON参数构建地图渲染之四：http://zhihu.esrichina.com.cn/article/2828