OpenLayers 5 не отображает векторный слой с функцией при добавлении стиля - PullRequest
Новая
       13

OpenLayers 5 не отображает векторный слой с функцией при добавлении стиля

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

Я пытался разместить простой маркер (смоделированный как ol.geom.Point) на карте в OpenLayers 5 и стилизовать его. Я создаю элемент, обертывающий этот ol.geom.Point, затем создаю VectorSource, который его использует, и затем создаю экземпляр VectorLayer с этим источником в качестве источника, как показано в следующем коде: 

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import GeoJSON from 'ol/format/GeoJSON';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';

let markerFeature = new Feature({
    geometry: new Point([0, 10000000 ]),
});
let markerSource = new VectorSource({
    features: [markerFeature],
});
let markerLayer = new VectorLayer({
    source: markerSource,
});

let markerView = new View({
    center: [0, 0],
    zoom: 2,
});

new Map({
    target: 'map-container',
    layers: [
        new VectorLayer({
            source: new VectorSource({
                format: new GeoJSON(),
                url: './data/countries.json',
            }),
        }),
        markerLayer
    ],
    view: markerView
});

Это делает то, что я ожидаю: нарисовать точку на координате [0, 0]. Однако, когда я добавляю простой стиль к объекту markerLayer, содержащему обводку с таким красным цветом, OpenLayers, кажется, ничего не рисует: 

let markerLayer = new VectorLayer({
    source: markerSource,
    style: new Style({
        stroke: new Stroke({color: 'red'}),
    }),
});

Я использую пряжу для запуска проекта. Я не получаю ошибок компиляции. Я также не получаю ошибок в консоли браузера. Та же проблема возникает в Firefox, Chrome и Edge.

Интересно, сталкивался ли кто-то с подобными проблемами с этой, казалось бы, тривиальной задачей раньше? У кого-нибудь есть предложения о том, кто может быть виновником?

Заранее большое спасибо!

1 Ответ

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

Пожалуйста, используйте: 

new ol.style.Circle({
   radius: 10,
   stroke: new ol.style.Stroke({
     color: "red",
     width: 2
   }),
   fill: new ol.style.Fill({
     color: "blue"
   })
 })
...