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

最新推荐文章于 2025-03-10 16:45:15 发布

bulletproofcao

最新推荐文章于 2025-03-10 16:45:15 发布

阅读量6.5k

点赞数 3

分类专栏： arcgis二次开发 arcgis for javascript 文章标签： javascript arcgis 鹰眼比例尺图例

本文链接：https://blog.youkuaiyun.com/u011037214/article/details/50905565

版权

本文是ArcGIS API for JavaScript开发教程的第二部分，主要介绍如何集成和使用地图控件，包括鹰眼、比例尺和图例。通过实例代码展示，帮助开发者实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,

最低0.47元/天解锁文章