[英]OpenLayers 3: not all lines in LineString are rendering
我試圖使用與在地圖上繪制標記集合相同的坐標繪制lineString。 繪制標記,然后將lineString繪制成與標記連接的狀態,lineString使用與標記相同的坐標。
我遇到了奇怪的問題,有時會畫所有的線,有時只會畫一條線。 但通常會缺少一兩行。 當我在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);
上面的代碼似乎很合乎邏輯,我看不出它可能在哪里出現問題,就像說的那樣,有時繪制所有線條,有時僅繪制一行。
誰能對此有所啟發?
嘗試更改:
// 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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.