《JavaScript构建Web和ArcGIS Server应用实战》——2.3 使用ArcGIS API for JavaScript创建应用程序的基本步骤

简介:

本节书摘来自异步社区《JavaScript构建Web和ArcGIS Server应用实战》一书中的第2章,第2.3节,作者: 【美】Eric Pimpler(派普勒) 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3 使用ArcGIS API for JavaScript创建应用程序的基本步骤

使用ArcGIS API for JavaScript创建任何GIS地图应用程序,都需要遵循一些步骤。假如想让地图成为应用程序的一部分,那么就需要你按照这些步骤来执行。在阅读本书时,我很难想象你不按照这些步骤来做会遇到怎样糟糕的情况。简而言之,你需要遵循以下步骤。

1.创建页面HTML代码。

2.引用ArcGIS API for JavaScript和样式表。

3.加载模块。

4.确保DOM可用。

5.创建地图。

6.定义页面内容。

7.页面样式。

这里仅仅是一个必需步骤的简短描述,我们将在接下来的介绍中对每个步骤进行详细说明。

2.3.1 创建Web页面HTML代码
在前面章节中,你已经掌握了HTML、CSS和JavaScript的基础概念。现在我们就来将这些技术应用到实际开发示例中去。首先你需要创建一个简单的HTML文档作为最终的地图容器。当我们开始使用ArcGIS API for JavaScript沙盒时,这些步骤就已经为你准备好了。但是,我想让你花点时间去看这些代码,从而能更好地掌握这些概念。在沙盒的左侧面板中,你看到下列示例中加粗显示的代码是引用自Web页面中基本的HTML代码,当然这里也有一些其他的HTML和JavaScript代码,但是下列代码构成一个Web页面的基本组成部分。这段代码包括几个基本的标签,包括< html >、< head >、< title >、< body >等。

<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user- scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/ themes/claro/claro.css">
  <link rel="stylesheet" href=" http://js.arcgis.com/3.7/js/esri/css/ esri.css">
  <style>
    html,body,#mapDiv{
      padding:0;
      margin:0;
      height:100%;
    }
  </style>

<script src="http://js.arcgis.com/3.7/"></script>
  <script>
    dojo.require("esri.map");

    function init(){
      var map = new esri.Map("#mapDiv",{
         center:[-56.049,38.485],
         zoom:3,
          basemap:"streets"
      });
    }
    dojo.ready(init);
    </script>

  </head>
  <body class="claro">
    <div id="mapDiv"></div>
  </body>
  </html>

2.3.2 引用ArcGIS API for JavaScript
使用ArcGIS API for JavaScript进行开发时,必须要添加样式和API引用。在沙盒中,下列几行代码已经添加到了

标签内部。
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">

<script src="http://js.arcgis.com/3.7/"></script>

< script >标签加载的是ArcGIS API for JavaScript。在编写本章时,它的当前版本是3.7。当一个新版本的API发布的时候,你需要相应地修改这个数字。< link >标签加载的是esri.css这个ESRI工具和组件的特定样式。

你可以选择性地添加一种DojoDijit主题样式。ArcGIS API for JavaScript是直接建立在DojoJavaScript框架上的。Dojo包括Claro、Tundra、Soria和Nihilo这四个预先定义的主题,它们用于控制添加到应用程序中的用户界面工具的外观样式。下列代码示例引用了Claro主题样式。

<link rel="stylesheet" href="http://js.arcgis/com/3.7/js/dojo/dijit/themes/ claro/claro.css">

其他样式可以参考下列示例代码进行引用,当然你也可以不引用任何一种样式。但是假如你添加Dojo用户界面组件(Dijits),你就需要通过加载其中的一种样式来控制组件的外观。

<link rel="stylesheet" href="http://js.arcgis/com/3.7/js/dojo/dijit/themes/ tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis/com/3.7/js/dojo/dijit/themes/ nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis/com/3.7/js/dojo/dijit/themes/ soria/soria.css">

2.3.3 加载模块
在创建地图对象之前,必须首先通过使用一个名为require()的函数来完成对地图资源的引用。

过时或者AMD Dojo
无论是使用过时的Dojo还是使用新的AMD,对于大多数开发者来说都是一件沮丧的事情。异步模型定义(AMD)是在1.7版本的Dojo中产生的。ArcGIS API for JavaScript3.4是使用新的AMD方式进行所有模块重写后的第一个版本。过时的遗产和AMD方式都可以使用,但是建议在编写任何一个新的应用程序时都使用新的AMD方式。在本书中,我们要遵守这个规定,但是我们还要意识到在3.4版本的API发布之前编写的应用程序和一些ESRI示例仍然是以老版的代码风格呈现的。

在Web页面中使用require()函数来导入资源时,ArcGIS API for JavaScript提供了很多种资源,其中包括esri/map这个在创建地图或者使用Geometry、Graphic和Symbols之前必须用到的资源。一旦提供了资源的引用,你就可以使用Map()构造函数来创建地图。下面是如何在沙盒中运行代码的要点。

在向沙盒中添加代码之前,最好先移除下列加粗显示的代码,删除的代码是使用ArcGIS API for JavaScript过时的方式编写的。以后我们打算使用新的AMD方式,在未来的沙盒版本中,可能就不需要删除这些代码了,希望ESRI会最终将这个基本代码块迁移到更新的AMD方式上去。

<script>
    dojo.require("esri.map");

    function init(){
      var map = new esri.Map("mapDiv",{
        center:[-56.049,38.485],
        zoom:3,
        basemap:"streets"
      });
    }
    dojo.ready(init);
</script>

导入的资源需要包括在一个新的< script >标签内。添加下列加粗显示行的代码到沙盒中的< script >标签内,require()函数中的参数名称可以按照你的习惯命名,但是无论是Esri还是Dojo都提供了一系列首选参数。我建议大家在向require回调函数中命名参数的时候使用Esri的首选参数。类似地,Dojo也有一系列首选参数别名。例如,在下列添加的代码中,我们提供了esri/map资源的引用,然后在内部的匿名函数中,又提供了一个Map的首选参数。在require()函数中引用的每一个资源都有一个相应的参数用于提供访问到该资源对象。

<script>
  require(["esri/map","dojo/domReady!"],function(Map){
 
      });
 
</script>

2.3.4 确保DOM可用
当一个网页加载时,所有组成页面的HTML元素都被加载并且解析。这就是大家熟知的文档对象模型(DOM),它能保证JavaScript不能访问到网页上的任何元素直至所有的网页元素都被加载完毕。假如你的JavaScript代码试图去访问一个还没有加载的网页元素,就很明显会报错。为了避免这种情况的发生,Dojo中有一个ready()函数,可以将其包括在require()函数中,它仅会在HTML元素和任何模块加载之后才会执行。

另一种方法是你可以使用dojo/domReady!插件去保证所有的HTML元素都被加载。在这个练习中我们将使用第二种方法。

在先前的代码当中,我们已经使用dojo/domReady!插件并且将其添加到了require()函数中。

虽然可以直接添加JavaScript代码到基本的HTML文件中,但是更好的办法是创建一个单独的JavaScript文件(后缀名为.js)。本书为了简单起见,大部分代码都是直接写在了HTML文件内,但是当应用程序变得庞大且复杂的时候,希望你遵循将JavaScript代码写在一个单独的文件中的原则。
2.3.5 创建地图
创建一个新的Map地图是通过esri/map这个先前步骤中所引入模块中的Map类来实现的。在require()函数内部,使用构造函数来创建一个新的Map对象。Map对象的构造函数中接收两个参数,第一个是在Web页面上用于承载地图的

标签的引用,还有一个是可选参数,其作用是定义各种地图加载选项。这个可选项被定义成一个包括一系列键/值对的JSON对象。

可能最常见的选项是basemap,通过它你可以从ArcGIS.com中选择一个预先定义的basemap,包括:streets、satellite、hybrid、topo、gray、oceans、national-geographic或osm。zoom选项用来定义地图初始缩放级别,它是一个整数对应一个预先定义的缩放范围等级。minZoom和maxZoom选项分别定义地图最小和最大范围缩放等级。center选项定义初始显示地图时显示的中心点,这个点是一个Point对象,包括一个经度/纬度坐标值对。当向Map对象的构造函数中传递参数时,还有一些其他的额外选项。

首先,我们创建一个全局的变量map以及require()函数,添加下列加粗显示的代码行。

<script>
      var map;
      require(["esri/map", "dojo/domReady!"], function(Map) {
      });
</script>

添加下列加粗代码到require()函数中,这些代码是新的Map对象的构造函数。传递到该构造函数中的第一个参数是承载地图的< div >标签的ID引用,我们到现在还没有定义这个< div >标签,但是在下面步骤中很快就会定义。第二个传递到构造函数中的参数是一个JSON对象,包括地理坐标的可选项,如地图中心、缩放级别和topo基础地图。

basemap.require(["esri/map", "dojo/domReady!"], function(Map) {
  map = new Map("mapDiv", {
    basemap: "topo",
    center: [-122.45,37.75], // long, lat
    zoom: 13,
    sliderStyle: "small"
  });
});

2.3.6 创建页面内容
最后的一个步骤是创建用来承载地图容器的HTML< div >标签,你需要为这个< div >标签分配一个唯一的ID编号,这样JavaScript代码就能引用到它。在沙盒中这个 < div >标签已经创建好了,唯一标识符为mapDiv,如下列加粗代码行所示。另外,还需要为

标签定义一个类属性,它应该引用你引入的dojo样式表。在下列代码中,你可以看到< body >标签已经在沙盒中创建了并且完成了先前的两个步骤。
<body class="claro">
   <div id="mapDiv"></div>
</body>

2.3.7 页面样式
你可以向< head >标签中添加样式信息来为Web网页定义各种样式。在这个例子中,样式已经在沙盒中为你创建好了,如下列代码所示。本例中的样式包括设置地图,以适应整个浏览器窗口。

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

2.3.8 完整代码
这个简单例子的完整代码应该是这样的。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user- scalable=no">
    <title>Simple Map</title>
    <link rel="stylesheet" 
    href="http://js.arcgis.com/3.7/js/esri/css/ esri.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/ themes/claro/claro.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      } 
    </style>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      var map;

      require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map", {
          basemap: "topo",
          center: [-122.45,37.75], // long, lat
          zoom: 13,
          sliderStyle: "small"
        });
      });
    </script>
  </head>

  <body class="claro">
    <div id="map"></div>
  </body>
</html>

通过单击Run按钮来运行代码,假如代码一切正常的话,你可以看到如图2-3所示的输出结果。


a576f32390f56e3f8e321fb04e842950ffd13639
相关文章
|
16天前
|
前端开发 安全 JavaScript
构建高效Web应用的五个关键步骤
【9月更文挑战第21天】本文将引导读者通过五个核心步骤来构建一个高效的Web应用。我们将从选择合适的技术栈开始,到实现响应式设计、优化性能、保证安全性,最后确保可维护性和扩展性。每个步骤都配备了具体的代码示例,帮助理解如何在实践中应用这些概念。
|
1月前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
1月前
|
JavaScript
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
这篇文章介绍了Nest.js服务在应用程序引导过程中,TypeScript编译对效率的影响,以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程,指导读者如何在项目中安装依赖包,并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后,文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
|
13天前
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
27天前
Nest.js 实战 (十三):实现 SSE 服务端主动向客户端推送消息
这篇文章介绍了在Nest.js应用中使用Server-Sent Events (SSE)的技术。文章首先讨论了在特定业务场景下,为何选择SSE而不是WebSocket作为实时通信系统的实现方式。接着解释了SSE的概念,并展示了如何在Nest.js中实现SSE。文章包含客户端实现的代码示例,并以一个效果演示结束,总结SSE在Nest.js中的应用。
Nest.js 实战 (十三):实现 SSE 服务端主动向客户端推送消息
|
16天前
|
JavaScript 前端开发 安全
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中,处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程,包括网络请求监测、代码分析、加密算法推测及解密逻辑研究,并提供了实战步骤,如确定加密入口点、逆向分析算法及模拟加密解密过程。此外,还强调了法律合规性和安全性的重要性,帮助读者合法且安全地进行逆向工程。
64 11
|
9天前
|
Web App开发 JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的深度整合
【9月更文挑战第28天】在现代Web开发领域,Node.js和Express框架的结合已成为打造高性能、易扩展应用的黄金组合。本文将深入探讨如何利用这一技术栈优化Web应用架构,提供具体实践指导,并分析其性能提升的内在机制。通过代码示例,我们将展示从基础搭建到高级功能的实现过程,旨在为开发者提供一条清晰的学习路径,以实现技术升级和项目效率的双重提升。
23 3
|
14天前
|
移动开发 JavaScript 数据可视化
|
29天前
Nest.js 实战 (十二):优雅地使用事件发布/订阅模块 Event Emitter
这篇文章介绍了在Nest.js构建应用时,如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展,并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开,这是一个基于eventemitter2库的社区模块,提供了事件发布/订阅功能,使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块,包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。最后总结,集成@nestjs/event-emitter模块可以提升应用程序的事件驱动能力,构建出更为松耦合、易扩展且高度灵活的系统架构,是构建现代、响应迅速且具有高度解耦特性的Nest.
|
9天前
|
JSON JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的完美结合
【9月更文挑战第28天】在现代Web开发中,Node.js和Express框架的结合为创建高性能、易扩展的应用提供了强有力的支持。本文将深入探讨如何利用这两种技术构建一个简单但功能强大的Web服务,同时提供代码示例以加深理解。
下一篇
无影云桌面