Как использовать другой рисунок для маркера - PullRequest
Новая
       13

Как использовать другой рисунок для маркера

0 голосов
/ 24 мая 2019

Я показываю разные слои для отображения точек на карте, см. https://www.corobori.com/sos/TestMap3.html.

Мой клиент хотел бы видеть более традиционный маркер.

Ниже мой код показывает синий круг 

var layer1 = new ol.layer.Vector
        (
        {
            source: new ol.source.Vector(
                {
                    features: [new ol.Feature(
                        {
                            geometry: new ol.geom.Point(ol.proj.fromLonLat([-71.4155802, -36.9046117]))
                        }
                    )]
                })
        }
        );

Что я должен изменить, чтобы использовать внешний файл png вместо круга?

1 Ответ

1 голос
/ 24 мая 2019

Вы можете добавить опцию стиля внутри ol.layer.Vector так: 

let vector = new ol.vector.Layer({
        source: source,
        features: youFeatures,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#343434',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 4,
                fill: new ol.style.Fill({
                    color: 'rgba(28,255,43,0.82)'
                })
            })
        })
    });

, чтобы вы могли указать обводку и заливку объектов, которые вы будете рисовать, а в опции image вы можете указать стиль точек.

Вы также можете использовать пользовательский значок для изменения опции image, как в в этом примере 

image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 0.95,
                src: 'data/icon.png'
              }))
...