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. Linux下交叉编译gdb，gdbserver+gdb的使用以及通过gdb调试core文件

    交叉编译gdb和gdbserver 1.下载gdb:下载地址为:http://ftp.gnu.org/gnu/gdb/按照一般的想法,最新版本越好,因此下载7.2这个版本.当然,凡事无绝对.我们以gd ...

  2. stm32的adc时钟周期,ADC_SampleTime_1Cycles5是多长时间

  3. 微信端 h5 视频 video 自动播放

    document.addEventListener("WeixinJSBridgeReady",function(){ document.getElementById(" ...

  4. HDU 1406 完数 因子的和

    http://acm.hdu.edu.cn/showproblem.php?pid=1406 完数的定义:如果一个大于1的正整数的所有因子之和等于它的本身,则称这个数是完数,比如6,28都是完数:6= ...

  5. hdu 3306 Another kind of Fibonacci（矩阵高速幂）

    Another kind of Fibonacci                                                        Time Limit: 3000/10 ...

  6. Spring boot（三） springboot 定时任务

    这个不多说,springboot 定时任务非常简单就可以实现了. 30s运行一次 , @Scheduled(cron="0,30 * * * * ?") 通过这个控制定时时间 cr ...

  7. 简单的Java多线程的使用

    前几天做一个功能.就是在前台更改信息后会自己主动发邮件给其它的人,相关信息已更改,刚開始是直接在更改信息代码后面增加发送邮件的代码,但发现这样会使界面特别慢,而慢的主要原因是因为发送邮件有时会耗时非常 ...

  8. 【Nutch2.2.1基础教程之6】Nutch2.2.1抓取流程 分类： H3_NUTCH 2014-08-15 21:39 2530人阅读 评论(1) 收藏

    一.抓取流程概述 1.nutch抓取流程 当使用crawl命令进行抓取任务时,其基本流程步骤如下: (1)InjectorJob 开始第一个迭代 (2)GeneratorJob (3)FetcherJ ...

  9. POI操作Excel常用方法总结 分类： B1_JAVA 2013-08-23 10:01 349人阅读 评论(0) 收藏

    转载自:http://blog.csdn.net/xjun15/article/details/5805429     一. POI简介               Apache POI是Apache ...

  10. Android 闹钟最终版

    以下是我发现的几点闹钟中重要的点,分享一下: (1)在闹钟中有AudioManager管理机制,这个机制可以申请和释放OnAudioFocusChangeListener监听. 还有mTelephon ...