ArcGIS API for JavaScript开发教程系列(二)之地图控件

来源：互联网发布：协议软件是什么编辑：程序博客网时间：2024/05/20 09:23

ArcGIS API for JavaScript开发教程系列(二)之地图控件

集成地图常用的控件：鹰眼、比例尺、图例，本实例就能实现了

javascript部分：

var map;        require([          "esri/map", "esri/dijit/OverviewMap", "esri/dijit/Scalebar", "esri/arcgis/utils",          "esri/layers/FeatureLayer", "esri/dijit/Legend", "dojo/_base/array",          "dojo/parser",          "dijit/layout/BorderContainer", "dijit/layout/ContentPane","dijit/TitlePane",          "dijit/layout/AccordionContainer","dojo/domReady!"        ], function (          Map, OverviewMap, Scalebar, arcgisUtils, FeatureLayer, Legend, arrayUtils,          parser          ) {            parser.parse();            //创建地图，并添加"topo"为底图            map = new Map("map", {                basemap: "topo",                center: [-96.53, 38.374],                zoom: 13            });            //新建rivers图层            var rivers = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1", {                mode: FeatureLayer.MODE_ONDEMAND,                outFields: ["*"]            });            //新建waterbodies图层            var waterbodies = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0", {                mode: FeatureLayer.MODE_ONDEMAND,                outFields: ["*"]            });            //把图层加入到地图            map.addLayers([waterbodies, rivers]);           //添加图例            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();                }            });           //添加鹰眼图            var overviewMapDijit = new OverviewMap({                //设置鹰眼控件的地图                map: map,                //设置是否可见                visible: true,                //鹰眼控件放置的位置                attachTo:"bottom-left"            });            overviewMapDijit.startup();            //添加比例尺            var scalebar = new Scalebar({                map: map,                //比例尺单位                scalebarUnit: "dual",                //放置的位置                attachTo:"bottom-left"            });                 });

css部分：

 html, body { height: 97%; width: 98%; margin: 1%; padding: 0; }        #rightPane {            width:20%;        }        #legendPane {            border:solid #97DCF2 1px;        }

html部分：

<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 id="bookmarks"></div>    </div>

这里是完整的代码：

<!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>Overview Map</title>     <!--引入-->    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">    <style>      html, body { height: 97%; width: 98%; margin: 1%; padding: 0; }        #rightPane {            width:20%;        }        #legendPane {            border:solid #97DCF2 1px;        }    </style>    <script src="https://js.arcgis.com/3.16/"></script>    <script>        var map;        require([          "esri/map", "esri/dijit/OverviewMap", "esri/dijit/Scalebar", "esri/arcgis/utils",          "esri/layers/FeatureLayer", "esri/dijit/Legend", "dojo/_base/array",          "dojo/parser",          "dijit/layout/BorderContainer", "dijit/layout/ContentPane","dijit/TitlePane",          "dijit/layout/AccordionContainer","dojo/domReady!"        ], function (          Map, OverviewMap, Scalebar, arcgisUtils, FeatureLayer, Legend, arrayUtils,          parser          ) {            parser.parse();            //创建地图，并添加"topo"为底图            map = new Map("map", {                basemap: "topo",                center: [-96.53, 38.374],                zoom: 13            });            //新建rivers图层            var rivers = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1", {                mode: FeatureLayer.MODE_ONDEMAND,                outFields: ["*"]            });            //新建waterbodies图层            var waterbodies = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0", {                mode: FeatureLayer.MODE_ONDEMAND,                outFields: ["*"]            });            //把图层加入到地图            map.addLayers([waterbodies, rivers]);           //添加图例            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();                }            });           //添加鹰眼图            var overviewMapDijit = new OverviewMap({                //设置鹰眼控件的地图                map: map,                //设置是否可见                visible: true,                //鹰眼控件放置的位置                attachTo:"bottom-left"            });            overviewMapDijit.startup();            //添加比例尺            var scalebar = new Scalebar({                map: map,                //比例尺单位                scalebarUnit: "dual",                //放置的位置                attachTo:"bottom-left"            });                 });    </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 id="bookmarks"></div>    </div>  </body></html>

这是最后的实现效果

这是最后的实现效果：

0 1