zoukankan html css js c++ java

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

查看全文

相关阅读:
命令行查看memcached的运行状态（转载）
有类与无类路由下的路由匹配原则（转载）
数据结构实验之求二叉树后序遍历和层次遍历（SDUT 2137）
还是畅通工程（HDU 1233）
还是畅通工程（HDU 1233）
Financial Management（SDUT 1007）
Financial Management（SDUT 1007）
二分图的最大匹配、完美匹配和匈牙利算法
 二分图的最大匹配、完美匹配和匈牙利算法
 求二叉树的层次遍历（SDUT 2824）

原文地址：https://www.cnblogs.com/yxd000/p/11250152.html

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

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