ArcGIS API for JavaScript(一)第一个hello world

一、认识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

<!--esri 提供的样式表,主要用于ESRI童工的小部件与组件(例如地图、信息框等)-->
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">

<!--Dojo提供的样式表,Dojo提供了4组样式,分别是claro、tundra、soria、nihilo每种是一组定义用户界面的字体、颜色与大小等设置 -->
<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">


<!--引入ArcGIS API for JavaScript-->
<script src="http://js.arcgis.com/3.9/"></script>

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

2、新增一个地图div容器

在下增加一个

元素,用于显示地图。

<div id="mapDiv"></div>

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

<!-- 地图铺满整个浏览器窗口 -->
    <style>
        html,body,#mapDiv
        {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>

3、加载地图模块

<!-- 加载地图模块并确保DOM已经引用-->
<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>
    <!--esri 提供的样式表-->
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">

    <!--Dojo提供的样式表 -->
    <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>

    <!--引入ArcGIS API for JavaScript-->
    <script src="http://js.arcgis.com/3.9/"></script>
</head>
<body >
    <div id="mapDiv"></div>
</body>

<!-- 加载地图模块并确保DOM已经引用-->
<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>

在这里插入图片描述

发布了166 篇原创文章 · 获赞 212 · 访问量 19万+

猜你喜欢

转载自blog.csdn.net/qq_29914837/article/details/100127133
今日推荐