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

【问题标题】：Displaying custom local image marker in OSM using OpenLayers使用 OpenLayers 在 OSM 中显示自定义本地图像标记
【发布时间】：2019-05-27 13:07:40
【问题描述】：

我已按照这篇文章中有关如何将自定义图像显示为标记的教程进行操作：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 在本地开发服务器上运行它。

【问题讨论】：

浏览器的错误控制台显示什么？
浏览器控制台没有错误
在开发工具中查看网络选项卡时，是否加载了 png？
它说 404，但我很确定我的 png 文件的路径是正确的。我什至使用了完整路径，它仍然给出 404
我找到了问题的原因。本地 png 文件试图在 HTTP GET 请求中使用以下 URL 访问：localhost:4200/<full_local_path>/Dot.png，这显然没有引用内部项目结构，因此无法在该地址找到 png 文件。但是，我仍然不知道如何确保正确引用本地 png 文件。

标签： javascript angular gis openlayers openstreetmap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这发生在我身上，我通过使用解决了它

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

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

【讨论】：

如果我这样做，它会给我一个错误“找不到模块”