Openlayers - 侧边栏中的复选框事件
Posted
技术标签:
【中文标题】Openlayers - 侧边栏中的复选框事件【英文标题】：Openlayers - Checkbox events in Sidebar 【发布时间】：2018-05-04 14:35:05 【问题描述】：我正在对地图进行编程，并根据 GeoJSON 文件在其上放置标记。我的标记以良好的坐标很好地显示在地图上，现在我想实现一个侧边菜单。我创建了一个带有复选框的侧边菜单，我希望标记仅在我单击相关复选框时出现。
我的代码中有两部分，第一部分包含导入、div 和 sidemenu（nd a part of），第二部分包含显示地图和标记所需的所有 OpenLayers 代码（在标记中）。
我该怎么做？我找到了这段代码：
function verifyCheckBoxes(source)
document.getElementById('button-checkbox-'+source).checked = false;
但是如何选择复选框信息以便在我的标记中使用这些信息？
我有这个代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
<link rel="stylesheet" href="ol/ol.css">
<link rel="stylesheet" href="ol/ol3-layerswitcher.css">
<!-- The line below is only needed for old environments like Internet Explorer and android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="ol/ol.js"></script>
<script src="ol/ol3-layerswitcher.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="sidebar/css/ol3-sidebar.css" />
<script src="sidebar/js/ol3-sidebar.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
</head>
<body>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<!--Sidemenu-->
<div id="sidebar" class="sidebar collapsed">
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-map-marker"></i></a></li>
</ul>
</div>
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
Marqueurs
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<br>
<input type="checkbox" id="piscine" name="piscine" value="piscine">
<label for="subscribeNews">Piscines</label>
<br><br>
<input type="checkbox" id="parking" name="parking" value="parking">
<label for="subscribeNews">Parkings</label>
</div>
<div class="sidebar-pane" id="profile">
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
</div>
</div>
<script>
//Fonds de carte
var layer1 = new ol.source.TileWMS(
url: '...',
params: 'LAYERS': '...', 'FORMAT': 'image/png',
);
//other layers
//Pictogrammes
var piscine = new ol.style.Style(
image: new ol.style.Icon((
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'image/sports-piscine.png'
))
);
//Marqueurs
var sourceLayer = new ol.source.Vector(
url: '...piscines.json',
format: new ol.format.GeoJSON()
);
var vectorLayer = new ol.layer.Vector(
source: sourceLayer
);
var view = new ol.View( //paramètres de la map
center: [xxx, xxx],
minZoom: 11,
maxZoom: 19,
zoom: 13
);
//Map
var map = new ol.Map(
layers: [new ol.layer.Group(
title: 'Menu1',
layers: [
new ol.layer.Tile(
title: 'layer1',
source: layer1,
type: 'base'
),
new ol.layer.Tile(
title: 'layer2',
source: layer2,
type: 'base',
visible: false
)
]
),
new ol.layer.Group(
title: 'Menu2',
layers: [
new ol.layer.Tile(
title: 'layer3',
source: layer3,
format: new ol.format.WFS(),
visible: false
)
]
),
],
target: 'map',
view: view
);
map.addControl(vectorLayer);
var sidebar = new ol.control.Sidebar( element: 'sidebar', position: 'left' );
map.addControl(sidebar);
map.addControl(new ol.control.LayerSwitcher());
var markers = function style(feature, resolution)
if (feature.get('name')!=null)
return piscine;
else
return null;
vectorLayer.setStyle(markers);
// Popup
var element = document.getElementById('popup');
var popup = new ol.Overlay(
element: element,
autoPan: true,
offset: [0, -30]
);
map.addOverlay(popup);
var content_element = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
closer.onclick = function()
popup.setPosition(undefined);
closer.blur();
return false;
;
map.on('click', function(evt)
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature)
return feature;
);
if (feature)
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
if(feature.get('name')!=null)
var content = '<center><h2>' + feature.get('name') + '</h2></center>' + '<br>';
else
var content = '<h5>' + 'No informations' + '</h5>';
if(feature.get('addr:street')!=null)
content += '<h5>' + '<i>Adress : </i>' + feature.get('addr:street') + '</h5>';
if(feature.get('phone')!=null)
content += '<h5>' + '<i>Phone number : </i>' + feature.get('phone') + '</h5>';
if(feature.get('website')!=null)
content += '<h5>' + '<i>Website : </i>' + '</h5>' + '<p>' + feature.get('website') + '</p>';
content_element.innerHTML = content;
popup.setPosition(coord);
);
map.on('pointermove', function(e)
if (e.dragging)
return;
;
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getViewport().style.cursor = hit ? 'pointer' : '';
);
</script>
</body>
</html>
【问题讨论】：
我不明白你的问题是什么？根据复选框状态使标记出现/消失？ 是的，这就是我想做的！ 【参考方案1】：公平地说，这类问题有很多例子。我一直在寻找类似的东西，但我正在添加/删除底图而不是矢量图层
$('#customCheck1').on('change', function()
var isChecked = $(this).is(':checked');
if (isChecked)
map.addLayer(osmBasic)
else
map.removeLayer(osmBasic);
)
这是小提琴
Fiddle
【讨论】：
感谢您的帮助，问题不是我预料的，这是更新问题！代码功能齐全，但地图没有更新......我已经搜索了如何做到这一点，但没有任何效果...... @Adrien 每次选中复选框时图层的来源都会更新吗？ @SachiTekina 我尝试使用“map.addControl(vectorLayer)”更新图层，但显然标记仅在移动和加载页面时刷新...以上是关于Openlayers - 侧边栏中的复选框事件的主要内容，如果未能解决你的问题，请参考以下文章