Shapes/Markers/Whatever 有数据。

Question

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

这是我使用 Google 地图 API 能够完成的示例。我怎样才能使用 OpenLayers 做同样的事情？

Answer 1

获取价值很容易。只是 return 一个 ol.style.Style 和一个 ol.style.Text 来自你的样式函数：

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;
  }
});

背景有点棘手，但在实施 https://github.com/openlayers/openlayers/issues/4577#issuecomment-328968055 后，在附近的功能中会容易得多。目前，可以使用自定义渲染器创建背景。这样做时，您还可以在自定义渲染器中渲染文本，并且不需要 ol.style.Text:

var style = new ol.style.Style({
  renderer: function(coordinates, state) {
var context = state.context;
    context.font = (state.pixelRatio * 12) + 'px Arial,Helvetica,sans-serif';
    var magnitude = parseFloat(parseFloat(state.feature.get('name').split(' ')[1]));
    var width = context.measureText(magnitude).width + 10;
    var height = 16 * state.pixelRatio;
    context.save();

    if (magnitude < 5.2) {
      context.fillStyle = 'green';
    } else if (magnitude >= 5.2 && magnitude < 5.8) {
      context.fillStyle = 'orange';
    } else {
      context.fillStyle = 'red';
    }
    context.fillRect(
      coordinates[0] - width / 2,
      coordinates[1] - height / 2,
      width,
      height
    );
    context.strokeStyle = 'white';
    context.strokeRect(
      coordinates[0] - width / 2,
      coordinates[1] - height / 2,
      width,
      height
    );
    context.fillStyle = 'white';
    context.strokeStyle = 'black';
    context.lineWidth = 2;
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.strokeText(magnitude, coordinates[0], coordinates[1]);
    context.fillText(magnitude, coordinates[0], coordinates[1]);
    context.restore();
  }
});
var layer = new ol.layer.Vector({
  style: style,
  source: new ol.source.Vector({
    url: 'https://openlayers.org/en/v4.4.2/examples/data/kml/2012_Earthquakes_Mag5.kml',
    format: new ol.format.KML({
      extractStyles: false
    })
  })
});
var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    layer
  ],
  target: 'map',
  view: new ol.View({
    zoom: 2,
    center: [0, 0]
  })
})

#map {
  width: 100%;
  height: 100%;
  margin: 0;
}

<link href="https://openlayers.org/en/v4.4.2/css/ol.css" rel="stylesheet" />
<script src="https://openlayers.org/en/v4.4.2/build/ol.js"></script>
<div id="map"></div>

Shapes/Markers/Whatever 有数据。

Shapes/Markers/Whatever with data.

openlayers