點哲银,線,面迷捧,文字符號JSON定義
1.環(huán)境說明
ArcGIS 10.4.1
JS API 3.15
2.以JSON參數(shù)構(gòu)建符號介紹
在ArcGIS JS API中军拟,提供了三種方式構(gòu)建點、線哄啄、面雅任、文字符號:
(1)使用無參數(shù)的構(gòu)造函數(shù),然后在逐一設(shè)置屬性咨跌。以點符號定義為例:
var?sms=new?SimpleMarkerSymbol();
sms.setStyle("circle");
sms.setSize(12);
sms.setOutline(null);
sms.setColor(newColor([255,0,0]));
(2)使用含參數(shù)的構(gòu)造函數(shù)沪么,直接傳入各屬性。
var?sms=new?SimpleMarkerSymbol("circle",12,null,newColor([255,0,0]));
(3)使用JSON參數(shù)的構(gòu)造函數(shù)锌半。
var?sms=new?SimpleMarkerSymbol(jsonObject);
即將所有屬性定義成JSON格式禽车。這樣做的好處,不用預(yù)先引入?yún)?shù)所需要的類文件刊殉,而且代碼更加簡潔殉摔,這也是ArcGIS
JS API 4.x版本主推的構(gòu)建方式。
3.各符號的JSON定義格式
在JS API幫助中可以查詢到部分符號的JSON定義格式记焊,對于沒有給出的部分逸月,可以先按第一種或者第二種方法定義符號,再調(diào)用符號的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構(gòu)建符號測試
//點符號?
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);
效果: