Я пытаюсь отобразить два слоя WMS, и мне это удалось. Далее нужно получить информацию о конкретном слое WMS и отобразить его как всплывающее окно. Я использую Openlayers3 с Geoserver.
Первый уровень - это «Граница деревни», который является базовым уровнем, а второй - «Сетки OSM». Эти сетки пронумерованы от 1 до 87. Когда я нажимаю на каждую сетку, она должна отображать информацию о ее атрибутах, такую как номер сетки, номер карты и т. Д., В виде всплывающего окна.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://localhost:8080/geoserver/openlayers3/ol.css" type="text/css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<style>
.ol-zoom {
top: 52px;
}
.ol-toggle-options {
z-index: 1000;
background: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
position: absolute;
left: 8px;
top: 8px;
}
#updateFilterButton, #resetFilterButton {
height: 22px;
width: 22px;
text-align: center;
text-decoration: none !important;
line-height: 22px;
margin: 1px;
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
font-weight: bold !important;
background: rgba(0,60,136,0.5);
color: white !important;
padding: 2px;
}
.ol-toggle-options a {
background: rgba(0,60,136,0.5);
color: white;
display: block;
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
font-size: 19px;
font-weight: bold;
height: 22px;
line-height: 11px;
margin: 1px;
padding: 0;
text-align: center;
text-decoration: none;
width: 22px;
border-radius: 2px;
}
.ol-toggle-options a:hover {
color: #fff;
text-decoration: none;
background: rgba(0,60,136,0.7);
}
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
iframe {
width: 100%;
height: 250px;
border: none;
}
/* Toolbar styles */
#toolbar {
position: relative;
padding-bottom: 0.5em;
}
#toolbar ul {
list-style: none;
padding: 0;
margin: 0;
}
#toolbar ul li {
float: left;
padding-right: 1em;
padding-bottom: 0.5em;
}
#toolbar ul li a {
font-weight: bold;
font-size: smaller;
vertical-align: middle;
color: black;
text-decoration: none;
}
#toolbar ul li a:hover {
text-decoration: underline;
}
#toolbar ul li * {
vertical-align: middle;
}
#map {
clear: both;
position: relative;
width: 600px;
height: 800px;
border: 1px solid black;
bottom:802px;
left:450px;
}
img{
position: relative;
width: 444px;
height: 775px;
top:5px;
}
#legend {
position: relative;
width: 444px;
height: 800px;
border: 1px solid black;
top:0px;
}
#wrapper {
width: 444px;
position: relative;
bottom:802px;
left:450px;
}
#location {
bottom:802px;
left:450px;
}
/* Styles used by the default GetFeatureInfo output, added to make IE happy */
table.featureInfo, table.featureInfo td, table.featureInfo th {
border: 1px solid #ddd;
border-collapse: collapse;
margin: 0;
padding: 0;
font-size: 90%;
padding: .2em .1em;
}
table.featureInfo th {
padding: .2em .2em;
font-weight: bold;
background: #eee;
}
table.featureInfo td {
background: #fff;
}
table.featureInfo tr.odd td {
background: #eee;
}
table.featureInfo caption {
text-align: left;
font-size: 100%;
font-weight: bold;
padding: .2em .2em;
}
</style>
<script src="http://localhost:8080/geoserver/openlayers3/ol.js" type="text/javascript"></script>
<title>OpenLayers map preview</title>
</head>
<body>
<div id="legend">
<img src="Legend.PNG.jpg">
</div>
<div id="map">
<input type="checkbox" value="Village Boundary" checked>Village Boundary<br>
<input type="checkbox" value="OSM Grids">OSM Grids<br>
</div>
<div id="wrapper">
<div id="location"></div>
<div id="scale"></div>
</div>
<script type="text/javascript">
var pureCoverage = false;
// if this is just a coverage or a group of them, disable a few items,
// and default to jpeg format
var format = 'image/png';
var bounds = [472440.0520989996, 911801.0984444692,
768802.9061656371, 1424302.9894040015];
if (pureCoverage) {
document.getElementById('antialiasSelector').disabled = true;
document.getElementById('jpeg').selected = true;
format = "image/jpeg";
}
var supportsFiltering = true;
if (!supportsFiltering) {
document.getElementById('filterType').disabled = true;
document.getElementById('filter').disabled = true;
document.getElementById('updateFilterButton').disabled = true;
document.getElementById('resetFilterButton').disabled = true;
}
var mousePositionControl = new ol.control.MousePosition({
className: 'custom-mouse-position',
target: document.getElementById('location'),
coordinateFormat: ol.coordinate.createStringXY(5),
undefinedHTML: ' '
});
var projection = new ol.proj.Projection({
code: 'EPSG:32643',
units: 'm',
axisOrientation: 'neu',
global: false
});
var villageboundary = new ol.layer.Image({
title:'Village Boundary',
type: 'base',
label:'Village Boundary',
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8080/geoserver/geog585/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
"LAYERS": 'geog585:Village_Boundary',
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});
var osmgrid = new ol.layer.Image({
title:'OSM Grid',
visible: false,
label:'OSM Grid',
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8080/geoserver/geog585/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
"LAYERS": 'geog585:OSM_Grid_25000_include_hazard_line',
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});
//Tile OSM
var tiledOSM = new ol.layer.Tile({
title:'OSM Grids',
visible: false,
label:'OSM Grids',
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/geog585/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
"LAYERS": 'geog585:OSM_Grid_25000_include_hazard_line',
"exceptions": 'application/vnd.ogc.se_inimage',
tilesOrigin: 472849.4548000004 + "," + 912420.9497999996
}
})
});
//Tile OSM
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([mousePositionControl]),
target: 'map',
layers: [
villageboundary,
tiledOSM
],
view: new ol.View({
projection: projection
})
});
map.getView().on('change:resolution', function(evt) {
var resolution = evt.target.get('resolution');
var units = map.getView().getProjection().getUnits();
var dpi = 25.4 / 0.28;
var mpu = ol.proj.METERS_PER_UNIT[units];
var scale = resolution * mpu * 39.37 * dpi;
if (scale >= 9500 && scale <= 950000) {
scale = Math.round(scale / 1000) + "K";
} else if (scale >= 950000) {
scale = Math.round(scale / 1000000) + "M";
} else {
scale = Math.round(scale);
}
document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
});
map.getView().fit(bounds, map.getSize());
var changeLayer = function changeLayer(ev) {
var val = $(this).val();
var checked = $(this).is(':checked');
map.getLayers().forEach(function (layer) {
if (layer.get('label') === val) {
layer.setVisible(checked);
}
});
};
$('input').each(function (){ $(this).on('change', changeLayer); });
</script>
</body>
</html>
Кто-нибудь может мне с этим помочь.
