一  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]LeetCode722. 删除注释 | Remove Comments

    Given a C++ program, remove comments from it. The program source is an array where source[i] is the  ...

  2. [Swift]LeetCode754. 到达终点数字 | Reach a Number

    You are standing at position 0 on an infinite number line. There is a goal at position target. On ea ...

  3. VIVO 手机重力传感器踩坑记录

    手上的 vivo-x9 手机传感器模式下的旋转效果有误,经查发现是 Gravity sensor 返回的数据有误,和其他机型返回的数据相反的. 参考 Gravity 的说明: A three dime ...

  4. spring boot - 整合jpa多对对关系保存和查询示例

    pojo: package com.example.zs.springDataJpa; import org.hibernate.annotations.Proxy; import javax.per ...

  5. ThinkPHP 数据库操作(三) : 查询方法、查询语法、链式操作

    查询方法 条件查询方法 where 方法 可以使用 where 方法进行 AND 条件查询: Db::table('think_user') ->where('name','like','%th ...

  6. [Abp 源码分析]九、事件总线

    0.简介 事件总线就是订阅/发布模式的一种实现,本质上事件总线的存在是为了降低耦合而存在的. 从上图可以看到事件由发布者发布到事件总线处理器当中,然后经由事件总线处理器调用订阅者的处理方法,而发布者和 ...

  7. Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...

  8. 从.Net到Java学习第二篇——IDEA and start spring boot

    从.Net到Java学习第一篇——开篇 所谓工欲善其事,必先利其器,做java开发也一样,在比较了目前最流行的几个java IDE(eclipse,myeclipse.IDEA)之后,我果断选择IDE ...

  9. JavaScript与WebAssembly进行比较

    本文由云+社区发表 作者:QQ音乐前端团队 在识别和描述核心元素的过程中,我们分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助 ...

  10. Docker系列08—搭建使用私有docker registry

    本文收录在容器技术学习系列文章总目录 1.了解Docker Registry 1.1 介绍 registry 用于保存docker 镜像,包括镜像的层次结构和元数据. 启动容器时,docker dae ...