使用SVG圖標(biāo)符號
1.環(huán)境說明
ArcGIS 10.4.1
JS API 3.15
2.SVG圖標(biāo)介紹
SVG是使用XML來描述二維圖形和繪圖程序的語言。可以用來定義用于網(wǎng)絡(luò)的矢量圖形帖池。相比JPEG聂使、PNG等圖像箍铭，SVG尺寸更小，且可以放大波附，修改顏色等優(yōu)勢。
SVG預(yù)定義了常用的幾種形狀元素昼钻，包括<rect>掸屡、<circle>、<ellipse>然评、<line>折晦、<polyline>、<polygon>沾瓦、<path>满着。其中<path>可以理解為可創(chuàng)建任何的自定義圖標(biāo)。通常使用這些元素標(biāo)簽來定義圖形贯莺，然后保存為.svg文件风喇，該文件可與HTML一起使用。
3.SVG圖標(biāo)制作
SVG圖標(biāo)可使用現(xiàn)成的工具來生成缕探，或者搜索網(wǎng)上提供的免費(fèi)圖標(biāo)魂莫。
（1）在線制作工具
（2）免費(fèi)SVG圖標(biāo)
4.點(diǎn)符號使用SVG圖標(biāo)介紹
JSAPI中的SimpleMarkerSymbol支持使用SVG中定義的圖標(biāo)。因此第一步需要先獲取SVG圖標(biāo)path的定義爹耗，可使用前述方法獲取耙考。
這里介紹的JS API使用SVG圖標(biāo)的方式谜喊，還是按前面思路，使用JSON來定義倦始，其JSON格式定義如下：
{
"color": [49, 45, 182, 255],
"size": 12,
"type": "esriSMS",
"style": "esriSMSPath",
"path": "svg中path定義的值"
}
5.結(jié)合分級渲染和SVG圖標(biāo)符號測試
（1）構(gòu)建SVG圖標(biāo)符號
var?svgPath1="M16
0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12
10-22c0-5.523-4.477-10-10-10zM16 16.125c-3.383
0-6.125-2.742-6.125-6.125s2.742-6.125 6.125-6.125 6.125 2.742 6.125 6.125-2.742
6.125-6.125 6.125zM12.125 10c0-2.14 1.735-3.875 3.875-3.875s3.875 1.735 3.875
3.875c0 2.14-1.735 3.875-3.875 3.875s-3.875-1.735-3.875-3.875z";
var?svgJson1= {
"color": [255,165,0,255],
"size":18,
"type":"esriSMS",
"style":"esriSMSPath",
"path":svgPath1
};
（2）在分級渲染中使用SVG圖標(biāo)符號
//創(chuàng)建分級渲染JSON斗遏，點(diǎn)符號function?createClassbreakRendererJson(classbreakFieldName,classbreakValues,classbreakSymbols){
var?rendererJson= {
"type":"classBreaks",
"field": classbreakFieldName,
"defaultSymbol": {
"color": [128,128,128],
"size":12,
"type":"esriSMS",
"style":"esriSMSCircle"},
"minValue": classbreakValues[0],
"classBreakInfos": []
};
var?i=1;
for(i;i<classbreakValues.length;i++){
var?obj= {
"classMaxValue": classbreakValues[i],
"symbol": classbreakSymbols[i]
};
rendererJson.classBreakInfos.push(obj);
}
return?rendererJson;
}
var?svgPath1="M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16.125c-3.383 0-6.125-2.742-6.125-6.125s2.742-6.125 6.125-6.125 6.125 2.742 6.125 6.125-2.742 6.125-6.125 6.125zM12.125 10c0-2.14 1.735-3.875 3.875-3.875s3.875 1.735 3.875 3.875c0 2.14-1.735 3.875-3.875 3.875s-3.875-1.735-3.875-3.875z";
var?svgJson1= {
"color": [255,165,0,255],
"size":18,
"type":"esriSMS",
"style":"esriSMSPath",
"path":svgPath1
};
var?svgPath2="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z";
var?svgJson2= {
"color": [30,144,255,255],
"size":14,
"type":"esriSMS",
"style":"esriSMSPath",
"path":svgPath2
};
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,50000,200000],["",svgJson1,svgJson2]));
citiesLayer.setRenderer(classbreaksRenderer);
map.addLayer(citiesLayer);
效果：
6.源碼
7.參考資料
[1]使用SVG中的Symbol元素制作Icon（https://isux.tencent.com/16292.html）
