ArcGIS API for JavaScript开发-以JSON参数构建地图渲染之四

使用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）在线制作工具
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<classbreakValues.length;i++){



var obj= {



"classMaxValue": classbreakValues,



"symbol": classbreakSymbols



};



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.arcgison ... 3B%3B



var citiesLayer=new FeatureLayer(citiesUrl,{



outFields: ["*"]



});



var classbreaksRenderer=new ClassBreaksRenderer(createClassbreakRendererJson("pop2000",[10000,50000,200000],["",svgJson1,svgJson2]));



citiesLayer.setRenderer(classbreaksRenderer);



map.addLayer(citiesLayer);

效果：



文章来源：http://www.jianshu.com/p/e685396a127f

ArcGIS API for JavaScript开发-以JSON参数构建地图渲染之一：http://zhihu.esrichina.com.cn/article/2825
ArcGIS API for JavaScript开发-以JSON参数构建地图渲染之二：http://zhihu.esrichina.com.cn/article/2826
ArcGIS API for JavaScript开发-以JSON参数构建地图渲染之三：http://zhihu.esrichina.com.cn/article/2827
ArcGIS API for JavaScript开发-以JSON参数构建地图渲染之四：http://zhihu.esrichina.com.cn/article/2828