点，线，面，文字符号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);

效果：

5.源码

JSON构建地图渲染