Arcgis api for javascript(3.22版本)官方地址 ：https://developers.arcgis.com/javascript/3/

1. 根据官方示例实现一个简单地图展示功能。

示例代码：

 <!DOCTYPE html>

 <html>

 <head>

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

     <style type="text/css">

         html, body { margin: 0; padding: 0; height: 100%; width: 100%; }

         #viewDiv{ width:100%;height:100%; }

     </style>

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

 </head>

 <body>

     <div id="viewDiv"></div>

     <script type="text/javascript">

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

             var map = new Map("viewDiv", {

                 "basemap": "streets"

             });

         });

     </script>

 </body>

 </html>

示例截图：

2. Arcgis api for javascript离线部署

引用官网上的资源文件通常请求和加载比较慢，所以离线部署在本地会更好。

第一步：下载 arcgis js api压缩包并解压，有需要的也可以将arcgis js sdk也下载一份。api是我们开发需要的库，sdk是说明文档和例子；

第二步：替换域名 [HOSTNAME_AND_PATH_TO_JSAPI]；

找到下面这两个文件，并将文件里面的“[HOSTNAME_AND_PATH_TO_JSAPI]”内容替换成相应的域名(ip地址:端口)

D:\arcgis_js_api\arcgis_js_v320_api\library\3.20\3.20\init.js
D:\arcgis_js_api\arcgis_js_v320_api\library\3.20\3.20\dojo\dojo.js

第三部：将该文件夹作为部署包在IIS或其他服务器进行发布，具体部署方法网上有很多教程；

部署成功后，只需将原来的css和js文件引用改成本地地址就可以了，如下图所示：

 <!DOCTYPE html>

 <html>

 <head>

     <link rel="stylesheet" href="http://localhost:8003/arcgis_js_v320_api/library/3.20/3.20/esri/css/esri.css">

     <style type="text/css">

         html, body { margin: 0; padding: 0; height: 100%; width: 100%; }

         #viewDiv{ width:100%;height:100%; }

     </style>

 </head>

 <body>

     <div id="viewDiv"></div>

     <script src="http://localhost:8003/arcgis_js_v320_api/library/3.20/3.20/init.js"></script>

     <script type="text/javascript">

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

             var map = new Map("viewDiv", {

                 "basemap": "streets"

             });

         });

     </script>

 </body>

 </html>

3. 示例代码分析

  • 创建一个id为"viewDiv"的div作为map对象渲染地图的容器
　　<div id="viewDiv"></div>
  • js在执行过程中可能会用到其他js文件，但是不需要自定义引入相应的js文件。所以如果api中缺少相关文件，可能会出现异常。我们把require那一段代码注释掉，发现引入init.js文件后，会自动动态引入其他js文件。如下图所示：

客户端发送的请求资源信息：

　　

　　浏览器加载后的dom结构：

  • arcgis js 依赖 dojo，所以有必要了解一些常用dojo基本操作。这里先简单说一下require

　　在老版本中的写法中，对require的作用可能更好理解一点。可以理解为：要new 一个esri.Map对象需要先引入其所在的包 esri.map　　

    <script type="text/javascript">

        dojo.require("esri.map");

        function init() {

            var map = new esri.Map("viewDiv", {

                "basemap": "oceans"

            });

        }

        dojo.addOnLoad(init);

    </script>

　　而示例中可以看作是老版本的简写。require([],function(){})函数中第一个参数可以看作是要引入的包数组，第二个参数function函数中的参数就是引入包(按顺序)的别名，引入包成功后就会执行该函数。

  • basemap参数，即为该地图的底图，可以在此底图上叠加其他图层。basemap官方提供有很多种：

　　

Arcgis api for javascript学习笔记(3.2X版本)-初步尝试的更多相关文章

  1. Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作

    1. 不设置默认底图,第一个图层作为底图,然后叠加另外一个图层 先添加图层1,第一个图层1作为默认底图,然后在图层1上叠加图层2,并设置图层2的透明度为50%. <!DOCTYPE html&g ...

  2. Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合

    在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...

  3. Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

    在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...

  4. Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注

    4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...

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

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

  6. Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能

    1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...

  7. Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果

    其实就只是用到了 view.goTo()  函数,再利用 window.setInterval()  函数(定时器)定时执行goTo().代码如下: <!DOCTYPE html> < ...

  8. Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注

    1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...

  9. Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果

    一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...

随机推荐

  1. 16进制串与ASCII字符串相互转换

    提供两个函数,方便十六进制串与ASCII 字符串之间的相互转换,使用函数需要注意的是返回的串是在堆上通过 calloc 分配的,所以,记得使用完返回值释放该块,并且将指向该块的指针 =NULL .// ...

  2. [D3] Start Visualizing Data Driven Documents with D3 v4

    It’s time to live up to D3’s true name and potential by integrating some real data into your visuali ...

  3. Mac 环境下svn服务器的配置

    Mac 环境下svn服务器的配置 本文目录 • 一.创建代码仓库,用来存储客户端所上传的代码 • 二.配置svn的用户权限 • 三.使用svn客户端功能 在Windows环境中,我们一般使用Torto ...

  4. radare, the reverse engineering framework

    History The radare project [http://radare.org/] started in February of 2006 aiming to provide a free ...

  5. disabled的值无法传递到action层

    假设想让表单不可输入的状态,我将表单设置为了: style="cursor:not-allowed;" disabled 可是这样设置之后就发现,在后台的action怎么都没有办法 ...

  6. hdu 1506 Largest Rectangle in a Histogram ((dp求最大子矩阵))

    # include <stdio.h> # include <algorithm> # include <iostream> # include <math. ...

  7. 幻灯展示jQuery插件supersized

    主要特性: 能够自动修改图片大小适合浏览器的页面大小 通过幻灯展示的循环背景可以动态加载并且可以设置变化方式 核心版本可以支持仅仅需要背景变化大小的需要 键盘导航 整合Flickr - 可以从用户,组 ...

  8. 看朋友日志发现的一个ios下block相关的内存管理问题，非常奇怪，请大家帮忙一起来回答！

    http://blog.csdn.net/fengsh998/article/details/38090205 这篇文章以下是我的回复.相同的代码仅仅是把变量的定义从局部变量改为类的成员变量就发现了非 ...

  9. Android系统开发（1）——GCC编译器的编译和安装过程

    GCC编译器介绍 GCC编译器(GNG C Compiler)是GNU项目中符合ANSI C标准的编译系统,能够编译C  C++  Object C等语言编写的程序,同时GCC也是一个交叉编译器,特别 ...

  10. TreeMap、HashMap、ConcurrentSkipListMap之性能比较

    比较Java原生的 3种Map的效率. 1.  TreeMap 2.  HashMap 3.  ConcurrentSkipListMap 结果: 模拟150W以内海量数据的插入和查找,通过增加和查找 ...