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

在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境，如果您还没有搭建好开发环境的话，参考博客：http://blog.csdn.net/zdw_wym/article/details/48678913。

如果开发环境搭建好了的话，那么今天我们继续来搭建我们的第一个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>

运行效果图如下：

接下来我们重点关注如下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的第一个示例程序的更多相关文章

  1. ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

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

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

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

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  4. [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView简介

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/index.html]  一.Intro to MapView(2D ...

  5. ArcGIS API for JavaScript开发初探——HelloMap

    1.前言 在开始ArcGIS API for JavaScript开发之前我们需要了解一些基本的知识: 1.开发工具选什么? 前端技术的开发工具选择是一个仁者见仁智者见智的问题,有人喜欢Hbuilde ...

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

    Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...

  7. ArcGIS API for JavaScript 4.0（一）

    原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Sky ...

  8. ArcGIS API for JavaScript介绍

    ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...

  9. ArcGIS API for JavaScript FeatureLayer服务属性编辑

    首先说一下感想吧,刚入行时感觉深似海,掉到了GIS开发的陨石大坑里了,首先是学了小半年的Flex,用到了ArcGIS API for Flex,接着又是半年的ArcEngine开发,现在终于摸到了一点 ...

随机推荐

  1. ACM-ICPC国际大学生程序设计竞赛北京赛区(2015)网络赛 B Mission Impossible 6

    #1228 : Mission Impossible 6 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 You must have seen the very famou ...

  2. xml文件读写

    创建xml文件,对xml文件进行添加新节点.删除节点.更新节点.创建的如下的xml文件. <?xml version="1.0" encoding="UTF-8&q ...

  3. BZOJ3784 : 树上的路径

    树的点分治,在分治的时候将所有点到根的距离依次放入一个数组q中. 对于一棵子树里的点,合法的路径一定是q[L]..q[R]的某个数加上自己到重心的距离. 定义五元组(v,l,m,r,w),表示当前路径 ...

  4. ios cocos2d TexturePacker生成文件后的使用方法

    (1)将*.pvr.ccz文件转换为CCSpriteBatchNode (2)   将对应的plist文件读到CCSpriteFrameCache中 (3) 从CCSpriteFrameCache获取 ...

  5. Memcached、Redis OR Tair

    一.前言 非关系型数据库(NoSQL = Not Only SQL)的产品非常多,常见的有Memcached.Redis.MongoDB等优秀开源项目,相关概念和资料网上也非常丰富,不再重复描述,本文 ...

  6. 定时任务之Spring与Quartz的整合(有修改)

    转摘:http://www.javaweb1024.com/java/JavaWebzhongji/2015/04/13/548.html 在Spring中使用Quartz有两种方式实现:第一种是任务 ...

  7. Jbpm4.4+hibernate3.5.4+spring3.0.4+struts2.1.8整合例子（附完整的请假流程例子,jbpm基础，常见问题解决）

    Jbpm4.4+hibernate3.5.4+spring3.0.4+struts2.1.8 整合例子(附完整的请假流程例子). 1.jbpm4.4 测试环境搭建 2.Jbpm4.4+hibernat ...

  8. python 操作mysql

    安装模块: #pip install .... MySQLdb(2.x) pymysql(3.x) import MySQLdb as sql con = sql.connect( host = &q ...

  9. mysql root密码破解

    破解root密码:方法一:1./etc/my.cnf在[mysqld]段中加入skip-grant-table2.重启mysql3.直接mysql登录3.通过修改权限表方式修改mysql密码(upda ...

  10. Hbuild - 使用海马玩模拟器调试

    http://ask.dcloud.net.cn/question/13605     通过海马玩CMD(Droid4X_Settings_Tools_v1.1.5.bat) 设置模拟器的端口 269 ...