Openlayers 5 многоцветных очков - PullRequest
Новая
       6

Openlayers 5 многоцветных очков

0 голосов
/ 22 сентября 2018

У меня есть код для отображения 7 точек синим цветом.Теперь мне нужно отобразить 7 точек разных цветов (например, 2 точки красного цвета, 2 точки зеленого цвета и 3 точки синего цвета).И мне нужна работа по кластеризации точек.

Мой код: https://codepen.io/quas1k/pen/WgWRNE

var coordinates  = ol.proj.fromLonLat([30.5238, 50.45466]);
var coordinates1 = ol.proj.fromLonLat([30.5238, 50.45166]);
var coordinates2 = ol.proj.fromLonLat([30.5538, 50.45466]);
var coordinates3 = ol.proj.fromLonLat([30.5518, 50.45466]);
var coordinates4 = ol.proj.fromLonLat([30.5558, 50.45466]);
var coordinates5 = ol.proj.fromLonLat([30.5598, 50.45466]);
var coordinates6 = ol.proj.fromLonLat([30.5510, 50.45466]);
var coordinates7 = ol.proj.fromLonLat([30.5580, 50.45466]);

var features = [];
features[0] = new ol.Feature(new ol.geom.Point(coordinates));
features[1] = new ol.Feature(new ol.geom.Point(coordinates1));
features[2] = new ol.Feature(new ol.geom.Point(coordinates2));
features[3] = new ol.Feature(new ol.geom.Point(coordinates3));
features[4] = new ol.Feature(new ol.geom.Point(coordinates4));
features[5] = new ol.Feature(new ol.geom.Point(coordinates5));
features[6] = new ol.Feature(new ol.geom.Point(coordinates6));
features[7] = new ol.Feature(new ol.geom.Point(coordinates7));


var source = new ol.source.Vector({
  features: features
});

var clusterSource = new ol.source.Cluster({
  distance: 40,
  source: source
});

var styleCache = {};
var clusters = new ol.layer.Vector({
  source: clusterSource,
  style: function(feature) {
    var size = feature.get('features').length;
    var style = styleCache[size];
    if (!style) {
      style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 12,
          stroke: new ol.style.Stroke({
            color: '#fff'
          }),
          fill: new ol.style.Fill({
            color: '#3399CC'
          })
        }),
        text: new ol.style.Text({
          text: size.toString(),
          fill: new ol.style.Fill({
            color: '#fff'
          })
        })
      });
      styleCache[size] = style;
    }
    return style;
  }
});

var raster = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  layers: [raster, clusters],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([30.5238, 50.45466]),
    zoom: 11
  })
});

Как я могу изменить этот код для достижения описанного поведения?У меня проблемы с отображением точек в разных цветах и ​​дальнейшей их кластеризацией по цветам.

1 Ответ

0 голосов
/ 23 сентября 2018

Используйте что-то вроде этого: 

features[0] = new ol.Feature({geometry: new ol.geom.Point(coordinates), color: 'red'});
features[1] = new ol.Feature({geometry: new ol.geom.Point(coordinates1), color: 'red'});
features[2] = new ol.Feature({geometry: new ol.geom.Point(coordinates2), color: 'green'});
features[3] = new ol.Feature({geometry: new ol.geom.Point(coordinates3), color: 'green'});
features[4] = new ol.Feature({geometry: new ol.geom.Point(coordinates4), color: 'green'});
features[5] = new ol.Feature({geometry: new ol.geom.Point(coordinates5), color: 'blue'});
features[6] = new ol.Feature({geometry: new ol.geom.Point(coordinates6), color: 'blue'});
features[7] = new ol.Feature({geometry: new ol.geom.Point(coordinates7), color: 'blue'});

Кластеры приобретут цвет первой точки в кластере.Я удалил styleCache, так как результаты будут постоянно меняться 

var size = feature.get('features').length;
var color = feature.get('features')[0].get('color');
var  style = new ol.style.Style({
    image: new ol.style.Circle({
      radius: 12,
      stroke: new ol.style.Stroke({
        color: '#fff'
      }),
      fill: new ol.style.Fill({
        color: color
      })
    }),
    text: new ol.style.Text({
      text: size.toString(),
      fill: new ol.style.Fill({
        color: '#fff'
      })
    })
});
...