ArcGIS API For JavaScrip入门 (1)-构建第一个应用

已被阅读 1635 次 | 文章分类:ArcGIS API For Javascript | 2022-01-02 22:24

ArcGIS API For JavaScript官方指导教程,访问网速慢,所以翻译如下

1 创建一个简单的html文档

首先,新建一个基础的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 引入ArcGIS API for JavaScript

为了使用ArcGIS API for JavaScript,在标签里面添加下面的脚本和link标签

                                        
<link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css">
<script src="https://js.arcgis.com/3.39/"></script>
                                        
                                    

脚本标签加载 ArcGIS API for JavaScript。当 JavaScript API 的新版本发布时,更新版本号以匹配 API 的新版本。

esri.css 样式表包含特定于 Esri 小部件和组件的样式。有关此样式表的更多信息,请参阅有关所需CSS的帮助主题。

3 加载模块

使用第二个script标签从API加载指定的模块,直接在script标签中写js代码

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

关于此步骤中的代码,需要注意的一件事是 require() 中函数的参数可以是您喜欢的任何内容。为保持一致性,我们发布了Esri 模块的首选参数别名列表。

4 创建地图

使用上面引入的Map模块来创建新地图Map,它是从esri/map模块加载的 Map 类的引用。传递给Map"map"的字符串是将包含地图的 div 元素的 ID。用于指定其他地图属性(例如底图和起始中心点以及缩放级别)的对象也会传递给 Map 构造函数。

                                        
var map;
require(["esri/map"], function(Map) {
  map = new Map("map", {
    basemap: "topo-vector",
    center: [-122.45, 37.75],
    zoom: 13
  });
});
                                        
                                    

esri/basemaps 对象文档 中列出了其他底图选项

5 定义页面内容

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

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

div 的 id 为“map”,以匹配传递给 map 构造函数的 id。body 标签有一个“claro”的类属性。这用于将页面 head 标记中包含的 claro 样式表中的样式应用到页面中的元素(小部件)。

6 设置页面样式

在本教程中,地图会填充浏览器窗口。为此,请在页面的标签内添加以下 css :

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

7 全部代码

也可去官网沙盒预览 该例子

                                        
<!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>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://js.arcgis.com/3.39/"></script>
    <script>
      var map;

      require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map", {
          basemap: "topo-vector",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
        });
      });
    </script>
  </head>

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

                                        
                                    

小白GIS

QQ:3410192267 | 技术支持 微信:popstarqqsmall

Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号