ArcGIS API for JavaScript 4.2学习笔记[9] 同一种视图不同数据(Map)同步
2017-02-13 04:25
507 查看
本例子核心:对MapView对象的map属性值进行替换即可达到更改地图数据的效果。
这个例子用的不是Map对象了,而是用的发布在服务器上的专题地图(WebMap)来加载到MapView上进行显示。
在html标签中,使用了section标签,不过没什么稀奇的,就把仨按钮放一块而已。
先给出预览图
源代码
这个例子用的不是Map对象了,而是用的发布在服务器上的专题地图(WebMap)来加载到MapView上进行显示。
在html标签中,使用了section标签,不过没什么稀奇的,就把仨按钮放一块而已。
先给出预览图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Load a basic WebMap and swap with another on the same View - 4.2</title> <style> html, body { font-family: sans-serif; padding: 0; margin: 0; height: 100%; width: 100%; overflow: hidden; } #viewDiv { position: absolute; right: 0; left: 0; top: 60px; bottom: 0; } .header { position: absolute; top: 0; width: 100%; height: 10%; } .btns { margin: 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: center; overflow: auto; } .btn-switch { flex-grow: 4; background-color: rgba(34, 111, 14, 0.5); color: #FFF; margin: 1px; width: 50%; padding: 20px; overflow: auto; text-align: center; cursor: pointer; font-size: 0.7em; } .active-map { color: #fff; background-color: rgba(34, 111, 14, 1); } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css"> <script src="https://js.arcgis.com/4.2/"></script> <script> require([ "esri/views/MapView", "esri/WebMap", "dojo/on", "dojo/domReady!" ], function( MapView, WebMap, on ) { var webmapids = [ "ad5759bf407c4554b748356ebe1886e5", "71ba2a96c368452bb73d54eadbd59faa", "45ded9b3e0e145139cc433b503a8f5ab" ]; /************************************************************ * Create multiple WebMap instances ************************************************************/ var webmaps = webmapids.map(function(webmapid) { return new WebMap({ portalItem: { id: webmapid } }); }); /************************************************************ * Initialize the View with the first WebMap ************************************************************/ var view = new MapView({ map: webmaps[0], container: "viewDiv" }); on(document.querySelector(".btns"), ".btn-switch:click", function( event) { /************************************************************ * On a button click, change the map of the View ************************************************************/ var id = event.target.getAttribute("data-id"); if (id) { var webmap = webmaps[id]; view.map = webmap; var nodes = document.querySelectorAll(".btn-switch"); for (var idx = 0; idx < nodes.length; idx++) { var node = nodes[idx]; var mapIndex = node.getAttribute("data-id"); if (mapIndex === id) { node.classList.add("active-map"); } else { node.classList.remove("active-map"); } } } }); }); </script> </head> <body> <section class="header"> <div class="btns"> <div class="btn-switch active-map" data-id="0">Missing Migrants</div> <div class="btn-switch" data-id="1">Refugee Routes</div> <div class="btn-switch" data-id="2">2015 European Sea Arrivals</div> </div> </section> <div id="viewDiv"></div> </body> </html>
源代码
相关文章推荐
- ArcGIS API for JavaScript 4.2学习笔记[8] 2D与3D视图同步
- ArcGIS API for JavaScript 4.2学习笔记[10] 2D添加指北针widget、视图保存、视图padding(第二章完结)
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
- ArcGIS API for JavaScript 4.2学习笔记[6] goTo()地图动画
- ArcGIS API for JavaScript 4.2学习笔记[14] 弹窗的位置、为弹窗添加元素
- ArcGIS API for JavaScript 4.2学习笔记[15] 弹窗内容的格式与自定义格式
- ArcGIS API for JavaScript 4.2学习笔记[28] 可视域分析【使用Geoprocessor类】
- ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮(第五章完结)
- ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】
- ArcGIS API for JavaScript 4.2学习笔记[27] 网络分析之最短路径分析【RouteTask类】
- ArcGIS API for JavaScript 4.2学习笔记[26] 缓冲区分析【基于geometryEngine工具类】
- ArcGIS API for JavaScript 4.2学习笔记[2] 显示3D地图
- ArcGIS API for JavaScript 4.2学习笔记[25] 官方第八章Analysis(空间查询)概览与解释
- ArcGIS API for JavaScript 4.2学习笔记[19] 搜索小部件——使用更多数据源
- ArcGIS API for JavaScript 4.2学习笔记[23] 没有地图如何进行查询?【FindTask类的使用】
- ArcGIS API for JavaScript 4.2学习笔记[11] 官方第五章Popups(弹窗)概览与解释
- ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼(缩略图的实现及异步处理、Promise、回调函数、监听的笔记)
- ArcGIS API for JavaScript 4.2学习笔记[24] 【IdentifyTask类】的使用(结合IdentifyParameters类)(第七章完结)
- ArcGIS API for JavaScript 4.2学习笔记[22] 使用【QueryTask类】进行空间查询 / 弹窗样式
- ArcGIS API for JavaScript 4.2学习笔记[13] Layer的弹窗(PopupTemplate)