使用SVG图标符号
1.环境说明
ArcGIS 10.4.1
JS API 3.15
2.SVG图标介绍
SVG是使用XML来描述二维图形和绘图程序的语言。可以用来定义用于网络的矢量图形。相比JPEG、PNG等图像，SVG尺寸更小，且可以放大，修改颜色等优势。
SVG预定义了常用的几种形状元素，包括
3.SVG图标制作
SVG图标可使用现成的工具来生成，或者搜索网上提供的免费图标。
（1）在线制作工具
www.zhangxinxu.com/sp/svg/
（2）免费SVG图标
icomoon.io/app/#/select
4.点符号使用SVG图标介绍
JSAPI中的SimpleMarkerSymbol支持使用SVG中定义的图标。因此第一步需要先获取SVG图标path的定义，可使用前述方法获取。
这里介绍的JS API使用SVG图标的方式，还是按前面思路，使用JSON来定义，其JSON格式定义如下：
{
"color": [49, 45, 182, 255],
"size": 12,
"type": "esriSMS",
"style": "esriSMSPath",
"path": "svg中path定义的值"
}
5.结合分级渲染和SVG图标符号测试
（1）构建SVG图标符号
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图标符号
//创建分级渲染JSON，点符号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 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); 效果： 使用SVG图标符号 [1]使用SVG中的Symbol元素制作Icon（https://isux.tencent.com/16292.html）
6.源码
7.参考资料