ArcGIS Server 开发之鹰眼地图的实现

鹰眼简单点说就是地图的联动，鹰眼的全称是OverviewMap，在ERSI提供的API包中，在dijit中进行类的调用。查了很多的资料，总结一下：

具体的代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鹰眼和比例尺</title>
<!-- 
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> 
<script src="http://js.arcgis.com/3.7/"></script>-->
      <!--<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.11/3.11/dijit/themes/tundra/tundra.css"/>-->
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.11/3.11/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.11/3.11/init.js"></script>
    <script src="dojo/jsapi_vsdoc12_v38.js"></script>
 
<style>
html, body, #map {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
#BasemapToggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 50;
}
#HomeButton {
    position: absolute;
    top: 95px;
    left: 20px;
    z-index: 50;
}
</style>
 
<script>
    //引入需要的类
    dojo.require("esri.map");
    dojo.require("esri.dijit.BasemapToggle");
    dojo.require("esri.dijit.HomeButton");
    dojo.require("esri.dijit.OverviewMap");
    dojo.require("esri.dijit.Scalebar");

    //定义全局变量
    var map;

    //准备初始化
    dojo.ready(init);

    //初始化方法
    function init() {
        //创建地图
        map = new esri.Map("map", {
            center: [121.48, 31.25],
            zoom: 8,
            basemap: "streets"
        });

        //卫星图切换   
        var toggle = new esri.dijit.BasemapToggle({
            map: map,
            
            basemap: "satellite"
        }, "BasemapToggle");
        toggle.startup();

        //HOME按钮
        var home = new esri.dijit.HomeButton({
            map: map
        }, "HomeButton");
        home.startup();
        //比例尺
        var scalebar = new esri.dijit.Scalebar({
            map: map,
            attachTo: "bottom-right",
            width:10,
            // "dual" displays both miles and kilmometers
            // "english" is the default, which displays miles
            // use "metric" for kilometers
            scalebarUnit: "dual"
        });
        
        //鹰眼小地图
        var overviewMap = new esri.dijit.OverviewMap({
            map: map,
            visible: true,           // 初始化可见，默认为false  
            attachTo: "bottom-left",   // 默认右上角  
            width: 250,              // 默认值是地图高度的 1/4th  
            height: 150,             // 默认值是地图高度的 1/4th   
            opacity: 0.5,            // 透明度 默认0.5  
            maximizeButton: true,    // 最大化,最小化按钮，默认false  
            expandFactor: 2,         //概览地图和总览图上显示的程度矩形的大小之间的比例。默认值是2，这意味着概览地图将至少是两倍的大小的程度矩形。  
            color: "#000000"         // 默认颜色为#000000  
        });
        overviewMap.startup();
    }

</script>
</head>
<body>
    <div id="map">
        <div id="BasemapToggle"></div>
        <div id="HomeButton"></div>
    </div>
</body>
</html>

运行截图：

　　

 

posted @ 2016-05-08 23:38  easten  阅读(3174)  评论(0)  编辑  收藏  举报