ArcGIS API for js Legend（图例）

1、说明

有关怎么把ArcGIS API for js部署到IIS上，请参考我上面的写的博客https://www.cnblogs.com/net064/p/10302660.html

2、运行效果

ArcGIS API for js Legend（图例）-LMLPHP

3、html代码

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

  <title>Map with legend</title>

      <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/dojo/dijit/themes/claro/claro.css"/>

<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/esri/css/esri.css" />

  <style>

    html, body {

      height: 97%;

      width: 98%;

      margin: 1%;

    }

    #rightPane {

      width: 20%;

    }

    #legendPane {

      border: solid #97DCF2 1px;

    }

  </style>

      <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.3/jsapi/init.js"></script>

  <script>

      var map;

      require([

        "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",

        "dojo/_base/array", "dojo/parser",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",

        "dijit/layout/AccordionContainer", "dojo/domReady!"

      ], function (

        Map, FeatureLayer, Legend,

        arrayUtils, parser

      ) {

          parser.parse();

          map = new esri.Map("map", {

              basemap: "topo",

              center: [-96.53, 38.374],

              zoom: 13

          });

          var rivers = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1", {

              mode: FeatureLayer.MODE_ONDEMAND,

              outFields: ["*"]

          });

          var waterbodies = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0", {

              mode: FeatureLayer.MODE_ONDEMAND,

              outFields: ["*"]

          });

          //add the legend

          map.on("layers-add-result", function (evt) {

              var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {

                  return { layer: layer.layer, title: layer.layer.name };

              });

              if (layerInfo.length > 0) {

                  var legendDijit = new Legend({

                      map: map,

                      layerInfos: layerInfo

                  }, "legendDiv");

                  legendDijit.startup();

              }

          });

          map.addLayers([waterbodies, rivers]);

      });

  </script>

</head>

<body class="claro">

<div id="content"

     data-dojo-type="dijit/layout/BorderContainer"

     data-dojo-props="design:'headline', gutters:true"

     style="width: 100%; height: 100%; margin: 0;">

  <div id="rightPane"

       data-dojo-type="dijit/layout/ContentPane"

       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit/layout/AccordionContainer">

      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"

           data-dojo-props="title:'Legend', selected:true">

        <div id="legendDiv"></div>

      </div>

      <div data-dojo-type="dijit/layout/ContentPane"

           data-dojo-props="title:'Pane 2'">

        This pane could contain tools or additional content

      </div>

    </div>

  </div>

  <div id="map"

       data-dojo-type="dijit/layout/ContentPane"

       data-dojo-props="region:'center'"

       style="overflow:hidden;">

  </div>

</div>

</body>

</html>

其中的代码

map = new esri.Map("map", {
basemap: "topo",
center: [-96.53, 38.374],
zoom: 13
});

也可以改写成如下面的格式

MyMap = new esri.Map("map", {center: [-96.53, 38.374],zoom: 13});
MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
("http://localhost/arcgis/rest/services/DZDT2012/MapServer");
MyMap.addLayer(MyTiledMapServiceLayer);

ESRI

ArcGIS API for js Legend（图例）