[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-layers简介
【官方文档：https://developers.arcgis.com/javascript/latest/sample-code/intro-layers/index.html】
一、Intro to layers
地图是由许多图层构成的，图层(layer)是地图的重要组件，通过展示空间数据来表现实际生活现象。图层可以表示矢量要素(vector)，也可以表示栅格要素(raster)。JS API中可以使用很多种类的图层(layer)，具体类别请查看文档：https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html#layer-types。
1.代码骨架
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- 移动端优化 -->
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to layers</title> <!-- JS API的引入 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <script> </script> <!-- 设置样式，正确显示地图 -->
<style>
html,body,#viewDiv{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
其中包括，JS API的引入、style样式的设置等等。
2.创建地图(Map)和3D视图(SceneView)
<script>
2 require([
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
],function(Map,SceneView){
// 创建地图
var map=new Map({
basemap:"oceans"
}); // 创建SceneView
var view=new SceneView({
container:"viewDiv",
map:map
});
17 });
</script>
3.创建切片图层(TileLayer)
每一个图层(layer)都有一个url属性，这个url可以来自ArcGIS Server发布的服务或者是portal中的地图内容。不同的url标识不同的图层，每个图层都只有唯一的url。这里使用Esri World Transportation service提供的地图服务。
<script>
2 require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/TileLayer", // 需要新添加的模块
"dojo/domReady!"
],function(Map,SceneView,TileLayer){ // 注意这里也需要添加对应的类
// 创建地图
var map=new Map({
basemap:"oceans"
}); // 创建SceneView
var view=new SceneView({
container:"viewDiv",
map:map
}); var transportationLayer=new TileLayer({
url:"https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
id:"streets", // 设置其他一些属性
opacity:0.7
}); var housingLayer=new TileLayer({
url:"https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
id:"ny-housing"
});
29 });
</script>
"esri/layer/TileLayer"是新添加的模块，在function()也要添加相应的类。
创建两个TileLayer切片图层，设置相应url和其他相关属性，url由Esri提供。id是对图层的标识，opacity设置图层的透明度。还有一些属性，比如minScale和maxScale控制图层在不同比例尺下的可见性，以增强图层在地图上的表达合理性。visible属性为true显示图层，为false使图层不可见。
4.添加图层到地图
将创建好的图层添加到地图上有很多种方式，具体请查看文档：https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#layers。
这里给出两种方式：①在Map构造函数中设置相关属性 ②通过Map实例的方法添加
第一种方法：在Map构造函数中设置layers属性以添加相应图层（这种方法未成功实现）
var map=new Map({
2 basemap:"oceans",
layers:[housingLayer] // 设置的属性
4 });
但是运行结果报错，错误信息如下：
（更新：这种方法是可行的，之前报错是因为housingLayer在实例化Map之后才定义，相当于给layers属性添加了一个未定义的图层）
第二种方法：通过Map实例的方法添加
map.layers.add(housingLayer);
2 map.layers.add(transportationLayer);
这样就将之前创建的图层添加到了底图上，最终运行效果如下。可以看到交通线和纽约地区的城市面都已添加到底图Oceans上。
5.在页面中控制图层的显示与隐藏
在<body>中添加checkbox控件。注意checkbox的id，后面会用到。
<body>
2 <div id="viewDiv">
<span id="layerToggle">
<input type="checkbox" id="streetsLayer" checked>Transportation
</span>
</div>
</body>
当点击checkbox时，会触发change事件，以控制图层的visible属性。监听change事件需要导入"dojo/on"模块和"dojo/dom"模块。"dojo/on"用于监听HTML DOM上的事件，"dojo/dom"用于获得DOM元素。
<script>
2 require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/TileLayer", // 需要新添加的模块
"dojo/dom", // 用于获取HTML DOM元素
"dojo/on", // 用于监听HTML DOM元素上的事件
"dojo/domReady!"
],function(Map,SceneView,TileLayer,dom,on){ // 注意这里也需要添加对应的类
// 创建地图
var map=new Map({
basemap:"oceans",
}); // 创建SceneView
var view=new SceneView({
container:"viewDiv",
map:map
}); var transportationLayer=new TileLayer({
url:"https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
id:"streets", // 设置其他一些属性
opacity:0.7
}); var housingLayer=new TileLayer({
url:"https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
id:"ny-housing", }); map.layers.add(housingLayer);
map.layers.add(transportationLayer); // 获取checkbox元素，通过dom.byId()方法
var streetsLayerToggle=dom.byId("streetsLayer"); // 监听checkbox的change事件
on(streetsLayerToggle,"change",function(){
// 当checkbox为true时，图层的visible也为true
transportationLayer.visible=streetsLayerToggle.checked;
});
44 });
</script>
通过dojo提供的dom.byId()方法获取checkbox元素。使用dojo提供的on()方法对checkbox改变状态这一事件进行监听，并设置响应行为。on()有3个参数，第一个参数是监听的对象，这里是指向checkbox的那个变量。第二个参数是监听事件，这里是"change"。第三个参数是一个匿名函数，即事件发生时的响应行为。这里是将transportationLayer图层的可见性设置成checkbox的状态属性，以起到显示图层与隐藏图层的功能。
这里要注意，当图层的visible属性为false时，它仍是Map地图的一部分，仍添加在这个地图中，只是看不见而已，但它是存在的。依然可以访问这个图层的属性，或使用这个图层进行一些分析操作。
现在通过勾选checkbox，以进行transportationLayer图层的显示与隐藏。
6.理解图层视图(LayerView)
图层(layer)是发布的地图服务，包含着地理数据和属性数据的信息。当图层在视图View中加载完成时，会创建一个LayerView。可以理解成View之下显示layer的一个东西。当图层加载完成时（即LayerView创建时），会触发视图View的"layerview-create"事件。下面为function(){}中添加的代码。
// 图层加载完成时将生成LayerView
2 // 将触发View的"layerview-create"事件
3 view.on("layerview-create",function(event){
if(event.layer.id==="ny-housing"){
// 加载的是housingLayer
console.log("LayerView for New York housing density created!",event.layerView);
};
if(event.layer.id==="streets"){
// 加载的是transportationLayer
console.log("LayerView for streets created!",event.layerView);
};
12 });
当view的"layerview-create"事件触发后，进行layer.id的判断以显示相对应的信息。
7.使用Layer.when()
一个图层(layer)就是一个promise(promise的详细概念请参考文档：https://developers.arcgis.com/javascript/latest/guide/working-with-promises/index.html)
Layer.when()方法的作用是当图层加载完成后，再进行一些行为。这里，当housing layer加载完成后，想要让地图缩放到适合的比例尺及这个图层所在的地区（纽约地区）。在function(){}中添加如下代码。
// 当housing layer加载完成后，缩放到这个图层的fullExtent
2 housingLayer.when(function(){
3 view.goTo(housingLayer.fullExtent);
4 });
view.goTo()是将视角移到别的地方。
这样设置后，页面先显示出整个地球，接着跳到纽约那边图层区域。
8.最终代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- 移动端优化 -->
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to layers</title> <!-- JS API的引入 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/TileLayer", // 需要新添加的模块
"dojo/dom", // 用于获取HTML DOM元素
"dojo/on", // 用于监听HTML DOM元素上的事件
"dojo/domReady!"
],function(Map,SceneView,TileLayer,dom,on){ // 注意这里也需要添加对应的类
// 创建地图
var map=new Map({
basemap:"oceans",
}); // 创建SceneView
var view=new SceneView({
container:"viewDiv",
map:map
}); var transportationLayer=new TileLayer({
url:"https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
id:"streets", // 设置其他一些属性
opacity:0.7
}); var housingLayer=new TileLayer({
url:"https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
id:"ny-housing", }); map.layers.add(housingLayer);
map.layers.add(transportationLayer); // 获取checkbox元素，通过dom.byId()方法
var streetsLayerToggle=dom.byId("streetsLayer"); // 监听checkbox的change事件
on(streetsLayerToggle,"change",function(){
// 当checkbox为true时，图层的visible也为true
transportationLayer.visible=streetsLayerToggle.checked;
}); // 图层加载完成后将生成LayerView
// 将触发View的"layerview-create"事件
view.on("layerview-create",function(event){
if(event.layer.id==="ny-housing"){
// 加载的是housingLayer
console.log("LayerView for New York housing density created!",event.layerView);
};
if(event.layer.id==="streets"){
// 加载的是transportationLayer
console.log("LayerView for streets created!",event.layerView);
};
}); // 当housing layer加载完成后，缩放到这个图层的fullExtent
housingLayer.when(function(){
view.goTo(housingLayer.fullExtent);
});
});
</script> <!-- 设置样式，正确显示地图 -->
<style>
html,body,#viewDiv{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style>
</head> <body>
<div id="viewDiv">
<span id="layerToggle">
<input type="checkbox" id="streetsLayer" checked>Transportation
</span>
</div>
</body>
</html>
关于Layer的更多信息，请参考文档：https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html
[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-layers简介的更多相关文章
- [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView简介
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/index.html] 一.Intro to MapView(2D ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets简介
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-widgets/index.html] 一.Intro ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html] 一. ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-popups简介
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popup/index.html] 一.Intro to ...
- 下载并部署 ArcGIS API for JavaScript 4.10
学习ArcGIS API for JavaScript 4.10 的第一步就是下载并部署该文件. 有的读者由于之间没接触过,不知道怎么下载和部署文件.这些读者要求作者详细的写一篇关于下载和部署的文章( ...
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
- ArcGIS API for JavaScript 4.4 版本加载谷歌地图
ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...
- 转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述
原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...
- arcgis api for JavaScript _加载三维图层(scene layer)
arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript 4.x 版本增加对三维的支持. 关于三维图层(sce ...
随机推荐
- SVN服务器搭建--Subversio与TortoiseSVN的配置安装（Windows）
1. Subversio和TortoiseSVN 简介 Subversio简介: Subversion是一个自由,开源的版本控制系统,可以随意地免费下载.修改.以及重新发布. 是一个通用系统,可以管 ...
- 【转】关于Sentry
1. Sentry介绍及使用 Sentry 是一个实时事件日志记录和汇集的平台.其专注于错误监控以及提取一切事后处理所需信息而不依赖于麻烦的用户反馈. 备注:国内有同类型的产品Fundebug,提供网 ...
- 微服务与SOA的区别
微服务架构强调的第一个重点就是业务系统需要彻底的组件化和服务化,原有的单个业务系统会拆分为多个可以独立开发,设计,运行和运维的小应用.这些小应用之间通过服务完成交互和集成.每个小应用从前端web ui ...
- SSM-SpringMVC-02：SpringMVC最简单的小案例
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 咱们这个案例做什么? 就是用处理器代替Servlet处理请求 开发步骤: 1.引入jar包 <!--单 ...
- 虚拟机搭建CentOS主机win10通过xshell连接
目标:主机是win10系统,虚拟机搭建CentOS,在主机上通过XShell连接操作. 第一步 主机上安装虚拟机 第二步 下载CentOS 下载地址http://101.110.118.69/isor ...
- Kali Linux安装中文输入法全纪录
前言: 我使用的是英文版的Kali,默认没有安装中文输入法,也没有安装小企鹅(我后来才知道),折腾了很久,现在终于可以在Kali里输入中文了(这篇文章就是在Kali里面用leafpad写的).安装的过 ...
- 磁盘上没有足够的空间完成此操作的解决办法_Windows小知识
前言: 我们有时候调整系统分区时会遇到"磁盘上没有足够的空间完成此操作"的情况导致我们的分区无法完成,然而我们的磁盘上明明有未分配的空间,为什么不能创建磁盘分区呢?本文将介绍通过把 ...
- 最近最久未使用页面淘汰算法———LRU算法（java实现）
请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. LRU算法,即Last Recently Used ---选择最后一次访问时间距离当前时间最长的一页并淘汰之--即淘汰最长时间没有使用的页 按照 ...
- 跟我学ASP.NET MVC之七：SportsStrore一个完整的购物车
摘要: SportsStore应用程序进展很顺利,但是我不能销售产品直到设计了一个购物车.在这篇文章里,我就将创建一个购物车. 在目录下的每个产品旁边添加一个添加到购物车按钮.点击这个按钮将显示客户到 ...
- 一句python代码搭建FTP服务
环境搭建: python windows/linux pip install pyftpdlib (安装失败请到这里下载:https://pypi.python.org/pypi/pyftpdlib/ ...