使用 JSON 设置标记的文本和颜色

Question

当我将它们附加到地图时，我想用 JSON 数据为每个标记设置文本和颜色。这个示例代码很好。文字和颜色目前是静态的。我可以用一些函数来完成它还是我应该更改语法以使其工作？

const vectorSource = new ol.source.Vector();
const vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: new ol.style.Style({
    image: new ol.style.Circle({
      radius: 18,
      fill: new ol.style.Fill({
        color: [0, 155, 0, 0.6]
      }),
      stroke: new ol.style.Stroke({
        color: [0, 200, 0, 0.9],
        width: 3
      })
    }),
    text: new ol.style.Text({
      text: "Test",
      scale: 1.2,
      fill: new ol.style.Fill({
        color: "#fff"
      }),
      stroke: new ol.style.Stroke({
        color: "0",
        width: 3
      })
    })
  })
})
vectorLayer.setZIndex(5);
const map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    ),
    vectorLayer
  ],
  target: "map",
  view: new ol.View({
    center: [0, 0],
     zoom: 5
  })
});
const addMarkers = (lat, long) => {
  if(lat && lat !== 0) {
    const point = new ol.geom.Point(ol.proj.transform([lat, long], "EPSG:4326", "EPSG:3857"));
    const iconFeature = new ol.Feature({
      geometry: point
    });
    vectorSource.addFeature(iconFeature);
  }
}
// Positions come from map.jade
positions.forEach(position => {
  let long = position.geolocation.longitude;
  let lat = position.geolocation.latitude;
  if (long !== 0 && long !== 999.9 && long !== "" &&  long !== undefined) {
    addMarkers(long, lat);  
  }
});

Answer 1

在 ol.layer.Vector 构造函数中，您可以传递一个函数，而不是传递 ol.style.Style 实例。

该函数将接收特征和分辨率，并且应 return 一个 ol.style.Style 对象。

举个例子：http://openlayersbook.github.io/ch06-styling-vector-layers/example-07.html

否则，您可以使用 addMarkers 函数中的 ol.Feature.setStyle 函数。

使用 JSON 设置标记的文本和颜色

Set text and color for markers using JSON

javascript

json

openlayers