Openlayers 带有数据的形状/标记/任何东西。

我用谷歌搜索了我知道的每个关键词，但似乎找不到一个例子来指导我。我想使用OpenLayers在地图上覆盖点，这些点将具有不同的数据和背景颜色

下面是一个我使用GoogleMapsAPI实现的示例。如何使用OpenLayers实现同样的功能

---

获取值很容易。只需从style函数返回一个带有

ol.style.Text

的

ol.style.style

：

var style = new ol.style.Style({
  text: new ol.style.Text({
    text: '' // will be modified dynamically in the style function
  })
});
var layer = new ol.layer.Vector({
  style: function(feature) {
    var value = feature.get('since_midnight');
    style.getText().setText(value);
    return style;
  }
});

背景有点复杂，但在实现了near特性后，它会更容易实现。目前，可以使用自定义渲染器创建背景。执行此操作时，还可以在自定义渲染器中渲染文本，而不需要ol.style.text：

var style=new ol.style.style({
渲染器：函数（坐标、状态）{
var-context=state.context；
context.font=（state.pixelRatio*12）+“px Arial，Helvetica，sans serif”；
var magnity=parseFloat（parseFloat（state.feature.get（'name'））.split（''）[1]）；
var-width=context.measureText（幅值）.width+10；
变量高度=16*state.pixelRatio；
context.save（）；
如果（震级<5.2）{
context.fillStyle='green'；
}否则，如果（震级>=5.2&&震级<5.8）{
context.fillStyle='orange'；
}否则{
context.fillStyle='red'；
}
context.fillRect(
坐标[0]-宽度/2，
坐标[1]-高度/2，
宽度，
高度
);
context.strokeStyle='white'；
context.strokeRect(
坐标[0]-宽度/2，
坐标[1]-高度/2，
宽度，
高度
);
context.fillStyle='white'；
context.strokeStyle='black'；
context.lineWidth=2；
context.textAlign='center'；
context.textb基线='middle'；
strokeText（震级，坐标[0]，坐标[1]）；
填充文本（大小、坐标[0]，坐标[1]）；
restore（）；
}
});
var layer=新ol.layer.Vector({
风格：风格，
来源：新ol.source.Vector({
网址：'https://openlayers.org/en/v4.4.2/examples/data/kml/2012_Earthquakes_Mag5.kml',
格式：新建ol.format.KML({
提取样式：false
})
})
});
var map=新ol.map({
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
}),
层
],
目标：“地图”，
视图：新ol.view({
缩放：2，
中间：[0，0]
})
})

#地图{
宽度：100%；
身高：100%；
保证金：0；
}

---

非常感谢。看来我在使用OL方面还有很多东西要学。我真的很欣赏你的榜样。