Как добавить множество маркеров с пользовательским текстом в openlayers 5 - PullRequest
Новая
       11

Как добавить множество маркеров с пользовательским текстом в openlayers 5

0 голосов
/ 28 февраля 2019

Я использую openlayers v5.3.0 и фактически загружаю карту со многими маркерами (во фрагменте есть небольшое подмножество, в моем коде их тысячи).

Что я хочу сделать, так этонастроить эти маркеры, придав им разные цвета и текст.

Как настроить текст и цвет каждого маркера, добавленного на карту? 

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 Ответ

0 голосов
/ 28 февраля 2019

Вам нужно будет создать стили маркера для каждого цвета, который вы хотите использовать, и стиль текста, а затем использовать функцию стиля, чтобы выбрать то, что подходит для каждой функции 

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>
...