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

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

任何需要在Angular的源代码中引用的图像都必须位于Angular项目结构的 src / assets / images 文件夹中。然后通过将路径指定为 src：'../ assets / images / Dot.png'，可以成功加载图像，并显示200 OK响应，如浏览器的“开发人员工具”的“网络”标签中所示。< / p>

Answer 2

发生在我身上，我使用

解决了

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

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

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

2 个答案: