应用ArcGIS Server JavaScript API实现地图卷帘效果实现
2023-09-11 14:19:52 时间
var maskDynamicMapServiceLayer = null; var maskDynamicMapServiceLayerDiv = null; var pointNumb = 0; var alignType = ""; var mapMouseDownEvent= null; var mapMouseMoveEvent = null; var mapMouseUpEvent = null; var mapDiv = null; function initOverlayerContrast(layer) { maskDynamicMapServiceLayer = layer; maskDynamicMapServiceLayerDiv = document.getElementById("map_" + maskDynamicMapServiceLayer.id); mapDiv = document.getElementById("map"); mapDiv.onmousedown = startDragSwipe; map.disablePan(); } function destroyOverlayerContrast() { mapDiv.onmousedown = null; mapDiv = null; maskDynamicMapServiceLayer = null; maskDynamicMapServiceLayerDiv = null; map.enablePan(); } function startDragSwipe(e) { pointNumb = 1; var eventObj = window.event || e; var x = eventObj.clientX; var y = eventObj.clientY; maskDynamicMapServiceLayerDiv = document.getElementById("map_" + maskDynamicMapServiceLayer.id); mapDiv.onmousemove = moveDragSwipe; mapDiv.onmouseup = stopDragSwipe; // var leftOffset = x; var topOffset = y; var rightOffset = document.body.clientWidth - x; var bottomOffset = document.body.clientHeight - y; var minOffset = 0; if (leftOffset < rightOffset) { minOffset = leftOffset; alignType = "left"; } else { minOffset = rightOffset; alignType = "right"; } if (topOffset < minOffset) { minOffset = topOffset; alignType = "top"; } if (bottomOffset < minOffset) { minOffset = bottomOffset; alignType = "bottom"; } // var clip = "rect(auto, auto, auto," + x + "px)"; if (alignType == "right") { clip = "rect(auto, " + x + "px, auto, auto)"; } else if (alignType == "top") { clip = "rect(" + y + "px, auto, auto, auto)"; } else if (alignType == "bottom") { clip = "rect(auto, auto, " + y + "px, auto)"; } maskDynamicMapServiceLayerDiv.style.clip = clip; } function moveDragSwipe(e) { var eventObj = window.event || e; var x = eventObj.clientX; var y = eventObj.clientY; // if (maskDynamicMapServiceLayerDiv && pointNumb == 1) { var clip = "rect(auto, auto, auto," + x + "px)"; if (alignType == "right") { clip = "rect(auto, " + x + "px, auto, auto)"; } else if (alignType == "top") { clip = "rect(" + y + "px, auto, auto, auto)"; } else if (alignType == "bottom") { clip = "rect(auto, auto, " + y + "px, auto)"; } maskDynamicMapServiceLayerDiv.style.clip = clip; } } // function stopDragSwipe(evt) { if (maskDynamicMapServiceLayerDiv) { maskDynamicMapServiceLayerDiv.style.clip = "rect(auto, auto, auto, auto)"; } pointNumb = 0; mapDiv.onmousemove = null; mapDiv.onmouseup = null; }
相关文章
- jquery对象和javascript对象相互转换
- 《javascript模式》读书笔记:容易踩中的那些坑
- JavaScript变量声明提前
- JavaScript实现html购物车代码
- 第一百一十四节,JavaScript文档对象,DOM进阶
- [Javascript] Natively Format JavaScript Dates and Times
- [Javascript] Broadcaster, operator, listener pattern: Write a debounce operator -- 1
- [Javascript] Avoiding Mutations in JavaScript with Immutable Data Structures
- [Javascript] Conditionally spread entries to a JavaScript object
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- [Javascript] JavaScript赋值时的传值与传址
- [Javascript] Proper use of console.assert in JavaScript
- [Javascript] How to use JavaScript's String.replace
- [Javascript] What is JavaScript Function Currying?
- SQL SERVER全面优化-------Expert for SQL Server 诊断系列
- SQL Server replication requires the actual server name to make a connection to the server.错误解决
- [Javascript] Create Your First Iterator in JavaScript
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Identify and Deal with NaN in JavaScript
- [Javascript] How to use JavaScript's String.replace
- javascript 显示一定范围内的素数(质数)
- Javascript Mvc学习杂记3
- javascript:每次只加载3个页面的幻灯(chrome 105.0.5195.125)
- javascript面向对象之Javascript 继承
- 使用HANA Web-based Development Workbench创建最简单的Server Side JavaScript
- SQL SERVER服务器链接连接(即sql server的跨库连接)
- Atitit.js模块化 atiImport 的新特性javascript import
- 【JavaScript变量】Javascript的全局变量&局部变量
- 【微搭低代码】JavaScript基础知识-循环和条件控制
- javascript中的call和apply
- eclipse tomcat add时提示The Tomcat server configuration at ServersTomcat v6.0 Server at localhost-
- 0402-服务注册与发现-Eureka Server使用、将服务注册到Eureka server上
- 从 Microsoft Dynamics CRM 4.0 server迁移到 Microsoft Dynamics CRM 2013 Server
- Javascript 在严格模式下禁止指向 this
- web前端Javascript开发学习之JavaScript中的预编译如何进行
- JavaScript混淆安全加固——比较全值得细看