Javascript OpenLayers 4-同时显示来自多个GeoJSON文件的功能
我试图在选中或取消选中复选框时显示或隐藏标记。在每个标记上，我想显示一个包含GeoJSON文件中信息的弹出窗口 当我只选中一个复选框时，将按预期执行右侧代码块，但当我同时选中两个复选框时，只显示最后一个复选框的弹出窗口。在我的代码中，我有两种类型的标记：游泳池和停车场，例如，如果我选中游泳池的框，正确的信息将显示在我的弹出窗口中，但是如果我也选中停车场的框，则只有停车场的弹出窗口中包含的信息是正确的（所有游泳池的弹出窗口都是错误的：只显示“未定义的”） 问题是这两部分不是同时执行的！你知道吗 我的代码：Javascript OpenLayers 4-同时显示来自多个GeoJSON文件的功能,javascript,jquery,openlayers,Javascript,Jquery,Openlayers,我试图在选中或取消选中复选框时显示或隐藏标记。在每个标记上，我想显示一个包含GeoJSON文件中信息的弹出窗口 当我只选中一个复选框时，将按预期执行右侧代码块，但当我同时选中两个复选框时，只显示最后一个复选框的弹出窗口。在我的代码中，我有两种类型的标记：游泳池和停车场，例如，如果我选中游泳池的框，正确的信息将显示在我的弹出窗口中，但是如果我也选中停车场的框，则只有停车场的弹出窗口中包含的信息是正确的（所有游泳池的弹出窗口都是错误的：只显示“未定义的”） 问题是这两部分不是同时执行的！你知道吗 我
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Affichage correct de la page -->
<title>Markers</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="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<link rel="stylesheet" href="sidebar/css/ol3-sidebar.css" />
<script src="sidebar/js/ol3-sidebar.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</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="swimmpool" name="swimmpool" value="swimmpool">
<label for="subscribeNews">Swimming pools</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>
//Layers
var layer1 = new ol.source.TileWMS({
url: '...',
params: {...},
attributions: '...'
});
var layer2 = new ol.source.TileWMS({
url: '...',
params: {...},
attributions: '...'
});
var layer3 = new ol.source.TileWMS({
url: '...',
params: {...},
attributions: '...'
});
//Marker's style
var parkvert = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'image/parking-vert.png'
}))
});
var parkorange = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'image/parking-orange.png'
}))
});
var parkrouge = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'image/parking-rouge.png'
}))
});
var parknoir = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'image/parking-noir.png'
}))
});
var style_swimmpool = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'image/sports-piscine.png'
}))
});
//GeoJSON files
var swimmpoolLayer = new ol.source.Vector({
url: '...',
format: new ol.format.GeoJSON()
});
var parkingLayer = new ol.source.Vector({
url: '...',
format: new ol.format.GeoJSON()
});
var vectorLayer_Swimmpool = new ol.layer.Vector({
source: swimmpoolLayer
});
var vectorLayer_Parking = new ol.layer.Vector({
source: parkingLayer
});
var view = new ol.View({ //paramètres de la map
center: [0, 0],
minZoom: 11,
maxZoom: 19,
zoom: 13
});
//Map
var map = new ol.Map({
layers: [new ol.layer.Group({
title: 'Fonds de carte',
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: 'Surcouche',
layers: [
new ol.layer.Tile({
title: 'Layer3',
source: layer3,
format: new ol.format.WFS(), //crée une check box
visible: false
})
]
}),
],
target: 'map',
view: view
});
var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' });
map.addControl(sidebar);
map.addControl(new ol.control.LayerSwitcher());
$('#swimmpool').on('change', function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
map.addControl(vectorLayer_Swimmpool);
vectorLayer_SwimmPool.setStyle(style_swimmpool);
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>' + 'Aucune information' + '</h5>';
}
if(feature.get('addr:street')!=null) {
content += '<h5>' + '<i>Adresse : </i>' + feature.get('addr:street') + '</h5>';
}
if(feature.get('phone')!=null) {
content += '<h5>' + '<i>Numéro de téléphone : </i>' + feature.get('phone') + '</h5>';
}
if(feature.get('website')!=null) {
content += '<h5>' + '<i>Site internet : </i>' + '</h5>' + '<p>' + feature.get('website') + '</p>';
}
content_element.innerHTML = content;
popup.setPosition(coord);
}
});
} else {
map.removeControl(vectorLayer_Swimmpool);
}
});
var markers = function style(feature, resolution) {
if (feature.get('PLACES') == null) {
return parknoir;
} else if(feature.get('PLACES') <= feature.get('CAPACITE') * 0.05) {
return parkrouge;
} else if(feature.get('PLACES') <= feature.get('CAPACITE') * 0.15){
return parkorange;
} else if(feature.get('PLACES') > feature.get('CAPACITE') * 0.15) {
return parkvert;
}
}
$('#parking').on('change', function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
map.addControl(vectorLayer_Parking);
vectorLayer_Parking.setStyle(markers);
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('NOM')!=null) {
var content = '<center><h2>' + feature.get('NOM') + '</h2></center>' + '<br>';
}
if(feature.get('ADRESSE')!=null) {
content += '<h5>' + '<i>Adresse : </i>' + feature.get('ADRESSE') + '</h5>';
}
if(feature.get('CAPACITE')!=null) {
content += '<h5>' + '<i>Capacité : </i>' + feature.get('CAPACITE') + '</h5>';
}
if(feature.get('PLACES')!=null) {
content += '<h5>' + '<i>Places disponibles : </i>' + feature.get('PLACES') + '<h5>';
}
content_element.innerHTML = content;
popup.setPosition(coord);
}
});
} else {
map.removeControl(vectorLayer_Parking);
}
});
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>
标记
侯爵
游泳池
停车场
轮廓
//层
var layer1=新ol.source.TileWMS({
url:“…”，
参数：{…}，
属性：“…”
});
var layer2=新ol.source.TileWMS({
url:“…”，
参数：{…}，
属性：“…”
});
var layer3=新ol.source.TileWMS({
url:“…”，
参数：{…}，
属性：“…”
});
//马克风格
var parkvert=新ol.style.style({
图片：新ol.style.Icon(({
主播：[0.5,46]，
主播：“分数”，
anchorYUnits:'像素'，
src:'image/parking vert.png'
}))
});
var parkonge=新的ol.style.style({
图片：新ol.style.Icon(({
主播：[0.5,46]，
主播：“分数”，
anchorYUnits:'像素'，
src:'image/parking orange.png'
}))
});
var parkrouge=新的ol.style.style({
图片：新ol.style.Icon(({
主播：[0.5,46]，
主播：“分数”，
anchorYUnits:'像素'，
src:'image/parking ruge.png'
}))
});
var parknoir=新的ol.style.style({
图片：新ol.style.Icon(({
主播：[0.5,46]，
主播：“分数”，
anchorYUnits:'像素'，
src:'image/parking noir.png'
}))
});
var style_swimmpool=新ol.style.style({
图片：新ol.style.Icon(({
主播：[0.5,46]，
主播：“分数”，
anchorYUnits:'像素'，
src:'image/sports piscine.png'
}))
});
//GeoJSON文件
var swimmpoolLayer=新ol.source.Vector({
url:“…”，
格式：new ol.format.GeoJSON（）
});
var parkingLayer=新ol.source.Vector({
url:“…”，
格式：new ol.format.GeoJSON（）
});
var vectorLayer\u Swimmpool=新ol.layer.Vector({
来源：swimmpoolLayer
});
var vectorLayer_Parking=新建ol.layer.Vector({
资料来源：parkingLayer
});
var view=新的ol.view（{//paramètres de la map
中间：[0,0]，
minZoom:11，
maxZoom:19，
缩放：13
});
//地图
var map=新ol.map({
图层：[新建ol.layer.Group({
标题：“点菜坊”，
图层：[
新ol.layer.Tile({
标题：“第1层”，
资料来源：第1层，
类型：“基本”
}),
新ol.layer.Tile({
标题：“第二层”，
资料来源：第二层，
类型：'base'，
可见：假
})
]
}),
新ol.layer.Group({
标题：“Surcouche”，
图层：[
新ol.layer.Tile({
标题：“第三层”，
资料来源：第3层，
格式：new ol.format.WFS（），//crée une复选框
可见：假
})
]
}),
],
目标：“地图”，
视图：视图
});
var sidebar=newol.control.sidebar（{element:'sidebar'，position:'left'}）；
map.addControl（侧栏）；
addControl（新的ol.control.LayerSwitcher（））；
$（'#swimmpool'）。在（'change'，function（）上{
var isChecked=$（this）.is（'：checked'）；
如果（已检查）{
map.addControl（矢量层\开关池）；
vectorLayer_SwimmPool.setStyle（style_SwimmPool）；
var元素=document.getElementById（'popup'）；
var popup=新ol.Overlay({
元素：元素，
自动扫描：是的，
偏移量：[0，-30]
});
map.addOverlay（弹出窗口）；
var content\u element=document.getElementById（'popu
document.getElementById("parcel").addEventListener("click", function(){
if(!toggleparcels){
map.addLayer(layerWFS)
} else {
map.removeLayer(layerWFS)
}
toggleparcels=!toggleparcels
});
window.toggleparcels=true;
map.on('click', function(evt){
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
if (layer == ssbores || layer == ssdischarge || layer == ssfacility) {
return feature;
}
});
var feature2 = map.forEachFeatureAtPixel(evt.pixel,
function(feature2, layer2){
if (layer2===meters) {
return feature2;
}
});