arcGis 基本操作（放大、缩小、漫游、上一屏、下一屏、全屏、停止操作）

最新推荐文章于 2025-05-21 20:37:38 发布

TuncleT

最新推荐文章于 2025-05-21 20:37:38 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： arcGis

本文链接：https://blog.youkuaiyun.com/TuncleT/article/details/80482460

arcGis 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于ArcGIS API的地图应用程序开发实例，详细展示了如何利用JavaScript加载地图、设置地图样式及功能，包括缩放、漫游等基本交互操作，并集成了轨迹回放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>地图</title>
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.22/3.22/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.22/3.22/esri/css/esri.css">
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.22/3.22/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="css/map.css">

    <script src="js/jquery.min.js"></script>
    <script src="http://localhost/arcgis_js_api/library/3.22/3.22/init.js"></script>
l
    <script>
        dojo.require("esri.map");
        dojo.require("esri.layers.FeatureLayer");
        dojo.require("esri.layers.ArcGISDynamicMapServiceLayer");
        dojo.require("esri.layers.ArcGISTiledMapServiceLayer");
        dojo.require("esri.layers.DynamicLayerInfo");
        dojo.require("esri.layers.LayerDataSource");
        dojo.require("esri.layers.LayerDrawingOptions");
        dojo.require("esri.layers.TableDataSource");
        dojo.require("esri.Color");
        dojo.require("esri.renderers.SimpleRenderer");
        dojo.require("esri.geometry.Extent");
        dojo.require("esri.geometry.Point");
        dojo.require("esri.symbols.PictureMarkerSymbol");
        dojo.require("esri.symbols.SimpleFillSymbol");
        dojo.require("esri.geometry.Polyline");
        dojo.require("esri.SpatialReference");
        dojo.require("esri.symbols.SimpleLineSymbol");
        dojo.require("esri.symbols.SimpleMarkerSymbol");
        dojo.require("esri.graphic");
        dojo.require("esri.toolbars.draw");
        dojo.require("esri.toolbars.navigation");
        dojo.require("esri.tasks.IdentifyTask");
        dojo.require("esri.tasks.IdentifyParameters");
        dojo.require("esri.tasks.FindParameters");
        dojo.require("esri.tasks.FindTask");
        dojo.require("dojo.dom");
        dojo.require("dojo.dom-construct");
        dojo.require("dojo.dom-style");
        dojo.require("dojo.query");
        dojo.require("dojo.on");
        dojo.require("dojo.domReady!");
        dojo.require("dojo.parser");
        dojo.require("dojo._base.array");
        dojo.require("dojo.dnd.Source");
        dojo.require("dijit.registry");
        dojo.require("dijit.Toolbar");
        dojo.require("dijit.form.Button");
        dojo.require("dijit.layout.ContentPane");


        dojo.require("dijit.layout.ContentPane");
    </script>


    <script type="text/javascript" src="js/Class.js"></script>
    <script type="text/javascript" src="js/toolbar.js"></script>

    <script src="js/functions.js"></script>
</head>

<body class="claro" id="xining">

<div id="mapDiv" style=";width:92%; height:70%;border:1px solid dodgerblue;float:left;">
    <div style="position:absolute;z-index: 1;top:2%;right:9%;border:1px blue solid;display: none;" id="trailFun">
        轨迹回放<br/>

        <button id="PlayTool" class="btn btn-default btn-sm" >开启</button>
        <button id="PauseTool" class="btn btn-default btn-sm" disabled="disabled">暂停</button>
        <button id="NextTool" class="btn btn-default btn-sm" disabled="disabled" >继续</button>
        <button id="BackTool" class="btn btn-default btn-sm" disabled="disabled">起点</button>
        <button id="DropTool" class="btn btn-default btn-sm" >清除</button>

    </div>
    
<div id="mapdivQuery" style="width: 8%;float: left;">
    <form>
        <div>
            <a id="zoomin" class="btn btn-default btn-sm" style="width: 98%;">放大</a>
        </div>
        <div>
            <a id="zoomout" class="btn btn-default btn-sm" style="width: 98%;">缩小</a>
        </div>
        <div>
            <a id="zoomfullext" class="btn btn-default btn-sm" style="width: 98%;">全图</a>
        </div>
        <div>
            <a id="zoomprev" class="btn btn-default btn-sm" style="width: 98%;">上一屏</a>
        </div>
        <div>
            <a id="zoomnext" class="btn btn-default btn-sm" style="width: 98%;">下一屏</a>
        </div>
        <div>
            <a id="pan" class="btn btn-default btn-sm" style="width: 98%;">漫游</a>
        </div>
        <div>
            <a id="deactivate" class="btn btn-default btn-sm" style="width: 98%;">停止操作</a>
        </div>
        <div>
            <a id="tuceng" class="btn btn-default btn-sm" style="width: 98%;">图层控制</a>
        </div>
        <!--<div>-->
        <!--<a id="carQuery" class="btn btn-default btn-sm" style="width: 98%;">车辆查询</a>-->
        <!--</div>-->
        <div>
            <input id="layer" style="width: 98%;">
        </div>
        <div>
            <a id="Btn" class="btn btn-default btn-sm" style="width: 98%;">管网查询</a>
        </div>
        <div>
            <a id="trailBtn" class="btn btn-default btn-sm" style="width: 98%;">轨迹回放</a>
        </div>
    </form>
</div>
<script>

var toolbar = Class.extend({
    init: function (m) {
        this.map = m;
        this.navToolbar = new esri.toolbars.Navigation(map);
    },
    zoomIn:function(){
        this.navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
    },
    zoomOut:function(){
        this.navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);
    },
    NextExtent:function(){
        this.navToolbar.zoomToNextExtent();
    },
    prevExtent:function(){
        this.navToolbar.zoomToPrevExtent();
    },
    zoomfullext:function(){
        this.navToolbar.zoomToFullExtent();
    },
    pan:function(){
        this.navToolbar.activate(esri.toolbars.Navigation.PAN);
    },
    deactivate:function(){
        this.navToolbar.deactivate();
    },
    toogle:function(){
        $("#feedback").toggle();
    }
});

map = new esri.Map("mapDiv", {
    center: [72921.1264111709, 58936.7318718191],
    zoom: 7,
    logo:false,
    extent: startExtent
});
var tab = new data(map);
var tools = new toolbar(map);
$("#zoomin").click(function(){
    tools.zoomIn();
});
$("#zoomout").click(function(){
    tools.zoomOut();
});
$("#zoomfullext").click(function(){
    tools.zoomfullext();
});
$("#zoomprev").click(function(){
    tools.prevExtent();
});
$("#zoomnext").click(function(){
    tools.NextExtent();
});
$("#pan").click(function(){
    tools.pan();
});
$("#deactivate").click(function(){
    tools.deactivate();
});

</script></body></html>