OpenLayers 3: не все строки в LineString рендерятся

я пытаюсь нарисовать строку, используя те же координаты, которые используются для рисования коллекции маркеров на карте. Маркеры отрисовываются, затем lineString должен рисовать соединение маркеров, lineString использует те же координаты, что и маркеры.

Однако у меня возникают странные проблемы, иногда рисуются все линии, иногда рисуется только одна из линий. но обычно будет отсутствовать одна или две строки. когда я запускаю getCoordinates() для lineString, он возвращает мне все те же координаты, что и местоположения маркеров, но некоторые линии не рисуются.

некоторый код:

// 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);

приведенный выше код кажется довольно логичным, я не вижу, где с ним может быть проблема, и, как говорится, иногда рисуются все линии, а иногда только одна.

кто-нибудь может пролить свет на это?


person ThriceGood    schedule 20.08.2015    source источник
comment
Вы действительно хотите новый источник/слой для каждой итерации цикла? Кроме того, вы используете [lat, lon], измените на [lon, lat].   -  person Jonatas Walker    schedule 20.08.2015
comment
я действительно не знаю, я только что изменил простой пример с одним маркером, чтобы вывести несколько маркеров. Я могу, вероятно, просто слой маркера и добавлять каждый новый маркер к этому слою? может быть, я создаю источник без функций, создаю слой без источника, затем использую цикл для создания функций, затем source.addFeatures() и layer.setSource()? это не должно влиять на LineString, верно? Спасибо за комментарий   -  person ThriceGood    schedule 21.08.2015
comment
чем это заканчивается?   -  person Jonatas Walker    schedule 10.11.2015
comment
я думаю, что я пробовал различные идеи внутри этой темы безрезультатно. Это сместилось вниз по линии приоритетов, и я не возвращался к этому вопросу с момента последнего комментария в этой теме. точно воссоздать сценарий сложно, так как я передаю данные о местоположении из бэкэнда, использование жестко закодированных данных о местоположении в плункере не дает мне проблем, я думаю, когда я доберусь до этого, я попробую жестко закодированные данные о местоположении в интерфейсе моего приложения и посмотрю, что произойдет . Пока это все еще очень странно, он должен работать с данными, переданными сзади, точно так же.   -  person ThriceGood    schedule 11.11.2015


Ответы (1)


Попробуйте с изменениями:

// 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);
person Jonatas Walker    schedule 21.08.2015
comment
спасибо, эти изменения сработали, но у меня все та же проблема с строкой. Можете ли вы сказать мне, в чем преимущество этого метода? Я предполагаю, что это немного более эффективно памяти? - person ThriceGood; 21.08.2015
comment
Пожалуйста, поместите это на jsfiddle. Трудно понять, что такое проблема lineString. - person Jonatas Walker; 21.08.2015
comment
это странно, я использовал этот метод с большим успехом, тестируя его на карте нормалей за пределами моего проекта. это работало нормально. я просто ставил случайные координаты для строки строки, используя тот же код, что и выше. Он работал нормально, все строки появлялись. Он просто начинает ломаться, когда я пытаюсь использовать код внутри своего проекта, над которым я работаю. Я постараюсь получить его на скрипке как можно скорее, хотя - person ThriceGood; 21.08.2015
comment
вот ссылка на плункер плункер, здесь все работает нормально, и не сильно отличается от код моих проектов. В моем проекте есть проблема на странице, не уверен, что это вызовет эту ошибку, но это связано с начальной загрузкой и jquery Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, повлияет ли это? - person ThriceGood; 21.08.2015
comment
А как насчет координат, которые вы используете здесь locs = JSON.parse(loc_data), они EPSG:3857? - person Jonatas Walker; 21.08.2015
comment
да, и это те же самые координаты, которые используются для маркеров, поэтому линии должны соединяться с точным расположением маркеров. - person ThriceGood; 21.08.2015
comment
Итак, вам нужно воссоздать точно такой же сценарий на плункере. - person Jonatas Walker; 21.08.2015