0

マップ上にマーカーのコレクションを描画するために使用されるのと同じ座標を使用して、lineString を描画しようとしています。マーカーが描画された後、lineString はマーカーを結合して描画する必要があり、lineString はマーカーと同じ座標を使用します。

私は奇妙な問題を抱えていますが、すべての線が描画されることもあれば、線の1つだけが描画されることもあります。ただし、通常は 1 つか 2 つの行が欠落しています。lineString で getCoordinates() を実行すると、マーカーの位置と同じ座標がすべて返されますが、一部の線は描画されません。

いくつかのコード:

// location data, contains x/y coords
var locs = JSON.parse(loc_data);  
var lineCoords = [];
var lat;
var lng;

// loop through loc data and output the markers 
for (var key in locs) {
    if (locs.hasOwnProperty(key)) {

        lat = locs[key].lat;
        lng = locs[key].lng;

        // store the coords in an array to be used for the lineString
        lineCoords.push([lat,lng]);

        // create marker and add to map
        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point([lat, lng]),
        });            

        var vectorSource = new ol.source.Vector({
            features: [iconFeature]
        });

        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });

        map.addLayer(vectorLayer);                                               
    }                
}


// draw lineString using coordinates in lineCoords array
var line = new ol.geom.LineString(lineCoords);

var layerLines = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [new ol.Feature({
                geometry: line,
                name: 'Line'
            })]
    }),
});

map.addLayer(layerLines);

上記のコードは非常に論理的に見えますが、どこに問題があるのか​​ わかりません。言われているように、すべての線が描かれることもあれば、1つだけが描かれることもあります。

誰かがこれに光を当てることができますか？

4

1 に答える 1

0

変更を試してください：

// location data, contains x/y coords
var 
    locs = JSON.parse(loc_data),
    lineCoords = [], features = [],
    lat, lng, iconFeature
;

// loop through loc data and output the markers 
for (var key in locs) {
    if (locs.hasOwnProperty(key)) {

        lat = locs[key].lat; //is this already EPSG:3857 ?
        lng = locs[key].lng;

        // store the coords in an array to be used for the lineString
        lineCoords.push([lng, lat]);

        // create marker and add to map
        iconFeature = new ol.Feature({
            geometry: new ol.geom.Point([lng, lat]),
        });
        features.push(iconFeature);
    }                
}

var
    vectorSource = new ol.source.Vector({
        features: features //your LineString could also be included here
    }),
    vectorLayer = new ol.layer.Vector({
        source: vectorSource
    }),
    // draw lineString using coordinates in lineCoords array
    line = new ol.geom.LineString(lineCoords),
    layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: line,
                name: 'Line'
            })]
        })
    })
;
map.addLayer(vectorLayer);
map.addLayer(layerLines);
于 2015-08-21T12:36:06.210 に答える