Стиль элементов OpenLayers zIndex внутри функции геометрии - PullRequest
Новая
       9

Стиль элементов OpenLayers zIndex внутри функции геометрии

0 голосов
/ 14 ноября 2018

Эта (глупая) картинка подводит итог моей проблемы:

enter image description here

Они отображаются в векторном слое.

Ниже этих экранов находится строка строки, которую я отображаю один раз как есть (то есть как линия), и поверх нее я также отображаю ее, используя стиль, для которого определена функция geometry. В этой функции я возвращаю ol.geom.MultiPoint, содержащую координаты, где я хочу, чтобы экраны были добавлены вдоль линии.

Моя вышеприведенная демонстрация глупа, я знаю (т.е. в моем реальном случае использования зазор между щитами намного больше, поэтому я знаю, что у меня не будет никакого столкновения).

Дело в том, что я знаю, что обычно есть способ избежать такого поведения с помощью свойства zIndex ol.style.Style, то есть, если у каждого объекта есть свой собственный стиль, определяющий свой zIndex, то каждый щит + текст будет корректно отображаться с текстом под перекрывающимися щитами. Но это не может работать с методом geometry, поскольку один и тот же стиль используется несколько раз для одной и той же функции, чтобы отобразить его несколько раз.

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

1 Ответ

0 голосов
/ 14 ноября 2018

Каждой точке в многоточечной точке может быть присвоен собственный стиль. Возьмите этот пример OpenLayers http://openlayers.org/en/v4.6.5/examples/polygon-styles.html Если вы замените массив стилей этой функцией, каждой точке на нескольких точках может быть присвоен другой радиус и другой оттенок желтого. Это также работает для zIndex, как можно видеть, когда первая и последняя координаты многоугольников совпадают. 

function styles(feature) {

  var multipoint = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates()[0]);

  var styles = [

    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      })
    })

  ];

  multipoint.getCoordinates().forEach(function(coordinates, index) {

    var shade = (index+1)*50;
    var radius = (index+1)*5;
    var zIndex = 10-index;
    styles.push(new ol.style.Style({
      zIndex: zIndex,
      image: new ol.style.Circle({
        radius: radius,
        fill: new ol.style.Fill({
          color: 'rgba(' + shade + ',' + shade + ', 0, 1)'
        })
      }),
      geometry: new ol.geom.Point(coordinates)

    }));

  });

  return styles;
}
...