一  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. [Swift]LeetCode854. 相似度为 K 的字符串 | K-Similar Strings

    Strings A and B are K-similar (for some non-negative integer K) if we can swap the positions of two ...

  2. [Swift]LeetCode1018. 可被 5 整除的二进制前缀 | Binary Prefix Divisible By 5

    Given an array A of 0s and 1s, consider N_i: the i-th subarray from A[0] to A[i] interpreted as a bi ...

  3. mac连接windows远程桌面及文件复制

    最近更换mac办公,但由于之前是用windows,所以很多文件项目之类的东西都还在windows电脑中,一次都传到mac上又会比较占内存,并且使用率也不高,感觉不划算.但每次想用的时候,在从windo ...

  4. HBase之行信息简析

    这一节我们简单介绍一下HBase的行信息.文章前半部分会对照源码介绍,后面会有我自己画的图,大家如果对这些信息已经比较了解了,跳过源码对照部分看后面的图,加深一下印象. 下面简单分析一下HBase中对 ...

  5. Hecher学生互助平台(团队项目第一次)

    团队项目作业链接:https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/homework/2978 一.团队简介 团队名称:Suc ...

  6. bootstrap分页插件的使用

    项目中需要实现文章列表的分页显示,由于使用了bootstrap框架,所以我们选择bootstrap的分页实现方法.网上有一些这方面的介绍文章,并且也有相关的示例程序.这里结合我们的项目,介绍一下使用b ...

  7. Solr 08 - 在Solr Web管理页面中查询索引数据 (Solr中各类查询参数的使用方法)

    目录 1 Solr管理页面的查询入口 2 Solr查询输入框简介 3 Solr管理页面的查询方案 1 Solr管理页面的查询入口 选中需要查询的SolrCore, 然后在菜单栏选择[Query]: 2 ...

  8. SpringBoot入门教程(九)定时任务Schedule

    在日常项目运行中,我们总会有需求在某一时间段周期性的执行某个动作.比如每天在某个时间段导出报表,或者每隔多久统计一次现在在线的用户量.在springboot中可以有很多方案去帮我们完成定时器的工作,有 ...

  9. [Python]peewee 使用经验

    peewee 使用经验 本文使用案例是基于 python2.7 实现 以下内容均为个人使用 peewee 的经验和遇到的坑,不会涉及过多的基本操作.所以,没有使用过 peewee,可以先阅读文档 正确 ...

  10. 【Python3爬虫】selenium入门

    selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Fire ...