ArcGIS API for JavaScript学习(1):第一个地图

1.简介

ArcGIS API for JavaScript跟随ArcGIS 9.3同时发布,是ESRI根据JavaScript技术实现的调用ArcGIS Server REST API接口的一组脚本。当前的最新版本是Version 3.20。通过ArcGIS API for JavaScript可以将ArcGIS Server提供的地图资源和其它资源(ArcGIS Online)嵌入到Web应用中。

在ArcGIS API For JS中,esri.Map类是最重要的一个类,Map作为地图图层的容器,存放各种地图服务,同时Map具有一些常用的属性和事件可以帮助我们完成一些复杂的操作。接下来我们使用Map类开始我们的HelloWorld程序。

2.创建第一个地图程序

2.1首先,设置一个基本的HTML文档。如下:

 <!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>
    </head>

  </html>

2.2 引用ArcGIS API for JavaScript

要开始使用ArcGIS API for JavaScript,需要在??代码中添加以下脚本和链接标签<head>:

 <link rel="stylesheet" href="http://jsapi.thinkgis.cn/esri/css/esri.css">
 <script src="http://jsapi.thinkgis.cn/"></script>

因为官方的链接速度较慢,这里引用thinkgis社区提供的国内镜像。

  • 其中esri.css样式表包含特定于Esri小部件和组件的样式。

(可选)这里还可以引用一个Dojo Dijit主题样式。有四个主题可供选择:Claro,tundra,soria和nihilo。使用Dojo Dijit主题是可选的,这样做可以为API中包含的小部件设置一致的外观。各种主题样式表的URL如下所示:

http://jsapi.thinkgis.cn/dijit/themes/claro/claro.css
http://jsapi.thinkgis.cn/dijit/themes/tundra/tundra.css
http://jsapi.thinkgis.cn/dijit/themes/nihilo/nihilo.css
http://jsapi.thinkgis.cn/dijit/themes/soria/soria.css

2.3创建地图对象并加载地图

 var map;
  require(["esri/map", "dojo/domReady!"], function(Map) {
    map = new Map("mapDiv", {
      center: [-56.049, 38.485],
      zoom: 3,
      basemap: "streets"
    });
  });
  • require:是dojo提供的一个全局函数,用于加载模块。Esri的JavaScript API建立在Dojo之上,并且依赖于Dojo的模块系统和其他功能,如矢量图形和本地化以及一种屏蔽浏览器差异的方法。

2.4.关联Html

现在,创建地图的JavaScript已经到位了,下一步是添加关联的HTML。对于这个例子,HTML是非常简单的:一个body标签,它定义了浏览器中可见的内容,以及一个单一的div元素,在body里面会创建地图。

 <body class="claro">
    <div id="mapDiv"></div>
  </body>
      
  • 该div的id为“mapDiv”,以匹配传递给地图构造函数的id。body标签的class属性为“claro”。这用于将页面头标中包含的claro样式表的样式应用于页面中的元素(小部件)。也可以使用其他主题。

2.5添加样式

对于本例子,地图需要填充浏览器窗口。要实现这一点,在页面的<head>标签中添加以下css :

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

2.6运行结果及完整代码

  • 运行结果

  • 完整代码
<!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://jsapi.thinkgis.cn/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://jsapi.thinkgis.cn/esri/css/esri.css">
  <style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>

  <script src="http://jsapi.thinkgis.cn/init.js"></script>
  <script>
    var map;
    require(["esri/map", "dojo/domReady!"], function(Map) {
      map = new Map("mapDiv", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"
      });
    });
  </script>

</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>
  • 代码说明

require函数是dojo提供的一个全局函数,只要引入init.js便可使用,require函数支持AMD(异步模块定义,Asynchronous Module Definition)规范。

require函数有两个参数,第一个参数是一个数组(用于加载的模块),第二个参数是一个回调函数,注意前后加载的顺序一定要一致,例如require的第一个参数是esri.map,回调函数的第一个参数必须是Map

require加载的第二个是dojo/domReady!,dojo/domReady!是一个插件(如果加载的模块以感叹号结尾,一般都为插件),此插件的作用是,当Html的dom加载完毕后在执行此函数,类似与window.onload事件。

Map类中有一个比较特殊的属性叫做basemap,在arcgis api中,esri自己定义了一些底图可直接供我们使用,这些底层的调用,我们可以根据制定basemap属性直接调用已经定义好的底图。

esri给我们定义的底图有:streets ,satellite ,hybridtopogray,dark-grayoceansnational-geographic,terrainosm,dark-gray-vectorgray-vector,streets-vectorstreets-night-vectorstreets-relief-vector,streets-navigation-vector,topo-vector.terraindark-graydark-gray-vectorgray-vector,streets-vector,streets-night-vectorstreets-relief-vectorstreets-navigation-vector , topo-vector,注意:要使用esri定义的底图属性basemap电脑必须联网。

时间: 2024-10-18 22:47:13

ArcGIS API for JavaScript学习(1):第一个地图的相关文章

ArcGIS API for JavaScript 学习笔记 (一) --第一个WebGIS应用程序

说明:本地部署后续我会尝试. 简单介绍: 开发环境是Visual Studio 2012,因为它为所有的.aspx文件..htm文件以及外部的.js文件提供了IntelliSense(智能提示),相当于其他软件的代码自动补全功能,非常方便.接下来是我的第一个Javascript API 应用程序.ESRI在其arcgis online中提供了在线的ArcGIS API for JavaScript,在web应用中直接引用即可,无需下载安装:当然也可以下载API,然后部署到自己的web服务器,在这

Arcgis api for javascript学习笔记-初步尝试(3.2X版本)

Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图展示功能. 示例代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri

arcgis api for javascript学习(2016.9.22)

esri/config 用来修改一些配置的对象.只有一个属性对象defaults,defaults对象有四个属性:geometryService string,kemlService string,map object,io object.我们可以如下进行设置: require(["esri/config"],function(esriConfig){ esriConfig.defaults.geometryService="";// ...... }); 依据这个

Arcgis api for javascript学习笔记-三维地图的飞行效果

其实就只是用到了 view.goTo()  函数,再利用 window.setInterval()  函数(定时器)定时执行goTo().代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scala

ArcGIS API For JavaScript学习笔记

描述 此示例演示如何创建一个简单的 LayerList用于切换可见性.在该特定示例中,小部件包含在侧面板内.该窗口小部件使用ArcGIS Online Web地图中的图层. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewpo

ArcGIS API for JavaScript 学习之 identifyTask

//Identify查询 function initIdentify() { require( [ "esri/map", "esri/InfoTemplate", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/t

arcgis API for javascript 学习笔记

ArcGis Server地图是缓存的,意味着它有服务器管理员简历提示性能的一组预先渲染的切片.由于这个原因地图通过ArcGISTiledMapServiceLayer表示 如果地图服务没有一个可用的缓冲,使用ArcGISDynamicMapServiceLayer. 使用下列行创建地图:var map = new esri.Map("map");

ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View,加载layers,使用弹出窗口,视觉化,与使用窗口小部件.(wtf居然没有分析你想搞事情啊web除了展示难道不应该有()&&*--@) [Mapping and Views] (点击进入我写的章节详细介绍) 最基础的,知道地图和视图的区别,能使用2D和3D地图,对地图的布局有一定的了解,对地图

ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. 什么是ArcGIS API for JS?这里就不多介绍了,最关键的一点是4.x版本与3.x版本的变化,按官方的意思是重新写了底层. 笔记中规定: ArcGIS API for JavaScript简称AJS 使用CDN(即不配置本地环境)进行测试开发 其余根据需要进行修改.增删. 要将地图显示在h