基于arcgis api for javascript 4.x中的卷帘功能

文章目录

- 基于arcgis api for javascript 4.x中的卷帘功能
前言
一、关于卷帘的官方解释
二、卷帘的实现
- 1.简单的卷帘功能的实现
- 2.多图层卷帘的添加、选择和移除
总结

前言

提示：基于arcgis4.x版本下的swipe的多图层添加和移除操作，如果功能不符请检查是否由于版本不同造成的。

一、关于卷帘的官方解释

ArcMap中的"卷帘"，顾名思义，就像卷帘门一样，当存在多个图层时，卷帘门的一侧显示的是一个图层的信息，而卷帘门的另一侧显示的是另一个图层的信息，感觉似乎有一点像透视眼，此外，还有一种难以描摹的美感。将左半部分和右半部分分别截图保存，然后拖到ArcMap里。然后调用卷帘工具，具体步骤如下：

单击主菜单中的窗口，然后单击影像分析。
单击影像分析窗口中的栅格图层。
单击卷帘图层按钮卷帘图层
最后，用鼠标拖动就可以看到效果了。

效果如下：

来源于：https://malagis.com/arcgis-swipe-layer-tool.html

二、卷帘的实现

1.简单的卷帘功能的实现

代码如下（示例）：

<html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><title>简单的卷帘功能的实现</title><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}#instruction {z-index: 99;position: absolute;top: 15px;left: 50%;padding: 5px;margin-left: -175px;height: 30px;width: 355px;background: rgba(25, 25, 25, 0.8);color: white;}</style><link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.19/"></script><script>require(["esri/tasks/Locator", "esri/Map", "esri/views/MapView"], (Locator, Map, MapView) => {// Set up a locator task using the world geocoding serviceconst locatorTask = new Locator({url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"});// Create the Mapconst map = new Map({basemap: "streets-navigation-vector"});// Create the MapViewconst view = new MapView({container: "viewDiv",map: map,center: [-71.6899, 43.7598],zoom: 12});/******************************************************************** This click event sets generic content on the popup not tied to* a layer, graphic, or popupTemplate. The location of the point is* used as input to a reverse geocode method and the resulting* address is printed to the popup content.*******************************************************************/view.popup.autoOpenEnabled = false;view.on("click", (event) => {// Get the coordinates of the click on the viewconst lat = Math.round(event.mapPoint.latitude * 1000) / 1000;const lon = Math.round(event.mapPoint.longitude * 1000) / 1000;view.popup.open({// Set the popup's title to the coordinates of the locationtitle: "Reverse geocode: [" + lon + ", " + lat + "]",location: event.mapPoint // Set the location of the popup to the clicked location});const params = {location: event.mapPoint};// Display the popup// Execute a reverse geocode using the clicked locationlocatorTask.locationToAddress(params).then((response) => {// If an address is successfully found, show it in the popup's contentview.popup.content = response.address;}).catch(() => {// If the promise fails and no result is found, show a generic messageview.popup.content = "No address was found for this location";});});});</script></head><body><div id="viewDiv"></div><div id="instruction" class="esri-widget">Click any location on the map to see its street address</div></body>
</html>

如图所示：

来源于：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-swipe

2.多图层卷帘的添加、选择和移除

由于项目保密性原因，实际项目效果图及项目代码不易公开，故用官方案例作实例说明

代码如下（示例）：

<html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><title>卷帘多图层的添加、选择和删除</title><link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css" /><script src="https://js.arcgis.com/4.19/"></script><style>html,body {padding: 0;margin: auto;width: 90%;height: 90%}#viewDiv {padding-top: 80px;margin: auto;height: 90%;width: 100%;}#rendererDiv {padding: 10px;width: 280px;font-size: 16px;}</style><script>const SwipeMap = {swipe: null}require(["esri/Map","esri/views/MapView","esri/layers/TileLayer","esri/widgets/LayerList","esri/widgets/Swipe","esri/widgets/Expand"], function (Map, MapView, TileLayer, LayerList, Swipe, Expand) {const map = new Map({basemap: "satellite"});const infrared = new TileLayer({url: "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/WV03_Kilauea_20180519_ShortwaveInfrared/MapServer",maxScale: 3000,id: 'infrared'});const infrared1 = new TileLayer({url: "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/WV03_Kilauea_20180519_ShortwaveInfrared/MapServer",maxScale: 3000,id: 'infrared1'});const infrared2 = new TileLayer({url: "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/WV03_Kilauea_20180519_ShortwaveInfrared/MapServer",maxScale: 3000,id: 'infrared2'});const nearInfrared = new TileLayer({url: "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/WV03_Kilauea_20180519_NearInfrared/MapServer",maxScale: 3000,id: 'nearInfrared'});const nearInfrared1 = new TileLayer({url: "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/WV03_Kilauea_20180519_NearInfrared/MapServer",maxScale: 3000,id: 'nearInfrared1'});const nearInfrared2 = new TileLayer({url: "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/WV03_Kilauea_20180519_NearInfrared/MapServer",maxScale: 3000,id: 'nearInfrared2'});//在底图的基础上添加所需的图层，注意：图层添加的先后顺序会影响当前图层的层级index//如果想更清楚的看到不同图层的卷帘效果，建议用不同的多个图层（因为我用相同图层和层级的原因，有些select之后卷帘会对比不明显）map.addMany([infrared2, nearInfrared2, infrared1, nearInfrared1, infrared, nearInfrared]);const view = new MapView({container: "viewDiv",map: map,zoom: 14,center: [-154.88, 19.46], // longitude, latitudeconstraints: {maxZoom: 17,minZoom: 8}});const expand = new Expand({view: view,content: document.getElementById("rendererDiv"),expanded: true,expandIconClass: "esri-icon-settings2"})view.ui.add(expand, "top-right");const sel = document.getElementById("hillshadeType");//卷帘层的选择、添加和移除sel.addEventListener("change", function () {let allLayers = view.allLayerViews.itemsif (allLayers.length > 0) {for (var i = 0; i < allLayers.length; i++) {if (allLayers[i].layer.id == sel.value) {// create a new Swipe widgetif (SwipeMap.swipe) {//移除上一个卷帘层，如果不执行此操作，会有多个卷帘层同时存在SwipeMap.swipe.destroy()}SwipeMap.swipe = new Swipe({leadingLayers: [allLayers[i].layer],position: 35, // set position of widget to 35%view: view});// add the widget to the viewview.ui.add(SwipeMap.swipe);//卷帘图层添加操作}}}//自己理解的卷帘层原理：在当前图层中选出一个作为卷帘层A，//A从当前地图的所有图层中抽离出来单独作为卷帘层存在，但如果A图层的层级index较低，//卷帘功能虽然实现，但是会看不到卷帘效果，因为卷帘层A被其它图层覆盖，当切换其他图层作为卷帘层B时，A图层会恢复到初始状态，即和B之外的其他图层一样作为地图图层});});</script>
</head><body><div id="viewDiv"></div><div id="rendererDiv" class="esri-widget"><select id="hillshadeType" class="esri-input esri-select"><option value="infrared" selected>infrared</option><option value="infrared1">infrared1</option><option value="infrared2">infrared2</option><option value="nearInfrared">nearInfrared</option><option value="nearInfrared1">nearInfrared1</option><option value="nearInfrared2">nearInfrared2</option></select></div>
</body></html>

总结

熟悉arcgis api for javascript的应该知道，刚开始学习的时候因为官方文档全部是英文的会造成一定程度上的理解困难，而且很多官方的说明和例子都过于基础，很多功能性api也在版本更新中逐渐被淘汰，网上资料可参考的较少，绝大多数都是基于多年前的老版本的博客，可借鉴性较少，故在项目功能实现中加以记录，不喜勿喷！

arcgis api for javascript 的swipe的使用相关推荐

arcgis api for JavaScript _跨域请求
arcgis api for JavaScript 中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...
基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录应用场景需求分析效果图实现代码原理解读应用场景部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能（六）
目的: 1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能,鼠标点击后获取被点击对象的然后以infoWindow的方式显示点击对象的属性 ...
初学ArcGIS API for JavaScript
初学ArcGIS API for JavaScript 对于初学者来说,关于esri提供的一些样式和dojo自带的一些样式还是需要有一定的了解,这块在<WebGIS开发从基础到实践>讲解的 ...
ArcGIS API for JavaScript Bookmarks(书签)
说明:本篇博文介绍的是ArcGIS API for JavaScript中的 Bookmarks(书签) ,书签的作用是,把地图放大到一个地方添加书签,书签名称可以和地图名称一直,单击标签地图会定 ...
ArcGIS API for JavaScript 4.0（一）
原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Sky ...
arcgis api for javascript从地图如何读取要素
arcgis api for javascript如何读取要素,通过ajax请求得到的. 比如: https://gis118.arcgisonline.cn/arcgis/sharing/rest/ ...
arcgis api for javascript创建webscene
arcgis api for javascript创建webscene,核心代码如下: esriConfig.portalUrl = this.config.portal; var scene = n ...
图解ArcGIS API for JavaScript开发环境搭建
ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3.9,它提供了更为丰富而又强大的功能. 本篇经验向大家介绍其本地部署及简单的第一个地图应用程 ...

arcgis api for javascript 的swipe的使用