Отображение пользовательского локального маркера изображения в OSM с использованием OpenLayers - PullRequest
Новая
       26

Отображение пользовательского локального маркера изображения в OSM с использованием OpenLayers

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

Я ознакомился с руководством по отображению пользовательского изображения в качестве маркера из этой статьи: https://medium.com/attentive-ai/working-with-openlayers-4-part-3-setting-customised-markers-and-images-on-map-da3369a81941

Однако при использовании моей собственной локальной структуры проекта для ссылки на мое изображение в формате png оно не отображается на карте.

Вот мой текущий код: 

var aPoint = new ol.geom.Point(ol.proj.fromLonLat([0, 0]))
var aFeature = new ol.Feature({
  geometry: aPoint
})
var aFeatureStyle = new ol.style.Style({
  image: new ol.style.Icon({
    //src: 'https://upload.wikimedia.org/wikipedia/commons/2/2a/Dot.png'
    src: '../../../dott.png'
  })
})
aFeature.setStyle(aFeatureStyle)
var aSource = new ol.source.Vector({
  features: [aFeature]
})
var aLayer = new ol.layer.Vector({
  source: aSource
})



var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
        }),
        aLayer
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 14
    })
})

При использовании варианта src: 'https://upload.wikimedia.org/wikipedia/commons/2/2a/Dot.png' отображается нужная точка, но при использовании src: '../../../dott.png' маркеры не отображаются.

Я определенно указал правильный путь к своему локальному png-файлу, поэтому у меня нет идей, почему этот код не работает.

Я использую платформу Angular и запускаю ее на локальном сервере разработки с использованием Node.

Ответы [ 2 ]

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

Так что я наконец-то понял это, и я чувствую, что должен был знать об этом раньше, но так как я новичок в Angular, я не сразу заметил это.

Любые изображения, на которые необходимо сослаться в исходном коде в Angular, должны находиться в папке src / assets / images в структуре проекта Angular.Затем, указав путь как src: '../assets/images/Dot.png', изображение успешно загружено с ответом 200 OK, что видно на вкладке Сеть в инструментах разработчика браузера.

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

Это случилось со мной, я решил это с помощью 

import imagePath from '../../../dott.png'

, а затем вместо переменной imagePath использовал путь ../../../dott.png

...