利用arcgis for js的图例小工具 ,所以需要引入:dojo.require("esri.dijit.Legend"); var legendLayers = [];
function init() {
//dataurl = "";
var startExtent = new esri.geometry.Extent(107.66042800183516, 35.2383887783676, 104.28303500160375, 39.38765376928577);
map = new esri.Map("mapDiv", {
"spatialReference": { "wkid": 4326 }, //设置坐标系
logo: false, //取消地图默认的logo
extent: startExtent, //程度
zoom:7, //显示地图的级别
maxZoom:16 //最大空间等级
});
xzlayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/xx/xxService/MapServer");
//设置图层透明度
//xzlayer.setOpacity(0.6);
map.addLayer(xzlayer);
legendLayers.push({ layer: xzlayer, title: "图例" });
var legend = new esri.dijit.Legend({
map: map,
autoUpdate: true,
arrangment: esri.dijit.Legend.ALIGN_RIGHT,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
}
dojo.addOnLoad(init);
下面就是准备一个显示图例的容器,DIV,下面就是:
#tl{
z-index: 1000;
position: absolute;
right: 30px;
top: 50px;
background-color: white;
opacity: 0.9;
border: 1px solid #bcdaf5;
border-radius: 3px;
font-family: "楷体";
font-weight: 600;
color: #302e2e;
font-size: 20px;
text-align: center;
}
#Lenged {
z-index: 1000;
position: absolute;
bottom: 2px;
float: right;
right: 2px;
height: 341px;
width: 180px;
border: 1px solid #C0C0C0;
font-size: 16px;
font-family: "楷体";
font-weight: 600;
border-radius: 3px;
background-color:white;
opacity:1;
margin-right: 20px;
}
<%--图例--%>
<div id="Lenged">
<%-- ☛图例
<hr />--%>
<div id="legendDiv" style="width:100%;"></div>
</div>
这样就可以显示图例了
注意:发布的服务要有legend这个图层,如下图所示