在OpenLayers 3中选择功能(点，线，多边形)时自定义顶点样式3

Question

我试图通过自定义其样式来显示OpenLayers 3中选定功能的顶点。我已经为多边形设法做到了，但是在所有特征类型(点，line polygon(

上都需要动态化。

多边形的解决方案使用多种样式，如下所示。

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)"
            })
          })
        ]
      }

此解决方案适用于多边形，但是当选择线路时，顶点不显示，当选择点时，我的样式功能会完全断裂。

我在点上有以下错误：

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

任何人都可以帮助我以支持所有功能类型的方式修改样式功能？

感谢您的任何潜在客户

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)"
            })
          })
        ]
      }