OpenLayers实现图层切换控件_openlayer图层管理 - CSDN文库

145 浏览量更新于2023-03-03 评论收藏 67KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

OpenLayers实现图层切换控件实现图层切换控件

OpenLayers并没有封装图层切换的控件，所以我们需要自己来实现图层控件。

自定义图层切换控件的原理很简单：显示某个图层时，将其他图层隐藏。

完整代码：

layerSwitch.html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>图层切换控件</title>

<link rel="stylesheet" href="../v5.3.0/css/ol.css" />

<script src="../v5.3.0/build/ol.js"></script>

</head>

<body>

<div id="controls">

<input type="checkbox" id="osm" checked />OpenStreetMap

<input type="checkbox" id="bingmap" />Bing Map

<input type="checkbox" id="stamen" />Stamen Map

</div>

<div id="map"></div>

<script>

let map = new ol.Map({

target: 'map', // 关联到对应的div容器

layers: [

new ol.layer.Tile({ // OpenStreetMap图层

source: new ol.source.OSM()

}),

new ol.layer.Tile({ // Bing Map图层

source: new ol.source.BingMaps({

key: '略', // 可以自行到Bing Map官网申请key

imagerySet: 'Aerial'

}),

visible: false // 先隐藏该图层

}),

new ol.layer.Tile({

source: new ol.source.Stamen({

layer: 'watercolor'

}),

visible: false // 先隐藏该图层

})

],

view: new ol.View({ // 地图视图

projection: 'EPSG:3857',

center: [0, 0],

zoom: 0

})

});

let controls = document.getElementById('controls');

// 事件委托

controls.addEventListener('click', (event) => {

if(event.target.checked){ // 如果选中某一复选框

// 通过DOM元素的id值来判断应该对哪个图层进行显示

switch(event.target.id){

case "osm":

map.getLayers().item(0).setVisible(true);

break;

case "bingmap":

map.getLayers().item(1).setVisible(true);

break;

case "stamen":

map.getLayers().item(2).setVisible(true);

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38723027

粉丝: 9
资源: 987

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈