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. HTTP详解--请求、响应、缓存

    1. HTTP请求格式 做过Socket编程的人都知道,当我们设计一个通信协议时,“消息头/消息体”的分割方式是很常用的,消息头告诉对方这个消息是干什么的,消息体告诉对方怎么干.HTTP协议传输的消息 ...

  2. FTP、WEB虚拟目录作用

    随风原文FTP.WEB虚拟目录作用 在 IIS中,双击您要为之添加虚拟目录的服务以显示其属性表.    单击“目录”选项卡.    单击“添加”.    单击“浏览”从“目录”框中选择一个目录.    ...

  3. NSDate时间

    NSDate 使用 ios时间的秒数 取当前时间的秒数 NSTimeInterval time = [[NSDate date] timeIntervalSince1970]; long long i ...

  4. Android onLoadFinished与onLoaderReset

    onLoadFinished 这个方法是在前面已创建的加载器已经完成其加载过程后被调用,这个方法保证会在应用到加载器上的数据被释放之前被调用.在此方法中,你必须删除所有对旧数据的使用(因为它将很快会被 ...

  5. Textillate.js有什么用及使用实例

    Textillate.js有什么用及使用实例 一.总结 一句话总结:Textillate.js – 实现动感的 CSS3 文本动画的简单插件 二.textillate.js 文字动画 textilla ...

  6. css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）

    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...

  7. 想要搞BGM，没有歌曲链接怎么办？

    有对于想要做个个人网站BGM,而非商业用途和非法用途,这只是个小技巧,仅限于个人娱乐使用. 方法一: 首先打开酷狗网页端 搜索想要的音乐名字 进入播放页面 进入开发者模式(右键鼠标->检查或者直 ...

  8. Android Error:(1,N1) 错误: 需要class, interface或enum

    造成这个error的原因是Java文件编码格式不对, 比如可能是你之前这个文件是用GBK写的,后来复制到utf-8环境里编译,而文件里有些是隐藏的字符,很难找出来的. 解决方法是在Notepad++新 ...

  9. ArcEngine开发之Command控件使用篇

    转自原文 ArcEngine开发之Command控件使用篇 在ArcEngine类库中有大量的Command控件用来与地图控件进行操作和交互.比如有一系列的地图浏览控件.地图查询控件.图斑选取控件.编 ...

  10. 1046: 找不到类型，或者它不是编译时常数: PieSeries

    如题所看到的,出现提示,这个是绘图相关的错误: