javascript - 如何更改默认标记 OPENLAYERS 5
问题描述
我正在尝试在 OSM 上显示一些标记。到目前为止这有效,但我只是想将默认标记更改为本地路径中的另一个标记,但我不知道如何将其添加到我的代码中,我尝试过setStyle
但我不知道如何正确应用它。如果我也能设置图标的样式,那就太好了。我还希望动态显示标记,因为我每次都手动执行此操作
var layer = new ol.layer.Vector({source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.84673]))
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 52.84673]))
}),
]
});
这是我使用的完整代码的片段
/* open street map newest version */
var map = new ol.Map({
target: 'map', // the div id
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([4.35247, 52.520008]),
zoom: 4
})
});
// add a marker to the map
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.84673]))
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 52.84673]))
})
]
})
});
map.addLayer(layer);
//initialize the popup
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(overlay);
//display the pop with on mouse over
map.on('pointermove', function (event) {
if (map.hasFeatureAtPixel(event.pixel) === true) {
var coordinate = event.coordinate;
content.innerHTML = '<b>Hello world!</b><br />I am a popup.';
overlay.setPosition(coordinate);
}
else {
overlay.setPosition(undefined);
closer.blur();
}
});
解决方案
修复了这个问题,问题来自本地路径。如果这可以帮助任何人,我将其添加到我的代码中
layer.setStyle(new ol.style.Style({
image: new ol.style.Icon({
src: 'https://wiki.openstreetmap.org/w/images/0/0c/Hgv.png'
})
}));
推荐阅读
- android - 如何在android中将详细信息显示到组件中?
- python - 有没有办法使用 Python 连接到在线 mysql 数据库
- .net-core - 找不到方法:'System.Reflection.MethodInfo Microsoft.EntityFrameworkCore.Query.EntityQueryModelVisitor.get_SelectAsyncMethod()'
- android - 有没有办法在monkeyrunner项目中导入OpenCV?
- sirishortcuts - Siri快捷方式不打扰bug?
- python - 尽可能快地读入 HDF5 数据集
- javascript - Google Script - 仅针对单元格值的新更改发送电子邮件
- java - 无法从 URL 捕获 JSON 响应
- java - 如何在jmeter的标头中添加if-match计数器
- python - 在不组合字符串的情况下组合大熊猫 DataFrame 中的数字列值以获取重复行