Как добавить полигональную функцию GeoJSON в векторный источник в OpenLayers 5 - PullRequest
Новая
       22

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

0 голосов
/ 12 апреля 2019

Меня смущает, насколько элементарной кажется эта проблема, но я не могу понять, как просто добавить полигональную функцию 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)

1 Ответ

1 голос
/ 12 апреля 2019

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

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

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

...