Javascript 如何向openlayers 5添加多个带有自定义文本的标记

我使用的是openlayers v5.3.0，实际上加载了一个带有许多标记的地图（在代码片段中是一个小子集，在我的代码中有数千个）

我想做的是定制这些标记，用不同的颜色和文本设置它们的样式

如何自定义添加到地图的每个标记的文字和颜色

var baseMapLayer=new ol.layer.Tile({
来源：new ol.source.OSM（）
});
var map=新ol.map({
目标：“地图画布”，
图层：[baseMapLayer]，
视图：新建ol.view（）
});
var标记=[]；
markers.push（新ol.功能({
几何：新的ol.geom.Point(
Lonlat的其他项目（[12.48371380000000032,41.901777]）
),
姓名：'492,00'
}));
markers.push（新ol.功能({
几何：新的ol.geom.Point(
Lonlat的其他项目（[12.5048055,41.8968191]）
),
姓名：'289,50'
}));
markers.push（新ol.功能({
几何：新的ol.geom.Point(
Lonlat的其他项目（[12.480619000001,41.9077133]）
),
姓名：'1606,50'
}));
markers.push（新ol.功能({
几何：新的ol.geom.Point(
Lonlat的其他项目（[12.4988399999973,41.9000227]）
),
姓名：“324,00”
}));
var vectorSource=新的ol.source.Vector({
特征：标记
});
var markerVectorLayer=新ol.layer.Vector({
来源：矢量源，
});
map.addLayer（markerVectorLayer）；
map.getView（）.fit（vectorSource.getExtent（），map.getSize（））
您需要为希望使用的每种颜色创建标记样式和文本样式，然后使用样式功能选择适合每个功能的标记样式


var baseMapLayer=new ol.layer.Tile({
来源：new ol.source.OSM（）
});
var map=新ol.map({
目标：“地图画布”，
图层：[baseMapLayer]，
视图：新建ol.view（）
});
var标记=[]；
markers.push（新ol.功能({
几何：新的ol.geom.Point(
Lonlat的其他项目（[12.48371380000000032,41.901777]）
),
姓名：'492,00'
}));
markers.push（新ol.功能({
几何：新的ol.geom.Point(
Lonlat的其他项目（[12.5048055,41.8968191]）
),
姓名：'289,50'
}));
markers.push（新ol.功能({
几何：新的ol.geom.Point(
Lonlat的其他项目（[12.480619000001,41.9077133]）
),
姓名：'1606,50'
}));
markers.push（新ol.功能({
几何：新的ol.geom.Point(
Lonlat的其他项目（[12.4988399999973,41.9000227]）
),
姓名：“324,00”
}));
变量颜色=['红色'、'绿色'、'蓝色'、'黑色']；
var iconStyles=[]；
颜色。forEach（函数（颜色）{
iconStyles.push（新ol.style.style({
图片：新ol.style.Circle({
半径：6，
笔划：新的ol风格笔划({
颜色：'#fff'
}),
填充：新的ol.style.fill({
颜色：颜色
})
})
}))
});
var labelStyle=新的ol.style.style({
文本：新的ol.style.text({
字体：“12px Calibri，无衬线”，
是的，
填充：新的ol.style.fill({
颜色：“#000”
}),
笔划：新的ol风格笔划({
颜色：“#fff”，
宽度：3
}),
textBaseline:'底部'，
副职：-8
})
});
var vectorSource=新的ol.source.Vector({
特征：标记
});
var markerVectorLayer=新ol.layer.Vector({
来源：矢量源，
风格：功能（特征）{
var name=feature.get（'name'）；
var iconStyle=iconStyles[parseInt（name）%colors.length]；
labelStyle.getText（）.setText（名称）；
返回[iconStyle，labelStyle]；
}
});
map.addLayer（markerVectorLayer）；
map.getView（）.fit（vectorSource.getExtent（），map.getSize（））

谢谢！这很好，我只做了一些修改，因为我的代码在一个.cshtml文件中。在中，您可以看到我的当前代码（无需添加其他anwser，因为您的代码是有效的）。主要区别在于我正在创建一个样式数组，在我的例子中，myItems上的圆圈位于一个c#数组上（而fiddle中的圆圈位于一个json项目数组上）。是否有方法向ol.Feature对象添加额外的信息，以便我可以尝试优化我的js代码并避免创建大量（数千）样式，但是，使用一个单一的，并设置文本和颜色平日？好的，发现：P