1

我正在做关于互联网地图的硕士论文。我的任务是在谷歌地图上的网页上展示我部门的研究工作。到目前为止，我在这方面取得了成功，但我的问题是我无法找到将地图上的图层连接到同一页面中表格上的单个行的方式。我正在尝试使用 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:&nbsp</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>
4

0 回答 0