一  API准备

  1. 从网上下载开发包：ArcGIS for JavaScript（百度网盘地址）

sdk中含有API的帮助和例子

2.离线部署（以IIS为例）

配置IIS（详见网络）；解压离线包，包中的install_SDK.html/install_API.html文件含有详细的部署过程。

二 第一个应用程序

  1. 使用在线api

(1)创建简单的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)在<head>中引入样式表和ArcGIS for JavaScript

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

<script src="https://js.arcgis.com/3.17/"></script>

(3)定义页面内容

<body class="claro">

  <div id="mapDiv"></div>

</body>

(4)在<head>中加载地图

   <script>

        var map;

        require(["esri/map", "dojo/domReady!"], function(Map) {

          map = new Map("mapDiv", {

            center: [-56.049, 38.485],

            zoom: 3,

            basemap: "streets"

          });

        });

   </script>

(5)设置样式，在<head>中加入如下代码：

<style>

  html, body, #mapDiv {

    padding: 0;

    margin: 0;

    height: 100%;

  }

</style>

完整代码如下：

<!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>hello world</title>

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

    <style>

        html, body, #mapDiv {

            padding: 0;

            margin: 0;

           height: 100%;

        }

</style>

    <script src="https://js.arcgis.com/3.17/"></script>

    <script>

        var map;

        require(["esri/map", "dojo/domReady!"], function(Map) {

          map = new Map("mapDiv", {

            center: [-56.049, 38.485],

            zoom: 3,

            basemap: "streets"

          });

        });

   </script>

  </head>

  <body class="claro">

    <div id="mapDiv"></div>

  </body>

</html>

运行效果如图：

2 使用离线api

将样式表和ArcGIS for JavaScript替换为本地部署的api(由于部署位置不同代码仅供参考)

<link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css">

<script src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>

3 加载中国地图， 完整代码如下：

<!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>hello world</title>

    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css">

    <style>

        html, body, #mapDiv {

            padding: 0;

            margin: 0;

           height: 100%;

        }

</style>

    <script src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>

    <script>

        var map;

        require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer","dojo/domReady!"], function(Map,ArcGISTiledMapServiceLayer){

          map = new Map("mapDiv");

          var agoServiceURL ="http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer";

          var tileMap=new ArcGISTiledMapServiceLayer(agoServiceURL);

          map.addLayer(tileMap);

        });

   </script>

  </head>

  <body>

    <div id="mapDiv"></div>

  </body>

</html>

运行效果如图：

ArcGIS for JavaScript学习（一）的更多相关文章

  1. ArcGIS for JavaScript学习（二）Server发布服务

    一 ArcGIS for Server 安装.配置 (1)双击setup (2)点击下一步完成安装 (3)配置 a 登录Manager 开始—>程序—>ArcGIS—>Manager ...

  2. arcgis api for javascript 学习（七） 调用发布地图信息，并将地图属性信息输出到Excel表格---进阶版

    我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...

  3. Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示

    在现在的 arcgis_js_v45_api 版本中并没有直接提供点击Polygon对象高亮显示.需要实现如下几个步骤: 1.点击地图时,获取Polygon的Graphic对象: 2.对获取到的Gra ...

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

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

  5. ArcGIS for JavaScript 关于路径开发的一些记录（一）

    今年毕业,进入公司的第一个任务就是单独负责一个项目的地图模块,用ArcGIS API for JavaScript来开发web地图.花了大概一个礼拜的时间学会了安装和搭建ArcGIS Server和A ...

  6. JavaScript学习（一） —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  7. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  8. JavaScript学习（3）：函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

  9. JavaScript学习（2）：对象、集合以及错误处理

    在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

随机推荐

  1. [SQL]LeetCode177. 第N高的薪水 | Nth Highest Salary

    Write a SQL query to get the nth highest salary from the Employee table. +----+--------+ | Id | Sala ...

  2. [Swift]LeetCode352. 将数据流变为多个不相交间隔 | Data Stream as Disjoint Intervals

    Given a data stream input of non-negative integers a1, a2, ..., an, ..., summarize the numbers seen ...

  3. [Swift]LeetCode788. 旋转数字 | Rotated Digits

    X is a good number if after rotating each digit individually by 180 degrees, we get a valid number t ...

  4. CentOS6.5中部署java web环境

    原来在linux中部署java web环境,没有做好总结,这次在部署的过程中,将部署的过程做了记录,希望对大家有帮助.主要内容包括CentOS安装以后的网络设置,系统自带jdk的卸载,新版本jdk的安 ...

  5. MySQL优化之my.conf配置详解

    最近项目不太忙,所以有时间静心来研究下mysql的优化,对于MySQL的设置是否合理优化,直接影响到网站的速度和承载量!同时,MySQL也是优化难度最大的一个部分,不但需要理解一些MySQL专业知识, ...

  6. python安装whl文件

    在命令指示符下(cmd)的Python3安装命令为: pip3 install 文件名.whl 安装出错: matplotlib-2.0.0-cp34-cp34m-win_amd64.whl is n ...

  7. BBS论坛（三十一）

    31.帖子加精和取消加精功能完成 (1)apps/models.py class HighLight(db.Model): __tablename__='highlight_post' id = db ...

  8. ELK快速搭建日志平台

    1.  抛砖引入 <Elasticsearch> <Logstash> <Filebeat> <Filebeat模块与配置> <Kibana> ...

  9. Python爬虫入门教程 10-100 图虫网多线程爬取

    图虫网-写在前面 经历了一顿噼里啪啦的操作之后,终于我把博客写到了第10篇,后面,慢慢的会涉及到更多的爬虫模块,有人问scrapy 啥时候开始用,这个我预计要在30篇以后了吧,后面的套路依旧慢节奏的, ...

  10. APK安装成功后点击"打开"，按Home键，在桌面点击图标后应用重启

    转载:http://blog.csdn.net/kepoon/article/details/7468688 问题: 安装系统SD卡里面的apk或者原有的程序更新版本的时候,会遇到升级安装成功之后的一 ...