mapboxGL卷帘实现
概述
卷帘对比是webgis中常见的一种对比方式，本文讲述一下如何在mapboxGL中实现卷帘对比。
效果
实现思路
- 通过
input[range]实现卷帘的操作； - 通过地图的事件实现两个地图的联动操作。
实现代码
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>mapboxGL卷帘title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' /><style>html, body, .map {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.map {position: absolute;left: 0;top: 0;font-size: 32px;color: white;padding: 100px 0;}.swipe input[type=range] {margin: 0;padding: 0;width: 100%;position: absolute;top: calc(50% - 18px);left: 0;z-index: 9;outline: none; -webkit-appearance: none;height: 0;background-color: white;}.swipe input[type=range]::-webkit-slider-thumb {-webkit-appearance: none;height:36px;width: 36px;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABhklEQVRoQ+2XPU7EMBCFvyk4AAU3oOAMFJyKrXYRLAIa9lycgYIbUFAjCq9CAgpZO2PHTFDEuHX8PN97/ouw8CYLrx8H+OsEPQFPoNIBX0KVBlYP9wSqLawU8AQqDawe7glUW1gp8H8SCHANHAlsKk0bHR7gDvgQ2ObMk5VAgEvgsRPcCaxyxEu/Ce0czVxNWwnsNA0VYFD8l95G4F4TL+kPcAXcDsaoEKMAieJfgXOBl5ICtW8DnAJPwEkJRBJgpPgLgWetoCn9Ac46iONciChAoviimoSfv6sBQpHA4cfR5XQA8BvFN3MbAEQ3dgzghvbIrGpGAFuBpr7vllpC/eNsEogBQPT4HtvEMYi37gSaexMn7x7tGI1BzH2Mjl6cORdZDGIt8DBpbSUGBVjTPiP6Tb31VYBGbXDFq6JTwabMkwXQg3if4TH3+ebKfW9lA0x11XqcA1g7rOl7AppD1v2egLXDmr4noDlk3e8JWDus6XsCmkPW/Z6AtcOaviegOWTdv/gE9iihUjF+faiWAAAAAElFTkSuQmCC);background-size: 100%;cursor: move;}.swipe .swipe-bar {position: fixed;width: 4px;height: 100%;content: ' ';top: 0;background: rgb(255, 0, 0);z-index: 9;}style>
head><body><div class="swipe"><input type="range" id="swipe"/><div class="swipe-bar" id="swipeBar">div>div><div class="map" id="map1">map1div><div class="map" id="map2">map2div><script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'>script><script>const style1 = {"version": 8,"name": "lzugis","sources": {"nav": {"type": "raster","tiles": ['https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'],"tileSize": 256}},"layers": [{"id": "nav","type": "raster","source": "nav","minzoom": 0,"maxzoom": 17}]}const style2 = {"version": 8,"name": "lzugis","sources": {"nav": {"type": "raster","tiles": ['http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'],"tileSize": 256}},"layers": [{"id": "nav","type": "raster","source": "nav","minzoom": 0,"maxzoom": 17}]}const doms = document.getElementsByClassName('map')const maps = []const styles = [style1, style2]for (let i = 0; i < doms.length; i++) {const dom = doms[i];maps.push(new mapboxgl.Map({container: dom,style: styles[i],center: [103.081163, 37.1612],zoom: 3.5,minZoom: 2,maxZoom: 18}))}maps.forEach(map => {const mapDom = map.getContainer().getAttribute('id')// 鼠标进入的时候注册事件map.on('mouseover', e => {const mouseDom = e.target.getContainer().getAttribute('id')if(mouseDom === mapDom) {map.on('move', moveEvent)} else {map.off('move', moveEvent)}})// 鼠标移除的时候关闭事件map.on('mouseout', e => {maps.forEach(map => {map.off('move', moveEvent)})})})function moveEvent(e) {const c = e.target.getCenter()const d = e.target.getContainer().getAttribute('id')const z = e.target.getZoom()maps.forEach(map => {if(d !== map.getContainer().getAttribute('id')) {map.setCenter(c)map.setZoom(z)}})}const map1 = document.getElementById('map1')const map2 = document.getElementById('map2')const WIDTH = map1.clientWidthconst HEIGHT = map1.clientHeightconst swipe = document.getElementById('swipe')const MAX = 1000swipe.setAttribute('min', 0)swipe.setAttribute('max', MAX)swipe.setAttribute('value', MAX / 2)swipe.oninput = function(e) {setStyle()}setStyle()function setStyle() {const v = swipe.valueconst left = Math.ceil((v / MAX) * WIDTH)map1.style.clip = `rect(0, ${left}px, ${HEIGHT}px, 0)`map2.style.clip = `rect(0, ${WIDTH}px, ${HEIGHT}px, ${left}px)`// 设置bar样式const swipeBar = document.getElementById('swipeBar')swipeBar.style.left = `${left - 2}px`// 设置swipe样式const hWIDTH = MAX / 2const isLeft = v < hWIDTHconst offsetL = Math.abs(((hWIDTH - v) / hWIDTH) * 18)swipe.style.left = isLeft ? `-${offsetL}px` : `${offsetL}px`}script>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！