使用SVG图标符号
1.环境说明
ArcGIS 10.4.1
JS API 3.15
2.SVG图标介绍
SVG是使用XML来描述二维图形和绘图程序的语言。可以用来定义用于网络的矢量图形。相比JPEG、PNG等图像，SVG尺寸更小，且可以放大，修改颜色等优势。
SVG预定义了常用的几种形状元素，包括<rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>、<path>。其中<path>可以理解为可创建任何的自定义图标。通常使用这些元素标签来定义图形，然后保存为.svg文件，该文件可与HTML一起使用。
3.SVG图标制作
SVG图标可使用现成的工具来生成，或者搜索网上提供的免费图标。
（1）在线制作工具
（2）免费SVG图标
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<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）
网友评论