[英]Displaying custom local image marker in OSM using OpenLayers
I have followed the tutorial on how to display a custom image as a marker from this article: https://medium.com/attentive-ai/working-with-openlayers-4-part-3-setting-customised-markers-and-images-on-map-da3369a81941 我已按照本文中有关如何显示自定义图像作为标记的教程进行操作: https : //medium.com/attentive-ai/working-with-openlayers-4-part-3-setting-customised-markers-and -images-地图上,da3369a81941
However, when using my own local project structure to reference my png image, it does not get rendered on the map. 但是,当使用我自己的本地项目结构引用我的png图像时,它不会在地图上呈现。
Here is my current code: 这是我当前的代码:
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
})
})
When using the src: ' https://upload.wikimedia.org/wikipedia/commons/2/2a/Dot.png ' variant, the required dot gets displayed, but when using src: '../../../dott.png' no markers are displayed. 使用src: ' https : //upload.wikimedia.org/wikipedia/commons/2/2a/Dot.png '变体时,会显示所需的点,但是使用src:'../../.。 /dott.png'不会显示任何标记。
I have definitely specified the right path to my local png file, so I am out of ideas why this code doesn't work. 我绝对为我的本地png文件指定了正确的路径,所以我不知道为什么此代码不起作用。
I am using the Angular framework and running this on a local development server using Node. 我正在使用Angular框架,并使用Node在本地开发服务器上运行它。
So I finally figured it out, and I feel like I should've known this earlier, but since I'm new to Angular I didn't spot it straight away. 所以我终于想通了,我觉得我早该知道这一点,但是由于我是Angular的新手,所以没有立即发现它。
Any images that are needed to be referenced in source code in Angular need to be in src/assets/images folder in the Angular project structure. Angular源代码中需要引用的所有图像都必须位于Angular项目结构的src / assets / images文件夹中。 Then by specifying the path as src: '../assets/images/Dot.png' the image is successfully loaded with a 200 OK response, seen in the Network tab of a browser's Developer Tools.
然后,通过将路径指定为src:'../assets/images/Dot.png' ,成功加载了200 OK响应,成功加载了图像,在浏览器的“开发人员工具”的“网络”标签中可以看到。
That happened to me, I solved it by using 发生在我身上,我通过使用
import imagePath from '../../../dott.png'
and than using the imagePath
variable instead using the path ../../../dott.png
而不是使用
imagePath
变量,而是使用路径../../../dott.png
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.