Question

我需要使用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>

Answer 1

已编辑：已修复

标记未呈现，因为外部图形的网址不正确。由于某种原因，openlayers没有报告错误，只是将这些功能添加到unrenderedfeatures变量中。

将网址更改为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);

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

这是你追求的那种吗？

使用OpenLayers显示POI而不使用文本文件

1 个答案: