arcgis api for javascript 学习(四) 地图的基本操作

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

arcgis api for javascript 学习(四) 地图的基本操作_第1张图片

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、注意:放大缩小按键分别为拉框显示放大,缩小的作用!

 


你可能感兴趣的:(arcgis api for javascript 学习(四) 地图的基本操作)