2

我需要使用 OpenLayers 在易滑的地图上显示带有信息的标记。我正在尝试做的一个例子可以在这里看到：http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

由于我使用的软件产品不灵活，我不能使用服务器端脚本，也不能直接从我的 SQL 数据库访问我需要的信息。

我能做的是从 SQL 数据库中获取信息并将其读入一个 html 表，之后我可以将该表解析为一个 javascript 数组。问题是 OpenLayers.Layer.Text 需要一个文本文件，那么如何将 javascript 数组中的信息转换为 OpenLayers 可以用来在每个标记旁边显示信息的格式？

附加代码

这是我尝试使用向量来解决问题。不幸的是，这段代码似乎不起作用——我已经检查过了，看起来还不错。有任何想法吗？

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">

    var osmap = null;
    var wgs84Proj = null;
    var osmapProj = null;

    function initialise() 
    {
        var elmnts = document.getElementById('data').getElementsByTagName('tr');
        var ACol = -1;
        var BCol = -1;
        var CCol = -1;      
        var LonCol = -1;
        var LatCol = -1;
        var minX = 0;
        var maxX = 0;
    var minY = 0;
    var maxY = 0;

    // Match fields to column headings in first row
    for (var col=0; col < elmnts[0].cells.length; col++) 
    {
        var val = elmnts[0].cells[col].innerHTML;
        switch (val) 
        {
            case "A": ACol = col; break;
            case "B": BCol = col; break;
            case "C": CCol = col; break;                
            case "LON": LonCol = col; break;
            case "LAT": LatCol = col; break;
            default:
        }
    }

    // Initialise bounding coordinates
    if (elmnts.length > 1) 
    {
        minX = Number(elmnts[1].cells[LonCol].innerHTML) - 0.00001
        maxX = Number(elmnts[1].cells[LonCol].innerHTML) + 0.00001
        minY = Number(elmnts[1].cells[LatCol].innerHTML) - 0.00001
        maxY = Number(elmnts[1].cells[LatCol].innerHTML) + 0.00001
    }

    osmap = new OpenLayers.Map
    (
        {
            div: "map_canvas",
            controls: 
            [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.Attribution()
            ]
        }
    );

    var mapnik = new OpenLayers.Layer.OSM();
    mapnik.transitionEffect = 'resize';
    osmap.addLayer(mapnik);

    var vectors = new OpenLayers.Layer.Vector("Overlay");
    osmap.addLayer(vectors);

    var wgs84Proj = new OpenLayers.Projection("EPSG:4326"); // WGS 1984 Projection
    var osmapProj = osmap.getProjectionObject(); // this will be Spherical Mercator Projection for OSM

    // Loop through the table rows...
    for (var row=1; row < elmnts.length; row++) 
    {
        var AVal = elmnts[row].cells[ACol].innerHTML;
        var BVal = elmnts[row].cells[BCol].innerHTML;
        var CVal = elmnts[row].cells[CCol].innerHTML;           
        var lonVal = Number(elmnts[row].cells[LonCol].innerHTML);
        var latVal = Number(elmnts[row].cells[LatCol].innerHTML);

        if (lonVal != 0 && latVal != 0) 
        {
            // Adjust bounding coordinates
            if (lonVal < minX) minX = lonVal;
            if (lonVal > maxX) maxX = lonVal;
            if (latVal < minY) minY = latVal;
            if (latVal > maxY) maxY = latVal;

            vectors.addFeatures(
                new OpenLayers.Feature.Vector(
                    new OpenLayers.Geometry.Point(latVal,lonVal),
                    {description:'This is the value of<br>the description attribute'},
                    {externalGraphic: 'http://wiki.openstreetmap.org/wiki/File:Ol_icon_blue_example.png', graphicHeight: 25, graphicWidth: 25, graphicXOffset: 0, graphicYOffset: 0}
                )
            )
        }
    }

    var bounds = new OpenLayers.Bounds(minX,minY,maxX,maxY).transform(wgs84Proj,osmapProj);
    osmap.zoomToExtent(bounds, false);
}   

window.onload = initialise;


<div id="data">
<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>LON</td>
        <td>LAT</td>
    </tr>
    <tr>
        <td>1</td>
        <td>11</td>
        <td>111</td>
        <td>28.00</td>
        <td>-26.00</td>
    </tr>
    <tr>
        <td>2</td>
        <td>22</td>
        <td>222</td>
        <td>28.00</td>
        <td>-26.20</td>
    </tr>
    <tr>
        <td>3</td>
        <td>33</td>
        <td>333</td>
    <td>28.50</td>
    <td>-26.50</td>
</tr>
<tr>
    <td>4</td>
    <td>44</td>
    <td>444</td>
    <td>27.00</td>
    <td>-25.00</td>
</tr>

4

1 回答 1

3

编辑：固定

由于外部图形的 url 不正确，因此未呈现标记。出于某种原因，openlayers 没有报告错误，只是将特征添加到 unrenderedfeatures 变量中。

通过将 url 更改http://wiki.openstreetmap.org/w/images/e/e7/Ol_icon_blue_example.png为功能渲染，尽管它们在大西洋？

已编辑：包括从 wgs84 到球面的点转换

如果标记所需的数据位于 javascript 数组中，则可以在循环中执行类似于以下的操作。

var vectorLayer = new OpenLayers.Layer.Vector("Overlay");

// Define markers as "features" of the vector layer:
var feature = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point( -0.1279688, 51.5077286).transform(wgs84Proj,osmapProj),
        {description:'This is the value of<br>the description attribute'} ,
        {externalGraphic: 'http://wiki.openstreetmap.org/w/images/e/e7/Ol_icon_blue_example.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
    );    
vectorLayer.addFeatures(feature);

您显然需要遍历数组并获取所需的数据并在创建时将其添加到功能中。

这是你追求的那种东西吗？

于 2012-09-11T10:50:32.653 回答