Как изменить стиль слоя geosjon в openlayers? - PullRequest
Новая
       28

Как изменить стиль слоя geosjon в openlayers?

0 голосов
/ 22 октября 2018

Я новичок в ПР.

У меня есть файл точечного геосджона.

Я хочу изменить цвет точки вместо цвета по умолчанию и не могу понять, как это сделать.

Я пытался использовать собственное руководство Openlayers для статических стилей - ноэто не имеет особого смысла для меня.Ссылка на руководство: https://openlayers.org/workshop/en/vector/style.html

Когда я не вставляю код из путеводителя, моя карта работает, но когда я делаю Chrome, это говорит: введите описание изображения здесь

Я полагаю, что с моим кодом что-то не так, когда я помещаю слой geosjon на карту - и я не знаю, что это такое.

Так что, пожалуйста, помогите мне.Geosjon часть моего кода .js: 

var trees_cologne = new ol.layer.Vector({
 title: 'Some trees of Cologne',
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'trees.geojson'
}),
//import of the trees

const layer = trees({
source: 'trees.geojson',
style: new Style({
  fill: new Fill({
    color: 'red'
  }),
  stroke: new Stroke({
    color: 'white'
  })
})
});

1 Ответ

0 голосов
/ 22 октября 2018

Для точек стиль обычно представляет собой круг, для которого необходимо задать радиус.Заливка и обводка должны быть определены внутри (ширина обводки должна быть меньше радиуса).Также убедитесь, что ваш геойсон использует ту же систему координат, что и ваша карта, и, если они отличаются, проекции должны быть указаны соответствующим образом в формате: dataProjection в OL5 (но default DataProjection в OL4) для геойсона иFeatureProjection для просмотра карты.Полная настройка слоя должна выглядеть примерно так: 

var radius = 8;

var trees_cologne = new ol.layer.Vector({
    title: 'Some trees of Cologne',
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON({ defaultDataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }),
        url: 'trees.geojson'
    }},
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: radius,
            fill: new ol.style.Fill({
                color: 'red'
            }),
            stroke: new ol.style.Stroke({
                color: 'white',
                width: radius / 4
            })
        })
    })
});
...