在 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 returns 不同的坐标对象进行不同的处理。检查这个

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

在 Openlayers 3 中选择要素（点、线、多边形）时自定义顶点样式？

Customize vertex style when selecting features (point, line, polygon) in Openlayers 3?

styles

openlayers-3