（八）ArcGIS JS 分类渲染

古城微笑少年丶 2021-09-14 17:34 520阅读 0赞

### 前言 ###

分类渲染和唯一值渲染的思路基本相同，他们的区别是唯一值渲染针对的是属性字段中的值，而分类渲染针对的是属性字段中值得范围。分类渲染是指要素按照我们对属性字段分类范围进行渲染

### 准备 ###

*  在本地部署ArcGIS JS API/调用在线的API  
    
    
     *  [本地部署ArcGIS JS API][ArcGIS JS API]
 *  发布好的动态地图服务  
    
    
     *  [http://blog.csdn.net/idomyway/article/details/79232011][http_blog.csdn.net_idomyway_article_details_79232011]
 *  渲染图层准备

![这里写图片描述][SouthEast]

### 思路 ###

*  定义要素图层用来承载渲染结果
 *  定义默认渲染符号
 *  定义分类渲染实例（声明渲染字段）（按照男女比例）
 *  设置字段的渲染方式
 *  要素图层加载渲染结果

### 代码实现 ###

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>UniqueValueRenderer</title>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
        <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
        <style type="text/css"> .MapClass{ width:100%; height:600px; border:1px solid #000; } </style>
        <script type="text/javascript"> require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/on", "dojo/dom", "dojo/colors", "esri/symbols/SimpleFillSymbol", "esri/layers/FeatureLayer", "esri/symbols/SimpleLineSymbol", "esri/renderers/UniqueValueRenderer", "dojo/domReady!"], function (Map, ArcGISDynamicMapServiceLayer,on,dom,Color,SimpleFillSymbol, FeatureLayer, SimpleLineSymbol,UniqueValueRenderer) { var map = new esri.Map("MyMapDiv"); var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/firstTest/uniqueRenderMap/MapServer"); map.addLayer(layer); //获得id为btn的DOM元素 var btn=dom.byId("btn"); //绑定相应的事件 on(btn,"click",function(){ //定义一个要素图层 var featureLayer = new FeatureLayer( "http://localhost:6080/arcgis/rest/services/firstTest/uniqueRenderMap/MapServer/0", { mode:FeatureLayer.MODE_SNAPSHOT, outFields: ["*"] }); //定义线符号 var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3); //定义面符号 var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color("#FFFFCC")); //定义唯一值渲染器，对字段alias进行渲染，fill是默认的渲染符号 var renderer = new UniqueValueRenderer(fill, "position"); //设置渲染的方式 renderer.addValue("东部", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([246,73,70, 0.5]))); renderer.addValue("中部", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([2,98,120, 0.5]))); renderer.addValue("西部",new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([154,202,238, 0.5]))); featureLayer.setRenderer(renderer); map.addLayer(featureLayer); }) }); </script>
    </head>
    <body>
    <div id="MyMapDiv" class="MapClass"></div>
    <button id="btn">渲染</button>
    </body>
    </html>

### 运行结果 ###

*  渲染前

![这里写图片描述][SouthEast 1]  
\- 渲染后

![这里写图片描述][SouthEast 2]

### 注意问题 ###

参考：[http://blog.csdn.net/lovecarpenter/article/details/52672046][http_blog.csdn.net_lovecarpenter_article_details_52672046]

[ArcGIS JS API]: http://blog.csdn.net/idomyway/article/details/78648907
[http_blog.csdn.net_idomyway_article_details_79232011]: http://blog.csdn.net/idomyway/article/details/79232011
[SouthEast]: /images/20210726/668b40ba421c4286904a0502b4c5f125.png
[SouthEast 1]: /images/20210726/0057a705b56f443883431dc8edf1fd65.png
[SouthEast 2]: /images/20210726/7e26995c0d1643359ef380e40aacf071.png
[http_blog.csdn.net_lovecarpenter_article_details_52672046]: http://blog.csdn.net/lovecarpenter/article/details/52672046