[英]OpenLayers 3: not all lines in LineString are rendering
i am trying to draw a lineString using the same coordinates that are used to draw a collection of markers on a map. 我试图使用与在地图上绘制标记集合相同的坐标绘制lineString。 The markers are drawn, then the lineString should draw joining the markers, the lineString uses the same coords as the markers.
绘制标记,然后将lineString绘制成与标记连接的状态,lineString使用与标记相同的坐标。
I am having strange issues though, sometimes all the lines draw, sometimes only one of the lines draw. 我遇到了奇怪的问题,有时会画所有的线,有时只会画一条线。 but usually there will be one or two lines missing.
但通常会缺少一两行。 when i run getCoordinates() on the lineString, it returns me all the same coordinates as the marker locations, yet some of the lines are not drawn.
当我在lineString上运行getCoordinates()时,它会返回与标记位置相同的所有坐标,但未绘制某些线。
some code: 一些代码:
// 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);
the code above seems pretty logical, i can't see where there could be a problem with it, and like is said, sometimes all lines are drawn and sometimes only one is drawn. 上面的代码似乎很合乎逻辑,我看不出它可能在哪里出现问题,就像说的那样,有时绘制所有线条,有时仅绘制一行。
can anyone shine some light on this? 谁能对此有所启发?
Try with the changes: 尝试更改:
// 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.