开放层5.3.0项目，点自定义问题

Question

我正在学习openstreetmaps和openlayers。我从应用方法(包裹+开放层(开始。您在这里找到的大多数示例都可能帮助我与旧代码一起使用，据我所知，旧代码不支持所有功能，例如集群和其他东西。我尝试了它们，但无法使其在新环境中工作(因为它不仅仅是复制粘贴(。我的问题相对简单，我想用[点][1]自定义功能，文档说我可以通过[setStyle][2]设置他们的风格，他们也有实际工作的例子。我用那个例子开始，但无论我在那里描述什么风格，我在地图上都没有看到新点，并且在 Parsel 或浏览器控制台中没有任何错误。如果我不使用setStyle，我会在地图上看到我的观点。我尝试了不同的方法来设置风格，但没有一种真正适合我。

我这样做，首先我设置样式：

var iconStyle = new Style({ fill: 'red' }); 之后，我像这样向特征数组添加点

features.push( new Feature({ geometry: new Point(coordinates), address: 'Адрес точки 2', ordererName: 'Имя человека 2', }) ); 之后我为一个点设置了一个样式：

features[1].setStyle(iconStyle);

并将所有这些放入地图中：

var source = new VectorSource({
features: features
});
var vectorLayer = new VectorLayer({
source: source
});
var raster = new TileLayer({
source: new OSM()
});
//EPSG:3857 - web
//EPSG:4326 - GPS
var map = new Map({
layers: [
raster, 
//source,
//clusters, 
vectorLayer
],
target: 'map',
view: new View({
center: transform(map_center, 'EPSG:4326', 'EPSG:3857'),
zoom: 13
})
});

所以我的问题是如何为一个点设置样式并实际在地图上看到？如果您还能够建议如何在创建具有图层和点的地图后单击地图，则非常赞赏。提前谢谢。

Answer 1

您的样式设置不完整，要显示一个点，您需要将其样式设置为图像，例如红色填充圆圈

var iconStyle = new Style({
image: new CircleStyle({
radius: 10,
fill: new Fill({
color: 'red'
})
})
});

如果在创建地图后添加要素，则可能如下所示：

map.on('click', function(event) {
var feature = new Feature({
geometry: new Point(event.coordinate)
...
...
});
feature.setStyle(...);
source.addFeature(feature);
});