在Openlayers 3中選擇要素（點，線，多邊形）時自定義頂點樣式？

Question

我試圖通過自定義它們的樣式來顯示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嗎？

感謝任何線索

Answer 1

處理每種類型的幾何體的方式不同，因為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)"
            })
          })
        ]
      }