如何将许多带有自定义文本的标记添加到openlayers 5

Question

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

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

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

var baseMapLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});
var map = new ol.Map({
  target: 'map-canvas',
  layers: [baseMapLayer],
  view: new ol.View()
});
var markers = [];

markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.483713800000032, 41.901777])
  ),
  name: '492,00'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.5048055, 41.8968191])
  ),
  name: '289,50'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.48060190000001, 41.9077133])
  ),
  name: '1606,50'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.498839999999973, 41.9000227])
  ),
  name: '324,00'
}));

var vectorSource = new ol.source.Vector({
  features: markers
});
var markerVectorLayer = new ol.layer.Vector({
  source: vectorSource,
});

map.addLayer(markerVectorLayer);
map.getView().fit(vectorSource.getExtent(), map.getSize());

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

<div id="map-canvas" style="width: 400px; height: 400px"></div>

Answer 1

您需要为您希望使用的每种颜色创建标记样式和文本样式，然后使用样式函数选择适合每个功能的内容

var baseMapLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});
var map = new ol.Map({
  target: 'map-canvas',
  layers: [baseMapLayer],
  view: new ol.View()
});
var markers = [];

markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.483713800000032, 41.901777])
  ),
  name: '492,00'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.5048055, 41.8968191])
  ),
  name: '289,50'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.48060190000001, 41.9077133])
  ),
  name: '1606,50'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.498839999999973, 41.9000227])
  ),
  name: '324,00'
}));

var colors = ['red', 'green', 'blue', 'black'];
var iconStyles = [];

colors.forEach(function(color) {
  iconStyles.push(new ol.style.Style({
    image:  new ol.style.Circle({
        radius: 6,
        stroke: new ol.style.Stroke({
            color: '#fff'
        }),
        fill: new ol.style.Fill({
            color: color
        })
    })
  }))
});

var labelStyle = new ol.style.Style({
    text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        overflow: true,
        fill: new ol.style.Fill({
            color: '#000'
        }),
        stroke: new ol.style.Stroke({
            color: '#fff',
            width: 3
        }),
        textBaseline: 'bottom',
        offsetY: -8
    })
});

var vectorSource = new ol.source.Vector({
  features: markers
});
var markerVectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: function(feature) {
      var name = feature.get('name');
      var iconStyle = iconStyles[parseInt(name)%colors.length];
      labelStyle.getText().setText(name);
      return [iconStyle, labelStyle];
  }
});

map.addLayer(markerVectorLayer);
map.getView().fit(vectorSource.getExtent(), map.getSize());

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

<div id="map-canvas" style="width: 400px; height: 400px"></div>