ArcGIS API For JS 之render（符号渲染)

渲染器可以为特征图层或者图形图层定义一组符号（通俗就是为了图层需要表达的要素更为直观）ArcGIS API For JS中有五种不同的渲染器，SimpleRenderer、ClassBreaksRenderer、UniqueValueRenderer、DotDensityRenderer和TemporalRenderer五种，无论那种渲染都要创建渲染示例，定义渲染符号，最后将渲染器添加到图层。

一、ClassBreaksRenderer(分级渲染)

1、可以根据图层中的某个特定的属性值进行分析渲染，例如可以用于聚合标注时候进行渲染

2、使用案例：

                        //下面是设置聚合效果模型，根据聚合的点数来分三个等级，不同等级用不同的大小以及颜色图标来表示，0-2为Marker；2-200为Marker-1；200-1001为Marker-2
                        var defaultSym = new esri.symbol.SimpleMarkerSymbol().setSize(4);
                        var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
                        var picBaseUrl = "lib/";
                        var blue = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "Marker.png", 32, 32).setOffset(0, 15);
                        var green = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "Marker-1.png", 64, 64).setOffset(0, 15);
                        var red = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "Marker-2.png", 72, 72).setOffset(0, 15);
                        renderer.addBreak(0, 2, blue);
                        renderer.addBreak(2, 100, green);
                        renderer.addBreak(100, 200, red)
                        clusterLayer.setRenderer(renderer);

二、UniqueValueRenderer（唯一值渲染）

1、可以根据要素的某个字段进行分类，例如，我们再全国地图中，我国有那么多省，怎么一目了然就能分辨出，每个省的范围，这个时候我们就可以用唯一值渲染就能很好用不同的颜色划分出不同的省区范围：

2、使用案例：

          var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
          defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);

          //create renderer
          var renderer = new UniqueValueRenderer(defaultSymbol, "SUB_REGION");

          //add symbol for each possible value
          renderer.addValue("Pacific", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
          renderer.addValue("Mtn", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5])));
          renderer.addValue("N Eng", new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5])));
          renderer.addValue("S Atl", new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5])));
          renderer.addValue("Mid Atl", new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.75])));
          renderer.addValue("E N Cen", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.5])));
          renderer.addValue("W N Cen", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
          renderer.addValue("E S Cen", new SimpleFillSymbol().setColor(new Color([127, 127, 127, 0.5])));
          renderer.addValue("W S Cen", new SimpleFillSymbol().setColor(new Color([0, 0, 0, 0.5])));
          
          var featureLayer = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1", {
            infoTemplate: new InfoTemplate(" ", "${SUB_REGION}"),
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["SUB_REGION"]
          });
          
          featureLayer.setRenderer(renderer);

效果查看点击打开链接

三、DotDensityRenderer（密度渲染）

1、常用于离散空间的密度分情况，例如人口密度

2、使用案例：

        
        var renderer = new ScaleDependentRenderer({
          rendererInfos: [{
            renderer: new DotDensityRenderer({
              fields: [{
                name: "M163_07",
                color: new Color("#CC8800")
              }],
              dotValue: 3200,
              dotSize: 1
            }),
          maxScale: 17000000,
          minScale: 20000001
          }, {
            renderer: new DotDensityRenderer({
              fields: [{
                name: "M163_07",
                color: new Color("#CC8800")
              }],
              dotValue: 1600,
              dotSize: 1
            }),
          maxScale: 8500000,
          minScale: 17000000
          }, {
            renderer: new DotDensityRenderer({
              fields: [{
                name: "M163_07",
                color: new Color("#CC8800")
              }],
              dotValue: 800,
              dotSize: 1
            }),
          maxScale: 5000000,
          minScale: 8500000
          }]
        });
        layer.setRenderer(renderer);

基于M163_07字段创建dotValue值为1600，dotSize为1即是创建一个像素大小一个点代表1600人

四、TemporalRenderer（时间渲染）

1、时间渲染器对图层中的要素提供基于时间的服务

2、使用案例：

          var observationRenderer = new ClassBreaksRenderer(new SimpleMarkerSymbol(), "mag");
          observationRenderer.addBreak(7, 12, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 24, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));

          observationRenderer.addBreak(6, 7, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 21, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));

          observationRenderer.addBreak(5, 6, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 18,new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));

          observationRenderer.addBreak(4, 5, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 15,new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));

          observationRenderer.addBreak(3, 4, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 12,new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));

          observationRenderer.addBreak(2, 3, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 9,new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));

          observationRenderer.addBreak(0, 2, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 6,new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100,100,100])),new Color([0,0,0,0])));

          
          //build a legend for the temporal renderer using the template picker
          var symbols = arrayUtils.map(observationRenderer.infos,function(info){
            return  {label: info.minValue + " - " + info.maxValue,symbol:info.symbol};
          });
          symbols.reverse(); //flip the array so the lowest magnitude symbol displays on top
   
          var infos = [
            { minAge: 48, maxAge: Infinity, color: new dojo.Color([255,0,0])},
            { minAge: 24, maxAge: 48, color: new dojo.Color([49,154,255])},
            { minAge: 0, maxAge: 24, color: new dojo.Color([255,255,8])}
          ];
         
          var ageSymbols = [];
          ageSymbols.push({label: "Less than 1 month",symbol: new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([255,0,0])).setWidth(10)});
          ageSymbols.push({label: "1 - 6 months",symbol: new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([49,154,255])).setWidth(10)});
          ageSymbols.push({label: "6+ months",symbol: new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([255,255,8])).setWidth(10)});

          var legend = new TemplatePicker({
            items : symbols,
            rows: 7,
            columns: 1
          }, "magnitudeDiv");
          legend.startup();     

          var legend2 = new TemplatePicker({
            items : ageSymbols,
            rows: 3,
            columns: 1
          }, "ageDiv");
          legend2.startup();   
          
          var ager = new TimeClassBreaksAger(infos, TimeClassBreaksAger.UNIT_WEEKS);
          var renderer = new TemporalRenderer(observationRenderer, null, null, ager);
          featureLayer.setRenderer(renderer);

五、SimpleRenderer（简单符号渲染）

1、简单富豪渲染是最简单的符号化渲染方式，对虽有要素使用同一种符号，只需要设置一个符号然后赋值给简单符号渲染器即可

2、使用案例

        var facilityPointSymbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_SQUARE, 
          20,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([89,95,35]), 2
          ),
          new Color([130,159,83,0.40])
        ); 

        var incidentPointSymbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE, 
          16,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([89,95,35]), 2
          ),
          new Color([130,159,83,0.40])
        );  

        incidentsGraphicsLayer = new GraphicsLayer();
        
        var incidentsRenderer = new SimpleRenderer(incidentPointSymbol);
        incidentsGraphicsLayer.setRenderer(incidentsRenderer);

六、总结

简单符号、唯一值、分级渲染用的比较多，使用的过程几乎都是一样，代码参考官网，也很容易理解。FeatureLayer在加载服务是地图服务，地图服务的单个图层，服务器端渲染也是这样。