使用OpenLayers在OSM中顯示自定義本地圖像標記

Question

我已按照本文中有關如何顯示自定義圖像作為標記的教程進行操作： https : //medium.com/attentive-ai/working-with-openlayers-4-part-3-setting-customised-markers-and -images-地圖上，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在本地開發服務器上運行它。

Answer 1

所以我終於想通了，我覺得我早該知道這一點，但是由於我是Angular的新手，所以沒有立即發現它。

Angular源代碼中需要引用的所有圖像都必須位於Angular項目結構的src / assets / images文件夾中。 然后，通過將路徑指定為src：'../assets/images/Dot.png' ，成功加載了200 OK響應，成功加載了圖像，在瀏覽器的“開發人員工具”的“網絡”標簽中可以看到。

Answer 2

發生在我身上，我通過使用

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

而不是使用imagePath變量，而是使用路徑../../../dott.png