ArcGIS API for JavaScript之创建第一个应用

最新推荐文章于 2018-04-10 22:56:08 发布

言無

最新推荐文章于 2018-04-10 22:56:08 发布

阅读量1.3k

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript API 地图 HTML

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原文地址：http://help.arcgis.com/en/webapi/javascript/arcgis/jstutorials/

注意：本教程有两个版本可选，介绍如何以一种异步的模块定义风格中使用ArcGISAPI for JavaScript模块。

本例应用在ArcGISAPI for JavaScript Sandbox中的实时版本。Sandbox是一个实时代码编辑器，允许我们实时修改资源和查看变化。

1 建立一个简单的HTML文件

首先，建立一个基本的HTML文件，这里有个例子：

<!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">
<meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
<title></title>
</head>

</html>

2 引入ArcGIS API forJavaScript

在使用 ArcGIS API for JavaScript前，将下面的脚本和链接标签添加到<head>中：

<link rel="stylesheet"href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>

这个脚本标签加载了ArcGIS API for JavaScript，当新版本的JavaScript API发布后，可以更新版本号以匹配新发布的API版本。

Esri.css样式单包含专门的Esri widgets（小工具）和组件，关于这些样式单的更多信息，可以参考required CSS帮助专题。

可以随意包含Dojo Dijit主题（theme）的样式单，有四个主题可供使用：claro，tundra，soria 和nihilo。Dijit theme tester是预览不同Dojo Dijit各自的主题是如何设计的最快方法。Tundra和claro是在API实例中最频繁使用的。使用不同主题进行实验可以找到你最喜欢的。另外，使用Dojo Dijit是个人选择，但是这样是实现API中小工具统一观感的简单方法。不同主题样式单的URL如下：

http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/tundra/tundra.css http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/nihilo/nihilo.css http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/soria/soria.css

3 加载模块

使用第二个<script>从API中加载特定模块。不需要再这个script标签引入URL，JavaScript代码直接在内部添加。

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

建立一个简单的页面或者实验时，将JavaScript嵌入script标签是很有用的，但不适用与建立大型应用，这时需要将所有JavaScript放在独立的.js文件中。

模块通过dojo.require()加载(Dojo提供)，ESRI的JavaScript API建立在Dojo之上并依靠Dojo，因为它的模块系统和其他要素如矢量地图、定位以及浏览器的抽象方式都不同。更多有关Dojo和JavaScript关系的信息参见Working with Dojo和Why Dojo。

4 确保DOM可用

接下来，一旦DOM可用，用dolo.ready来指定执行一个函数。这个函数由dojo.ready访问，叫做init，地图将被创建并且地图图层也被加载。地图图层来自于ArcGIS.com服务。

<script>
  dojo.require("esri.map");
  function init() {
    // code to create the map and add a basemap will go here 
  }
  dojo.ready(init);
</script>

5 创建地图

一个新的地图由esri.map创建，它是地图类的引用，通过esri.map模块加载。传递给esri.map的字符串“mapDiv”是包含地图的div要素的id。指定其他地图属性如底图、起始中心点和上升水平，都传递给地图构造函数。

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

因为地图变量声明在全局函数的外面，在测试或者调试时是很有用的因为浏览器开发控制台可以与地图交互。

其余的底图选项是："satellite", "hybrid", "topo", "gray", "ocean", "osm", "national_geographic"。通过在sandbox修改底图选项交替使用底图。查看Map class获取更多地图选项的细节信息。

6 定义页面内容

由于JavaScript创建地图要在适合的地方，下一步是添加项关联的HTML。对这个实例来讲，HTML非常简单：一个<body>标签，定义什么在浏览器里是可见的；body中创建地图的地方一个单独的div元素。

<bodyclass="claro">
  <div id="mapDiv"></div>
</body>

div有一个“mapDiv”的id要与传入地图构造函数里面的id相同。body标签有个“claro”的类属性，这是用于将页面上包含在head标签中的claro样式单中的样式应用于小工具（widgets）。如果使用不同的主题如tundra，则用class=”tundra”。

7 设计页面样式

在本教程里，地图填充整个浏览器窗口。要实现该功能需要添加下面css在页面的<head>标签中：

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

言無

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS API for JavaScript之创建第一个应用

原文地址：http://help.arcgis.com/en/webapi/javascript/arcgis/jstutorials/注意：本教程有两个版本可选，介绍如何以一种异步的模块定义风格中使用ArcGISAPI for JavaScript模块。本例应用在ArcGISAPI for JavaScript Sandbox中的实时版本。Sandbox是一个实时代码编辑器，允许我们
复制链接

扫一扫

专栏目录