一  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. Jenkins（Docker容器内）使用宿主机的docker命令

    1.Jenkins镜像 Docker容器内的Jenkins使用容器外宿主机的Docker(即DooD,还有另外的情况就是DioD),google一下有几种说法,但是都没试成功(试过一种就是修改宿主机/ ...

  2. MYSQL手册

    原文出处:http://www.cnblogs.com/gaofei-1/p/7152875.html MySQL配置文件 MySQL软件使用的配置文件名为my.ini,在安装目录下. MySQL常用 ...

  3. [Swift]LeetCode337. 打家劫舍 III | House Robber III

    The thief has found himself a new place for his thievery again. There is only one entrance to this a ...

  4. [Swift]LeetCode796. 旋转字符串 | Rotate String

    We are given two strings, A and B. A shift on A consists of taking string A and moving the leftmost ...

  5. MyBatis增、删、改、查

    1.config.xml文件的基本配置信息 2.选择数据源 3.mybatis约定 (1)parameterType和resultType 只能传一个参数,但是我们可以传一个数组或者集合,达到传多个参 ...

  6. 小程序webview实践

    小程序webview实践 -- 张所勇 大家好,我是转转开放业务部前端负责人张所勇,今天主要来跟大家分享小程序webview方面的问题,但我并不会讲小程序的webview原理,而我主要想讲的是小程序内 ...

  7. 【朝花夕拾】Android性能篇之（四）Apk打包

    前言 APK,即Android Package,是将android程序和资源整合在一起,形成的一个.apk文件.相信所有的Android程序员是在IDE的帮助下,完成打包轻而易举,但对打包流程真正清楚 ...

  8. Android模拟器Genymotion使用详解

    介绍 Genymotion是一款出色的跨平台的Android模拟器,具有容易安装和使用.运行速度快的特点,是Android开发.测试等相关人员的必备工具. 官网地址:https://www.genym ...

  9. Python：Selenium 2：使用

    创建一个浏览器对象 from selenium import webdriver browser = webdriver.Chrome() WebDriver在将控制权返回给测试脚本之前,会一直等待到 ...

  10. 基于 Zookeeper 的分布式锁实现

    1. 背景 最近在学习 Zookeeper,在刚开始接触 Zookeeper 的时候,完全不知道 Zookeeper 有什么用.且很多资料都是将 Zookeeper 描述成一个“类 Unix/Linu ...