我正在做关于互联网地图的硕士论文。我的任务是在Google地图上的网页上展示我部门的研究工作。到目前为止,我在这方面取得了成功,但我的问题是我无法找到将地图上的图层连接到同一页面中表格中各个行的方式。我正在尝试使用jquery来表示表中的链接行与地图上的图层。可以任何身体帮助我如何做到这一点。 你可以在下面看到我的作品:
[http://130.237.175.39/goran_1.html][1]
在我的页面中,我为地图对象和表创建了两个div元素。我在这里发布代码的这两个元素。如果你想看到完整的代码,你可以在页面源代码中看到它。
<!DOCTYPE html>
<html>
<head>
<title>Land Uplift</title>
<script src="http://193.10.6.144/api/OpenLayers.js"></script>
<link rel="stylesheet" type="text/css" href="http://130.237.186.211/geoserver/scalebar.css">
<link rel="stylesheet" type="text/css" href="http://130.237.186.211/geoserver/mousepos.css">
</head>
<body>
<div id="header">
<h1 style="margin-bottom:0;text-align:center;">Land Uplift Project</h1></div>
<div id="table" style="height:100px;width:200px;margin-left:50px;">
<table border="1">
<tr>
<th>Layer</th>
<th>Layer Description</th>
</tr>
<tr>
<td>5000_fKr</td>
<td>4500_fKr</td>
</tr>
<tr>
<td>4000_fKr</td>
<td>3500_fKr</td>
</tr>
</table></div>
<div id="content" style="background-color:#EEEEEE;height:400px;width:600px;float:right;">
Description of the project</div>
<div id="map" style="height:800px;width:1000px;float:left;">
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map', {allOverlays: true, controls: []});
var wms_layer_Test_5000_fKr = new OpenLayers.Layer.WMS(
'Test_5000_fKr',
'http://130.237.175.39:8080/geoserver/wms/test_test',
{layers: 'Test_5000_fKr', transparent: "true", format: "image/png"},
{maxExtent: new OpenLayers.Bounds(585000, 6600000, 740000, 6722500), maxResolution: 'auto', projection:"EPSG:3006", units: "m"},
{isBaseLayer: false},
{visibility: true},
{transparent: true}
);
map.addLayers([wms_layer_Test_5000_fKr]);
var scalebar = new OpenLayers.Control.ScaleLine();
map.addControl(scalebar);
map.addControl(
new OpenLayers.Control.MousePosition({
prefix: '<a target="_blank" ' +
'href="http://spatialreference.org/ref/epsg/3006/">' +
'SWEREF99 TM: </a>',
separator: ' , ',
numDigits: 0,
emptyString: 'Mouse is not over map.'
})
);
var panel = new OpenLayers.Control.NavToolbar();
map.addControl(panel);
var panzoom = new OpenLayers.Control.PanZoomBar();
map.addControl(panzoom);
var layer = new OpenLayers.Control.LayerSwitcher({'ascending':false});
map.addControl(layer);
map.zoomToMaxExtent();
</script></div>
<div id="footer" style="clear:both;text-align:left;">
Copyright © ink.su.se</div>
</body>
</html>