Добавьте значок на карту с помощью OpenLayers 5 - PullRequest
Новая
       27

Добавьте значок на карту с помощью OpenLayers 5

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

Я пытаюсь добавить значок на карту с OpenLayers 5.

Я пытался следовать образцу Openlayers на сайте, но безуспешно (https://openlayers.org/en/latest/examples/icon.html)

Я полагаю, что проблема может заключаться в стиле, потому что, когда я удаляю его из объекта, точка отображается на карте, однако, когда я пытаюсь добавить стиль к этой точке (что это значок), ничего не отображается накарту.

Я отправляю ниже код, который я использую: 

import Point from 'ol/geom/Point'
import { Icon, Style } from 'ol/style.js'
// or
// import Icon from 'ol/style/Icon'
// import Style from 'ol/style/Style'

...

const vectorMarkerSource = new VectorSource()

const vectorMarkerGroup = new VectorLayer({
  source: vectorMarkerSource
})

...

this.olmap = new Map({
    target: 'map',
    layers: [
      baseLayerGroup, vectorMarkerGroup
    ],
    view: this.view
})

...

var iconFeature = new Feature({
    geometry: new Point([0, 0]),
    projection: 'EPSG:4326'
})

// I've already tried the two options of 'src'
var iconStyle = new Style({
    image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '@/assets/img/marker/marker-blue.png'
        // src: '../../assets/img/marker/marker-blue.png'
    }))
})

iconFeature.setStyle(iconStyle)

vectorMarkerSource.addFeature(iconFeature)

Заранее спасибо.

1 Ответ

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

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

import markerIconBlue from '@/assets/img/marker/marker-icon-2x-blue.png'

var iconStyle = new Style({
    image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: markerIconBlue
    }))
})

К счастью, этот подход сработал для меня, и я надеюсь, что это поможет другим.

...