一  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. 企业IT管理员IE11升级指南【13】—— 如何把IEMP迁移到GPP

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  2. Python - 命令式编程与符号编程

    原文链接:https://zh.d2l.ai/chapter_computational-performance/hybridize.html本文是对原文内容的摘取和扩展. 命令式编程(imperat ...

  3. scala时间和时间戳互转

    时间转换为时间戳: import java.text.SimpleDateFormat object test { def main(args: Array[String]): Unit = { va ...

  4. Kibana（一张图片胜过千万行日志）

    Kibana是一个开源的分析和可视化平台,设计用于和Elasticsearch一起工作. 你用Kibana来搜索,查看,并和存储在Elasticsearch索引中的数据进行交互. 你可以轻松地执行高级 ...

  5. 并发编程（一）—— volatile关键字和 atomic包

    本文将讲解volatile关键字和 atomic包,为什么放到一起讲呢,主要是因为这两个可以解决并发编程中的原子性.可见性.有序性,让我们一起来看看吧. Java内存模型 JMM(java内存模型) ...

  6. C# 8中的范围类型(Range Type)

    C# 8.0中加入了一个新的范围类型(Range Type). 这里我们首先展示一些代码,并一步一步为代码添加一些不同的东西, 为大家展示一下范围类型的功能和用法. 我们最原始的代码如下: stati ...

  7. Python爬虫入门教程 39-100 天津市科技计划项目成果库数据抓取 scrapy

    爬前叨叨 缘由 今天本来没有打算抓取这个网站的,无意中看到某个微信群有人问了一嘴这个网站,想看一下有什么特别复杂的地方,一顿操作下来,发现这个网站除了卡慢,经常自己宕机以外,好像还真没有什么特殊的.. ...

  8. 《HelloGitHub月刊》第 10 期

    前言 这一年感谢大家的支持,小弟这里给大家拜年了! <HelloGitHub月刊>会一直做下去,欢迎大家加入进来提供更多的好的项目. 最后,祝愿大家:鸡年大吉- <HelloGitH ...

  9. 构造方法、封装、关键字（this、static）和代码块的介绍

    1.构造方法 1.1 构造方法与成员方法的区别 构造方法分为无参构造和有参构造,其中有参构造方法和无参构造方法为方法的重载关系. 构造方法在初始化一个类的对象时进行调用,它没有返回值,方法名与类名相同 ...

  10. 【ASP.NET Core快速入门】（九） RoutingMiddleware介绍以及MVC引入

    前言 前面我们介绍了使用app.Map来配置路由,但是对于一般不是特别大的项目来说,我们不使用Map来进行路由配置. 配置路由 我们首先需要在Startup.cs文件中的ConfigureServic ...