04 在地图上添加主页、定位、鹰眼图和比例尺控件

      在上一篇文章中我们学习了如何创建一个简单的地图，那接下来，我们学习如何给创建好的地图上添加一些基本的空间，最终效果如下图所示：

      由上图可以看出，我们在地图上添加了主页、定位、鹰眼图以及比例尺控件，下面将详细介绍如何添加：

1 主页按钮的添加

添加主页按钮的前提是我们要创建一个存放主页按钮的div标签，并设置它的样式，比如位置、大小等：

<div id="map">
    <div id="HomeButton"></div>
</div>

主页按钮的样式：

#HomeButton{
    position: absolute;
    top: 95px;
    left: 20px;
    z-index: 50;
}

创建好存放的容器以及设置好容器的样式之后，我们通过“esri/dijit/HomeButton”这个模块来创建我们的主页按钮，这里面需要将存放主页按钮容器的id属性值传给构造函数，实例化一个主页按钮控件：

var home=new HomeButton({
    map:map
},"HomeButton");
home.startup();

2 定位控件的添加

添加定位控件的流程和上述添加主页按钮一致，也是创建容器，设置容器样式，再添加相应的模块来实例化一个定位控件，具体代码如下：

<div id="map">
    <div id="HomeButton"></div>
    <div id="LocateButton"></div>
</div>

样式文件：

#LocateButton{
    position: absolute;
    top: 140px;
    left: 20px;
    z-index: 50;
}

实例化一个定位控件：

var geoLocate=new LocateButton({
    map:map
},"LocateButton");
geoLocate.startup();

3 添加鹰眼图控件

添加鹰眼图功能无需创建一个容器，只需把相应的模块引入，然后实例化一个鹰眼图就可以，相关代码如下：

var overviewmapdijit=new OverviewMap({
    map:map,
    visible:true,
    attachTo:"bottom-right"
});

并且我们可以参考其相对应的API文档，设置鹰眼图的初始显示状态、显示位置等。

4 添加比例尺

步骤和添加鹰眼图一致，也无需创建容器，只需引入模块后实例化一个比例尺控件即可，如下：

var scalebar=new Scalebar({
    map:map,
    scalebarUnit:"dual"
});

至此为止，地图上已经添加了四个控件，其实地图上添加控件基本是添加“esri/dijit”目录下的小部件，我们还可以自己添加图例等部件，下面是完整的代码文档：

<!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>Simple Map</title>
        <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
        <style>
            html, body, #map {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #HomeButton{
                position: absolute;
                top: 95px;
                left: 20px;
                z-index: 50;
            }
            #LocateButton{
                position: absolute;
                top: 140px;
                left: 20px;
                z-index: 50;
            }
        </style>
        <script src="https://js.arcgis.com/3.25/"></script>
        <script>
        var map;
        require(["esri/map",
            "esri/dijit/HomeButton",
            "esri/dijit/LocateButton",
            "esri/dijit/OverviewMap",
            "esri/dijit/Scalebar",
            "dojo/domReady!"], function(Map,HomeButton,LocateButton,OverviewMap,Scalebar) {


            //创建地图
            map = new Map("map", {
                basemap: "osm", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
                center: [104.072259,30.663527], // longitude, latitude
                zoom: 10
            });

            //创建主页按钮
            var home=new HomeButton({
                map:map
            },"HomeButton");
            home.startup();

            //创建当前位置定位控件
            var geoLocate=new LocateButton({
                map:map
            },"LocateButton");
            geoLocate.startup();

            //创建鹰眼图控件
            var overviewmapdijit=new OverviewMap({
                map:map,
                visible:true,
                attachTo:"bottom-right"
            });
            overviewmapdijit.startup();

            //创建比例尺控件
            var scalebar=new Scalebar({
                map:map,
                scalebarUnit:"dual"
            });
        });
        </script>
    </head>
    <body>
        <div id="map">
            <div id="HomeButton"></div>
            <div id="LocateButton"></div>
        </div>
    </body>
</html>

根据不同的要求，用户可能需要实现不同的功能需求，具体的功能可以参考API文档进行开发。

 

posted @ 2018-09-11 21:58  X北辰北  阅读(517)  评论(0)  编辑  收藏  举报