AGS JS开发-以JSON参数构建地图渲染之一
点，线，面，文字符号JSON定义
1.环境说明
ArcGIS 10.4.1
JS API 3.15
2.以JSON参数构建符号介绍
在ArcGIS JS API中，提供了三种方式构建点、线、面、文字符号：
（1）使用无参数的构造函数，然后在逐一设置属性。以点符号定义为例：
var sms=new SimpleMarkerSymbol();
sms.setStyle("circle");
sms.setSize(12);
sms.setOutline(null);
sms.setColor(newColor([255,0,0]));
（2）使用含参数的构造函数，直接传入各属性。
var sms=new SimpleMarkerSymbol("circle",12,null,newColor([255,0,0]));
（3）使用JSON参数的构造函数。
var sms=new SimpleMarkerSymbol(jsonObject);
即将所有属性定义成JSON格式。这样做的好处，不用预先引入参数所需要的类文件，而且代码更加简洁，这也是ArcGIS
JS API 4.x版本主推的构建方式。
3.各符号的JSON定义格式
在JS API帮助中可以查询到部分符号的JSON定义格式，对于没有给出的部分，可以先按第一种或者第二种方法定义符号，再调用符号的toJson()方法输出得到JSON格式定义。
（1）无边框的SimpleMarkerSymbol
{
"color": [255, 0, 0],
"size": 12,
"type": "esriSMS",
"style": "esriSMSCircle"
}
（2）有边框的SimpleMarkerSymbol
{
"color": [255, 0, 0],
"size": 12,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color":[255, 0, 0],
"width":1,
"type":"esriSLS",
"style":"esriSLSSolid"
}
}
（3）PictureMarkerSymbol
{
"url":"graphics/redArrow2.png",
"height":20,
"width":20,
"type":"esriPMS"
}
（4）SimpleLineSymbol
{
"color":[255, 0, 0],
"width":1,
"type":"esriSLS",
"style":"esriSLSSolid"
}
（5）无边框的SimpleFillSymbol
{
"color": [255, 0, 0, 128],
"type": "esriSFS",
"style": "esriSFSSolid"
}
（6）有边框的SimpleFillSymbol
{
"color": [255, 0, 0, 128],
"type": "esriSFS",
"style": "esriSFSSolid",
"outline": {
"color": [0, 0, 0, 255],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
}
}
注：style类型可参考API帮助中的style定义类型。color不支持十六进制值。
4.JSON构建符号测试
//点符号
var sms=new SimpleMarkerSymbol({
"color": [0,0,255],
"size":14,
"type":"esriSMS",
"style":"esriSMSCircle",
"outline": {
"color":[255,0,0],
"width":1,
"type":"esriSLS",
"style":"esriSLSSolid"}
});
//面符号
var sfs=new SimpleFillSymbol({
"color": [0,255,0,128],
"type":"esriSFS",
"style":"esriSFSSolid",
"outline": {
"color": [128,128,128,255],
"width":1,
"type":"esriSLS",
"style":"esriSLSSolid"}
});
var citiesRenderer=new SimpleRenderer(sms);
var statesRenderer=new SimpleRenderer(sfs);
var statesUrl="https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA /MapServer/2";
var states=new FeatureLayer(statesUrl);
states.setRenderer(statesRenderer);
map.addLayer(states);
var citiesUrl="https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2";
var citiesLayer=new FeatureLayer(citiesUrl);
citiesLayer.setRenderer(citiesRenderer);
map.addLayer(citiesLayer);
效果：
