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 が正しくないため、マーカーがレンダリングされていません。何らかの理由で、機能を unrenderedfeatures 変数に追加するだけで、openlayers はエラーを報告しません。

大西洋にあるにもかかわらず、URLをhttp://wiki.openstreetmap.org/w/images/e/e7/Ol_icon_blue_example.png機能レンダリングに変更することによって？

EDITED : 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 に答える