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

Question

我已按照本文中有关如何将自定义图像显示为标记的教程进行操作:https://medium.com/attentive-ai/working-with-openlayers-4-part-3-setting-customised-markers-and-images-on-map-da3369a81941

但是，当使用我自己的本地项目结构引用我的 png 图像时，它不会在 map 上渲染。

这是我当前的代码:

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 响应，如浏览器开发人员工具的“网络”选项卡中所示。