How to add many markers with custom text to openlayers 5

问题

I'm using openlayers v5.3.0, and actually loading a map with many markers (in the snippet are a small subset, in my code there are thousands).

What i want to do is to customized those markers, styling them with differents colors and text.

How can i customize the text and the color of each marker added to the map?

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>

回答1:

You would need to create marker styles for each color you wish to use, and a text style, then use a style function to select the what is appropriate for each feature

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>

来源：https://stackoverflow.com/questions/54930198/how-to-add-many-markers-with-custom-text-to-openlayers-5

标签

javascript

OpenLayers

openlayers-5