原文:创建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. [Cocos2d-x For WP8]基础知识

    一.重要概念 导演(CCDirector) 在cocos2d-x引擎中,CCDirector类是整个游戏的组织和控制核心,游戏的运行规则,游戏内的CCScene(场景).布景(CCLayer).角色( ...

  2. 【SPOJ】375. Query on a tree（树链剖分）

    http://www.spoj.com/problems/QTREE/ 这是按边分类的. 调试调到吐,对拍都查不出来,后来改了下造数据的,拍出来了.囧啊啊啊啊啊啊 时间都花在调试上了,打hld只用了半 ...

  3. pygame系列_原创百度随心听音乐播放器_完整版

    程序名:PyMusic 解释:pygame+music 之前发布了自己写的小程序:百度随心听音乐播放器的一些效果图 你可以去到这里再次看看效果: pygame系列_百度随心听_完美的UI设计 这个程序 ...

  4. Java 反射机制学习资料

    Java反射——引言 Java反射——Class对象 Java反射——构造函数 Java反射——字段 Java反射——方法 Java反射——Getter和Setter Java反射——私有字段和私有方 ...

  5. FlyCapture2 fc2Image OpenCV IplImage Conversion 两种图像格式之间的转换

    fc2Image是FlyCapture SDK的C语言库中的图片格式,由于在Windows上的MinGW无法编译FlyCapture2的C++库,只能使用C语言库,所以当我们在同时使用OpenCV的图 ...

  6. python基础数据类型

    整形:(不可变类型) >>> a = 123>>> type(a)<class 'int'> 长整形:(在python3中已经废弃了) >> ...

  7. lucene索引日期和数字

    1.用途. 索引数字的场景主要有两种:一是把它们当作字符串一样处理,比如“要是搁以前,术士能暴击10000多,有木有!”中的"10000",它和其它的词没什么区别,你可以把它仅仅想 ...

  8. C#中String.Empty，“”，NULL的区别

    一.String.Empty String类的静态只读字段.定义如下: public static readonly string Empty; 二.“” 被赋值为“”的字符串变量,会在栈上保存一个地 ...

  9. easyui datagrid 列隐藏和显示

    easyui datagrid 列隐藏和显示 用js怎么控制列的显示和隐藏?   最佳答案   $('#grid').datagrid('hideColumn','列field');把hideColu ...

  10. [ZZ] GTX 280 GPU architecture

    http://anandtech.com/show/2549 Now that NVIDIA’s has announced its newest GPU architecture (the GeFo ...