使用 OpenLayers 在 OSM 中显示自定义本地图像标记

Question

我已按照这篇文章中有关如何将自定义图像显示为标记的教程进行操作：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。

Answer 1

这件事发生在我身上，我用

解决了它

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

而不是使用 imagePath 变量而不是使用路径 ../../../dott.png

Answer 2

所以我终于弄明白了，我觉得我应该早点知道这一点，但由于我是 Angular 的新手，所以我没有立即发现它。

Angular中的源代码中需要引用的任何图像都需要在Angular项目的src/assets/images文件夹中结构体。然后通过将路径指定为 src: '../assets/images/Dot.png' 图像成功加载并返回 200 OK 响应，可在浏览器的开发人员工具的网络选项卡中看到.

使用 OpenLayers 在 OSM 中显示自定义本地图像标记

Displaying custom local image marker in OSM using OpenLayers

javascript

gis

openlayers

openstreetmap

angular