原文:创建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. WPF 碰撞检测

    have tested this, it worked, at least for me var x1 = Canvas.GetLeft(e1); var y1 = Canvas.GetTop(e1) ...

  2. CSS创建三角形（小三角）的几种方法

    你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...

  3. 【wikioi】1217 借教室

    题目链接http://www.wikioi.com/problem/1217/ 算法:二分答案(线段树可过wikioi数据) 二分:http://www.wikioi.com/solution/lis ...

  4. HDU 4649 Professor Tian(DP)

    题目链接 暴力水过的,比赛的时候T了两次,优化一下初始化,终于水过了. #include <cstdio> #include <cstring> #include <st ...

  5. c#中的partial关键字(转)

    c#中的partial关键字 Partial:      这是C#2.0的新特性 Partial关键字起到把一个class分段组合作用,能用于多个接口或一个继承 代码片断: namespace Com ...

  6. Hibernate工作原理及为什么要用?

    Hibernate工作原理及为什么要用? 原理:1.通过Configuration().configure();读取并解析hibernate.cfg.xml配置文件2.由hibernate.cfg.x ...

  7. 【C语言】03-第一个C程序代码分析

    前面我们已经创建了一个C程序,接下来分析一下里面的代码. 项目结构如下: 一.代码分析 打开项目中的main.c文件(C程序的源文件拓展名为.c),可以发现它是第一个C程序中的唯一一个源文件,代码如下 ...

  8. 8.20 css样式表：样式分类，选择器。样式属性，

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  9. ondragover 事件规定在何处放置被拖动的数据

    nternet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 被拖元素,dragElement : 1.添加事件:ondragstart 2 ...

  10. jQuery.qrcode.js客户端生成二维码，支持中文并且可以生成LOGO

    描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较         ...