利用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這個圖層,如下圖所示