ArcGIS API for JavaScript（一）第一个hello world

短命女 2024-04-17 16:52 66阅读 0赞

## 一、认识ArcGIS API for JavaScript ##

ArcGIS API for JavaScript是ESRI根据JavaScript技术实现的调用ArcGIS Server REST API接口的一组脚本。

通过ArcGIS API for JavaScript可以将ArcGIS Server提供的地图资源和其它资源(ArcGIS Online)嵌入到Web应用中。

## 二、部署ArcGIS API for JavaScript的开发环境 ##

一般可以去官网下载离线资源，通过iis或者tomcat在本地进行离线部署，先比与访问在线资源的方式，速度上得到了提示，我这里先暂时跳过这个步骤，后续在部署本地环境

## 三、第一个hello world 案例 ##

先通过一个最简单的hello world 来认识下ArcGIS API for JS

ESRI提供了在线的ArcGIS API for JavaScript，我们可以直接引入即可，无须下载按照。

**1、引入文件css和js**

<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    
    
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/soria/soria.css">
    
    
    
    <script src="http://js.arcgis.com/3.9/"></script>

dojo小部件的显示情况：  
https://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html

**2、新增一个地图div容器**

在下增加一个

元素，用于显示地图。

同时还可以通过控制地图div元素来达到控制地图展示效果

<style>
            html,body,#mapDiv
            {
                padding: 0;
                margin: 0;
                height: 100%;
            }
        </style>

**3、加载地图模块**

<script>
        require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","dojo/domReady!"],
            function(Map,ArcGISTiledMapServiceLayer){
                //以下是创建地图与加入地图的代码
    
                //使用Map类（加载子esri/map模块）来创建一个新的地图
                var map = new Map("mapDiv");
                //指定一个地图服务的URL
                var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
                //根据地图服务的URL创建一个地图切片图层
                var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL,{displayLevels:[0,1,2,3,4,5,6,7]});
                //将创建好的地图切片图层加入到地图中
                map.addLayer(agoLayer);
    
            });
    </script>

**require**：Dojo提供的全局require函数，用于加载  
ArcGIS API for JS 资源。require函数具有两个参数，第一个参数是依赖项，第二个参数是回调函数。  
其中第一个参数分为两类，一类是依赖类，一类是插件，dojo/domReady！这类后面具有"!"符号的表示是插件。

**esri/map**：用于地图、几何对象、图像与符号。

**esri/tasks/locator**：用于地理编码。

完成代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"/>
        <title>HELLO WORLD</title>
        
        <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    
        
        <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
        <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/nihilo/nihilo.css">
        <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/soria/soria.css">
    
        
        <style>
            html,body,#mapDiv
            {
                padding: 0;
                margin: 0;
                height: 100%;
            }
        </style>
    
        
        <script src="http://js.arcgis.com/3.9/"></script>
    </head>
    <body >
        <div id="mapDiv"></div>
    </body>
    
    
    <script>
        require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","dojo/domReady!"],
            function(Map,ArcGISTiledMapServiceLayer){
                //以下是创建地图与加入地图的代码
    
                //使用Map类（加载子esri/map模块）来创建一个新的地图
                var map = new Map("mapDiv");
                //指定一个地图服务的URL
                var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
                //根据地图服务的URL创建一个地图切片图层
                var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL,{displayLevels:[0,1,2,3,4,5,6,7]});
                //将创建好的地图切片图层加入到地图中
                map.addLayer(agoLayer);
    
            });
    </script>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5OTE0ODM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5OTE0ODM3_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f7fde82305404cb1ab20cd5019ebb8bb.png