（七）ArcGIS JS 唯一值渲染

た入场券 2021-09-14 17:32 485阅读 0赞

### 前言 ###

我们在使用ArcGIS JS API时，会遇到地图要素按照某一属性不同值区别显示的需求。在ArcGIS JS 中通过唯一值渲染完成针对某（些）字段的不同属性值的渲染

### 准备 ###

*  在本地部署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]

### 注意问题 ###

ArcGIS JS API 文档：[https://developers.arcgis.com/javascript/3/jsapi/uniquevaluerenderer-amd.html][https_developers.arcgis.com_javascript_3_jsapi_uniquevaluerenderer-amd.html]  
参考：[http://blog.csdn.net/lovecarpenter/article/details/52672046\#21][http_blog.csdn.net_lovecarpenter_article_details_52672046_21]需求一唯一值渲染

[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/ae9693501d274c8283a2cafbea478688.png
[SouthEast 1]: /images/20210726/247a747a63844989978589a86a312cbd.png
[SouthEast 2]: /images/20210726/052b59bfefba44f5b790d6676d2a0e6e.png
[https_developers.arcgis.com_javascript_3_jsapi_uniquevaluerenderer-amd.html]: https://developers.arcgis.com/javascript/3/jsapi/uniquevaluerenderer-amd.html
[http_blog.csdn.net_lovecarpenter_article_details_52672046_21]: http://blog.csdn.net/lovecarpenter/article/details/52672046#21