arcgis api for javascript 学习（四） 地图的基本操作

时间：2021-07-27 10:11:04

1、文章讲解的为地图的平移、放大、缩小、前视图、后视图以及全景视图的基本功能操作

arcgis api for javascript 学习（四） 地图的基本操作

2、主要用到的是arcgis api for javascript中Navigation的用法，代码如下：

<!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"

        });

        //新建一个Navigation对象，参数是map对象

        var navtoolbar=new Navigation(map);

         document.getElementById('pan').onclick=function(){

         navtoolbar.activate(Navigation.PAN);// 平移

         };

         document.getElementById('zoomin').onclick=function(){

         navtoolbar.activate(Navigation.ZOOM_IN);//放大

         };

         document.getElementById('zoomout').onclick=function(){

         navtoolbar.activate(Navigation.ZOOM_OUT);//缩小

         };

         document.getElementById('prev').onclick=function(){

         navtoolbar.zoomToPrevExtent();//前视图

         };

         document.getElementById('next').onclick=function(){

         navtoolbar.zoomToNextExtent();//后视图

         };

         document.getElementById('zoomtofull').onclick=function(){

         navtoolbar.zoomToFullExtent();//全景视图

         };

    });

</script>

</body>

</html>

3、注意：放大缩小按键分别为拉框显示放大，缩小的作用！

相关文章