Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
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版本)-初步尝试的更多相关文章
- Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作
1. 不设置默认底图,第一个图层作为底图,然后叠加另外一个图层 先添加图层1,第一个图层1作为默认底图,然后在图层1上叠加图层2,并设置图层2的透明度为50%. <!DOCTYPE html&g ...
- Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合
在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...
- Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置
在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...
- Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注
4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...
- Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示
在现在的 arcgis_js_v45_api 版本中并没有直接提供点击Polygon对象高亮显示.需要实现如下几个步骤: 1.点击地图时,获取Polygon的Graphic对象: 2.对获取到的Gra ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能
1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果
其实就只是用到了 view.goTo() 函数,再利用 window.setInterval() 函数(定时器)定时执行goTo().代码如下: <!DOCTYPE html> < ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注
1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...
- Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果
一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...
随机推荐
- change_names
DC在储存网表时,有时会采用特殊的字符 比如表示总线BUS[7]-BUS[0] 会表示成\BUS[7] \BUS[6]...... 在compile命令之后,write命令之前 加上:chan ...
- hadoop的关键进程 分类： A1_HADOOP 2015-06-06 11:37 52人阅读 评论(0) 收藏
hadoop集群中主要进程有 master: NameNode, ResourceManager, slaves: DataNode, NodeManager, RunJar, MRAppM ...
- stm32的adc时钟周期,ADC_SampleTime_1Cycles5是多长时间
- 数据类型总结——Array(数组类型）
相关文章 简书原文:https://www.jianshu.com/p/1e4425383a65 数据类型总结——概述:https://www.cnblogs.com/shcrk/p/9266015. ...
- 【Heritrix基础教程之3】Heritrix的基本架构 分类： H3_NUTCH 2014-06-01 16:56 1267人阅读 评论(0) 收藏
Heritrix可分为四大模块: 1.控制器CrawlController 2.待处理的uri列表 Frontier 3.线程池 ToeThread 4.各个步骤的处理器 (1)Pre-fetch ...
- NET WinForm 开发所见即所得的 IDE 开发环境
Github 开源:使用 .NET WinForm 开发所见即所得的 IDE 开发环境(Sheng.Winform.IDE)[2.源代码简要说明] GitHub:https://github.co ...
- Gcc 的使用
Gcc 的使用前言 编译器在编译过程中,先将程序代码编译成 object 文件,然後再和程序库联结,成为可执行文件.因此一个编译器须提供的参数主要有几类: 1.指定编译器编出的object 文件或 ...
- php curl 添加cookie伪造登陆抓取数据(摘自网络)
有的网页必须登陆才能看到,这个时候想要抓取信息必须在header里面传递cookie值才能获取 1.首先登陆网站,打开firebug就能看到对应的cookie把这些cookie拷贝出来就能使用了 2. ...
- Oracle null 处理
null first null last 解决啦-
- LSH︱python实现局部敏感随机投影森林——LSHForest/sklearn（一）
关于局部敏感哈希算法.之前用R语言实现过,可是由于在R中效能太低.于是放弃用LSH来做类似性检索.学了python发现非常多模块都能实现,并且通过随机投影森林让查询数据更快.觉得能够试试大规模应用在数 ...