Legend

Legend控件用于动态显示全部或者部分图层的标签和符号信息，图例控件支持下面四种图层： ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayerFeature,KMLLayer
  1. 图例的主要方法

图片说明

2.图例示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图例</title>
    <link rel="stylesheet" type="text/css"
          href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"/>
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <style type="text/css">
        .MapClass {
            width: 100%;
            height: 600px;
            border: 1px solid #000;
            position: relative;
        }
        #legendDiv {
            width: 150px;
            height: 250px;
            border: 1px solid black;
            border-bottom: 0;
            border-right: 0;
            background-color: pink;
            position: absolute!important;
            right: 0;
            bottom: 0;
            z-index: 999;
        }
    </style>
    <script type="text/Javascript">
        require(["esri/map","esri/dijit/OverviewMap","esri/dijit/Scalebar", "esri/dijit/Bookmarks", "esri/dijit/BookmarkItem", "dojo/on", "esri/dijit/Legend"], function (Map, OverviewMap, Scalebar, Bookmarks, BookmarkItem, on, Legend) {
            var MyMap = new Map("MyMapDiv",{
                logo:false //取消esri的logo
            });
            var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/TestServer/MyMapService/MapServer");
            MyMap.addLayer(layer);
            var MapViewer = new OverviewMap({
                attachTo: "top-right",//鹰眼显示位置
                maximizeButton: true,//显示最大化按钮
                map: MyMap,//设置显示鹰眼图的基础图
                visible: true,//显示鹰眼图可见按钮
                width: 150,//设置鹰眼的div大小
                height: 150
            });
            MapViewer.startup();

            var scale = new Scalebar({
                map: MyMap,
                attachTo: "bottom-left",
                scalebarUnits: "english"
            });
            scale.show();

            //创建书签跳转的位置
            var bookmarkItem = new BookmarkItem({
                "extent": {//范围
                    "xmin": 510380,//左下角x
                    "ymin": 3985438,//左下角y
                    "xmax": 510836,//右上角x
                    "ymax": 3985752,//右上角y
                    "spatialReference": {//空间参考
                        "wkid": 2437
                    }
                },
                "name": "San Diego"
            });

            //创建书签
            var books = new Bookmarks({
                map:MyMap,
                editable: true
            }, document.getElementById("bookmarks"));
            books.addBookmark(bookmarkItem);
            books.show();
            //地图加载初始化窗口大小
            on(MyMap, "load", function () {
                MyMap.infoWindow.resize(250, 100);
            });

            on(MyMap, "click", function (e) {
                var lat = e.mapPoint.x;
                var lon = e.mapPoint.y;
                //设置标题
                MyMap.infoWindow.setTitle("Coordinates");
                //设置内容
                MyMap.infoWindow.setContent('<div style="background-color:lightblue; color: white;">' + "lat/lon:" + lat.toFixed(2) + "," + lon.toFixed(2) + "," + "<br>screen x/y:" + e.screenPoint.x + "," + e.screenPoint.y + "</div>");
                //显示
                MyMap.infoWindow.show(e.mapPoint, MyMap.getInfoWindowAnchor(e.screenPoint));
            });
            //图例：
            var legend = new Legend({
                map: MyMap
            }
            , document.getElementById("legendDiv"));
            console.log(legend);
            legend.startup();
        });
    </script>
</head>
<body>
    <div id="MyMapDiv" class="MapClass">
        <div id="legendDiv"></div>
    </div>
    <div id="bookmarks"></div>
</body>
</html>

结果：

图片说明