arcgis api for javascript learning (d) of the basic operation map

1, the article is to explain the map pan, zoom in, zoom out, the basic function of the front view, rear view and a panoramic view of the operation

2, is mainly used in Navigation arcgis api for javascript usage code is as follows:

<!DOCTYPE HTML>
<html>
<head>
    <title>显示地图的基本操作</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.29/"></script>
</head>
<body>
<div id='map'>
</div>
<div id='Navigation'>
    <input type='button' id='pan' value='平移' />
    <input type='button' id='zoomin' value='放大' />
    <input type='button' id='zoomout'value='缩小' />
    <input type='button' id='prev'value='前视图' />
    <input type='button' id='next'value='后视图' />
    <input type='button' id='zoomtofull'value='全景视图' />

</div>
<script>
    require([
        "esri/map",
        "esri/toolbars/navigation",
        "dojo/domReady!"], function(
            Map,
            Navigation) {
        var map = new Map("map", {
            center: [116.403119, 39.915599 ], 
            Zoom: 2 , 
            Basemap: " OSM " 
        }); 
        // Create a Navigation object parameters are object map 
        var navtoolbar = new new Navigation (map); 

         document.getElementById ( ' PAN ' ) .onclick = function () { 
         navtoolbar.activate (Navigation.PAN); // translate 
         }; 
         document.getElementById ( ' ZoomIn ' ) .onclick = function () { 
         navtoolbar.activate (Navigation.ZOOM_IN);// amplification 
         }; 
         document.getElementById ( ' zoomOut ' ) .onclick = function () { 
         navtoolbar.activate (Navigation.ZOOM_OUT); // refine 
         }; 
         document.getElementById ( ' PREV ' ) .onclick = function () { 
         navtoolbar .zoomToPrevExtent (); // front view 
         }; 
         document.getElementById ( ' Next ' ) .onclick = function (){
         navtoolbar.zoomToNextExtent (); // a rear view
          }; 
         document.getElementById ( ' zoomtofull ' ) .onclick = function () { 
         navtoolbar.zoomToFullExtent (); // panoramic view 
         }; 

    }); 

</ Script > 
</ body > 
</ HTML >

3. Note: The zoom buttons are displayed enlarged pull box, a reduced effect!

arcgis api for javascript learning (d) of the basic operation map

Guess you like