创建ArcGIS API for JavaScript的第一个示例程序

黄舟

发布时间：2017-02-09 16:51:08

2192人浏览过

来源于php中文网

原创

在上一篇博客中已经介绍了如何搭建arcgis api for javascript开发环境，如果您还没有搭建好开发环境的话，

如果开发环境搭建好了的话，那么今天我们继续来搭建我们的第一个ArcGIS API for JavaScript应用程序。

下面首先将代码贴出来，复制到VS2012中新建的html页面中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JS GIS地图</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" />
    <style type="text/css">
        html, body, #map
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        body
        {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </style>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/init.js"></script>
    <script type="text/javascript">
        var map;
        require(["esri/map", "dojo/domReady!"], function (Map) {
            map = new Map("map", {
                basemap: "topo",
                center: [118.932036047149, 32.09141405],
                zoom: 10
            });
        });
    </script>
</head>
<body>
    <div id="map">
    </div>
</body>
</html>

运行效果图如下：

立即学习“Java免费学习笔记（深入）”；

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

接下来我们重点关注如下js代码，该代码采用的是AMD方式：

<script type="text/javascript">
              var map;
              require(["esri/map", "dojo/domReady!"], function (Map) {
                  map = new Map("map", {
                      basemap: "topo",
                      center: [118.932036047149, 32.09141405],
                      zoom: 10
                 });
             });
     </script>

在该require回调函数中命名参数的时候，使用Esri的首选参数。上面代码中，提供了esri/map资源的引用，然后在内部的匿名函数中，又提供了一个Map首选参数，在require函数中引用的每一个资源都有一个对应的参数用于提供访问该资源对象。

过时的写法如下：

<script type="text/javascript">
           dojo.require("esri.map");
           function init() {
               var map = new esri.Map("map", {
                    basemap: "topo",
                    center: [118.932036047149, 32.09141405],
                    zoom: 10
              });
          }
         dojo.ready(init);
     </script>

dojo.require已经不推荐使用了，官方文档上推荐用require，至于模块名的分隔符也只是语法要求而已。

以上就是创建ArcGIS API for JavaScript的第一个示例程序的内容，更多相关内容请关注PHP中文网（www.php.cn）！

在纯前端 JavaScript 中实现跨页面持久化的单例模式

如何使用 CSS 实现复选框勾选后文本自动删除线效果

如何通过 CSS 实现复选框勾选后文本自动添加删除线效果

如何通过 AJAX 定期拉取服务器端动态文本数据并在 HTML 页面实时展示

在纯前端 JavaScript 中实现跨页面共享状态的单例模式