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>结果：
