（七）ArcGIS JS 唯一值渲染
目录
前言
我们在使用ArcGIS JS API时，会遇到地图要素按照某一属性不同值区别显示的需求。在ArcGIS JS 中通过唯一值渲染完成针对某（些）字段的不同属性值的渲染
准备
- 在本地部署ArcGIS JS API/调用在线的API
- 发布好的动态地图服务
- 渲染图层准备
思路
- 定义要素图层用来承载渲染结果
- 定义默认渲染符号
- 定义唯一值渲染实例（声明渲染字段）
- 设置字段的渲染方式
- 要素图层加载渲染结果
代码实现
<!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>运行结果
- 渲染前
- 渲染后
注意问题
ArcGIS JS API 文档：https://developers.arcgis.com/javascript/3/jsapi/uniquevaluerenderer-amd.html
参考：http://blog.csdn.net/lovecarpenter/article/details/52672046#21需求一唯一值渲染
转载自：https://blog.csdn.net/idomyway/article/details/79283425
