arcgis api for javascript 學習（四）地圖的基本操做

時間 2019-12-10

標籤 arcgis api javascript 學習地圖基本欄目 JavaScript 简体版

原文原文鏈接

一、文章講解的爲地圖的平移、放大、縮小、前視圖、後視圖以及全景視圖的基本功能操做javascript

二、主要用到的是arcgis api for javascript中Navigation的用法，代碼以下：css

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