Как добавить полигональный объект GeoJSON в векторный источник в OpenLayers 5

Меня смущает, насколько элементарной кажется эта проблема, но я не могу понять, как просто добавить объект многоугольника GeoJSON в векторный источник.

Я использую OpenLayers 5, и до сих пор я создавал отдельный источник и слой для каждой функции, которую добавляю на карту. Причина в том, что мне нужно было иметь возможность включать и выключать видимость отдельных полигонов, и в то время это казалось лучшим способом сделать это. Сначала это сработало, но я уверен, что это не лучшая практика - по сути, я создаю 200 слоев и 200 источников для 200 полигонов. Я бы предпочел создать один слой, который использует один источник, содержащий эти 200 полигонов.

Вот что у меня сейчас есть:

window["srcCells"] = new ol.source.Vector({});
window["ftr1"] = new ol.Feature({
    geometry: new ol.geom.Polygon({ // <--- this is where I'm getting an error
        coordinates: geometry.coordinates[0]
    })
});
window["srcCells"].addFeature(window["ftr1"]);
window["lyrCells"] = new ol.layer.Vector({
    name: "lyrCells",
    source: window["srcCells"],
    visible: true,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
        color: 'rgba(255, 255, 255, 1)',
        width: 0.5
    }),
    fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0)'
    }),
    text: new ol.style.Text({
        font: '11px Roboto',
        overflow: false,
        fill: new ol.style.Fill({
            color: '#fff'
        }),
        stroke: new ol.style.Stroke({
            color: '#333',
            width: 2
        })
    })
    })
});
map.addLayer(window["lyrCells"]);

console.dir(geometry.coordinates[0]); дает следующее:

0: (3) [140.9528856796365, -37.00284635019008, 111.304]
1: (3) [140.9536707180603, -37.00304972058393, 113.03]
2: (3) [140.9537622719694, -37.00307250872015, 110.607]
3: (3) [140.95383548835147, -37.003105295678026, 110.64]
4: (3) [140.95393795398604, -37.003149857783384, 110.26276070403628]
5: (3) [140.95586925648476, -37.00401679761869, 111.192]
6: (3) [140.95644098404094, -37.00388629902322, 110.38710718081241]
7: (3) [140.95644582710668, -37.0051300157363, 111.17174176388276]
8: (3) [140.9528945167084, -37.00514320603378, 110.9445749409575]
9: (3) [140.95289318042316, -37.004769323489825, 113.688]

В третьей строке приведенного выше кода (где я указал) я получаю следующую ошибку:

SimpleGeometry.js:187 Uncaught TypeError: Cannot read property 'length' of undefined
    at e.setLayout (SimpleGeometry.js:187)
    at e.setCoordinates (Polygon.js:313)
    at new e (Polygon.js:80)

geojson openlayers-5
person Gareth Jones    schedule 12.04.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

geometry.coordinates[0] выглядит как открытая линия. Чтобы использовать его как многоугольник, вам нужно замкнуть кольцо и, поскольку многоугольник представляет собой массив линейных колец, заключить его в []. Также координаты являются первым параметром конструктора, а не вариантом:

geometry: new ol.geom.Polygon(
     [ geometry.coordinates[0].concat([geometry.coordinates[0][0]]) ]
)

В качестве альтернативы вам может потребоваться проверить, являются ли ваши данные многоугольником или линией, и использовать новый ol.geom.LineString там, где это необходимо.

person Mike    schedule 12.04.2019
comment
Спасибо за предложение. Сначала это не сработало (та же ошибка, та же строка), но затем я понял, что команда конкатенации добавляла три отдельных значения (а не массив из 3 значений) в конец массива (т.е. в массив длиной 13). Поэтому я заключил geometry.coordinates[0][0] в квадратные скобки, получив в итоге coordinates: [ geometry.coordinates[0].concat([geometry.coordinates[0][0]]) ]. Это правильно добавляет первую координату в конец массива, однако я все еще получаю ту же ошибку в той же строке. Есть другие идеи? - person Gareth Jones; 12.04.2019
comment
Я только что проверил API. coordinates - это параметр, а не вариант. - person Mike; 12.04.2019
comment
Великолепно - похоже, теперь он работает. Еще раз спасибо! - person Gareth Jones; 12.04.2019