【WebGIS初学到入职】（八）用OpenLayers实现图层卷帘效果

最新推荐文章于 2024-01-31 21:51:28 发布

ReBeX

最新推荐文章于 2024-01-31 21:51:28 发布

阅读量909

点赞数 2

分类专栏：【WebGIS初学到入职】文章标签： javascript html

本文链接：https://blog.csdn.net/ReBeX/article/details/120802045

版权

【WebGIS初学到入职】专栏收录该内容

21 篇文章 78 订阅

订阅专栏

一、前言

图层卷帘可以做到一种地图视觉效果。能够轻易得做到展示、对比两份地图。

官网实例：Layer Swipe
参考博客：Openlayers官方示例详解五之图层卷帘（Layer Swipe）

二、开始

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图层卷帘</title>
    <link rel="stylesheet" href="/css/ol.css">
    <script src="/js/ol.js"></script>
    <script src="layerswipe.js"></script>      
    <script type="text/javascript">
        window.onload = function () {map();}
    </script>  
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #map{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        #swipe{
            position: absolute;
            bottom: 60%;
            z-index: 888;
            width: 100%;
        }
        .rangeMain {
            height: 0px; /*横条的高度*/
        }
    </style>
</head>
<body>
    <div id="map">    
        <input id="swipe" type="range" class="rangeMain"/>
    </div>   
</body>
</html>

然后就是JavaScript部分：

/*  
*   layerswipe.js
*/
var map1;
function map(){
map1 = new ol.Map({
    target: 'map', //地图容器div的id
    loadTilesWhileInteracting: true,
    layers: [],
    view: new ol.View({
        center: [12622513, 2636878], //地图初始中心点
        zoom: 9,  //地图初始显示级别
    }),
    controls: ol.control.defaults({}).extend([])
});

var osm = new ol.layer.Tile({
    title: "开发街道地图",
    source: new ol.source.OSM()
});
var stamen = new ol.layer.Tile({
    title: "Stamen地图",
    source: new ol.source.Stamen({ layer: 'watercolor' }),
});
map1.addLayer(stamen);
map1.addLayer(osm);
//-----------------------------------------------------------------------
var swipe = document.getElementById('swipe');   // 用于控制卷帘位置的DOM元素
osm.on('prerender', function(event){          // 在地图渲染之前触发
    var ctx = event.context;                 //获得canvas渲染上下文
    var width = ctx.canvas.width * (swipe.value / 100);  // 用于保存卷帘的位置
    
    ctx.save();                 // 保存canvas设置
    ctx.beginPath();            // 开始绘制路径
    ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);    // 绘制矩形
    ctx.clip();                 // 裁剪Bing地图，以形成卷帘效果
})

osm.on('postrender', function(event){     // 在地图渲染之后触发
    var ctx = event.context;
    ctx.restore();              // 恢复canvas设置
});

swipe.addEventListener('input', function(){     // 在每次用户改变swipe控件时触发
    map1.render();               // 渲染地图
}, false);
}

ReBeX

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
【WebGIS初学到入职】（八）用OpenLayers实现图层卷帘效果

一、前言图层卷帘可以做到一种地图视觉效果。能够轻易得做到展示、对比两份地图。官网实例：Layer Swipe参考博客：Openlayers官方示例详解五之图层卷帘（Layer Swipe）二、开始<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
复制链接

扫一扫