Настроить стиль вершин при выборе объектов (точка, линия, многоугольник) в Openlayers 3? - PullRequest
Новая
       21

Настроить стиль вершин при выборе объектов (точка, линия, многоугольник) в Openlayers 3?

0 голосов
/ 13 мая 2019

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

В решении для полигонов используются несколько стилей, как показано ниже. 

var styleFunction = function() {
        return [
          new ol.style.Style({
            image: new ol.style.Circle({
              radius: 5,
              fill: new ol.style.Fill({
                color: '#00aaff'
              }),
              stroke: new ol.style.Stroke({color: '#00aaff', width: 2})
            }),
            geometry: function(feature) {
              var coordinates = feature.getGeometry().getCoordinates()[0];
              return new ol.geom.MultiPoint(coordinates);
            }
          }),
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: "#00aaff",
              width: 3
            }),
            fill: new ol.style.Fill({
              color: "rgba(255,255,255,0.4)"
            })
          })
        ]
      }

Это решение работает для полигонов, но при выделении линий вершины не отображаются, а при выборе точек моя styleFunction полностью разрывается.

По точкам получается следующая ошибка: 

TypeError: e is undefined SimpleGeometry.js:196
    setLayout SimpleGeometry.js:196
    setCoordinates MultiPoint.js:158
    e MultiPoint.js:25
    geometry (index):128
    Ua vector.js:128
    Ua vector.js:127
    renderFeature VectorLayer.js:404
    E VectorLayer.js:353
    <anonymous> (index):975
    prepareFrame VectorLayer.js:370
    renderFrame Map.js:159
    renderFrame_ PluggableMap.js:1232
    animationDelay_ PluggableMap.js:191
    <anonymous> (index):975

Может кто-нибудь помочь мне изменить styleFunction таким образом, чтобы он поддерживал все типы функций?

Спасибо за любые ссылки

1 Ответ

0 голосов
/ 13 мая 2019

По-разному обрабатывать каждый тип геометрии, так как getCoordinates возвращает разные объекты координат в зависимости от типа переданной геометрии. Проверьте это 

var styleFunction = function() {
        return [
          new ol.style.Style({
            image: new ol.style.Circle({
              radius: 5,
              fill: new ol.style.Fill({
                color: '#00aaff'
              }),
              stroke: new ol.style.Stroke({color: '#00aaff', width: 2})
            }),
            geometry: function(feature) {
              var coordinates;
              if (feature.getGeometry().getType() == "LineString"){
                  coordinates = feature.getGeometry().getCoordinates();
              } else if (feature.getGeometry().getType() == "Polygon"){
                  coordinates = feature.getGeometry().getCoordinates()[0];
              } else if (feature.getGeometry().getType() == "Pont"){
               //not 100% sure this would work!!!!
                  coordinates = [feature.getGeometry().getCoordinates()];
               } else {
                  alert("maybe you need to handle also multi geometries");
               }
              return new ol.geom.MultiPoint(coordinates);
            }
          }),
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: "#00aaff",
              width: 3
            }),
            fill: new ol.style.Fill({
              color: "rgba(255,255,255,0.4)"
            })
          })
        ]
      }
...