Openlayers 3 Openlayers-不同几何体类型的多种样式

因此，我使用了一个单个向量层，在该层中我放置了我所有的：

• 要点
• 多段线
• 多边形

这是我的代码：

var source = new ol.source.Vector({ wrapX: false });
var vector = new ol.layer.Vector({
    source: source,
    style: // styleFunction or style or [style] don't know...
});

我想根据功能的类型设置功能的样式。我在中找到了这个，但不知道如何使用它：

。。。 单独的编辑样式具有以下默认值：

---

有什么想法吗？

获取几何体类型，然后根据几何体类型应用样式

  style:function(feature, resolution){
    var geom_name = feature.getGeometry().getType();
    return styles[geom_name];
  }

})

找到演示链接

---

获取几何体类型，然后根据几何体类型应用样式

  style:function(feature, resolution){
    var geom_name = feature.getGeometry().getType();
    return styles[geom_name];
  }

})

找到演示链接

---

查看官方的拖放示例-->

它处理所有可能的几何体

因此，声明您的样式对象

    var defaultStyle = {
    'Point': new ol.style.Style({
      image: new ol.style.Circle({
        fill: new ol.style.Fill({
          color: 'rgba(255,255,0,0.5)'
        }),
        radius: 5,
        stroke: new ol.style.Stroke({
          color: '#ff0',
          width: 1
        })
      })
    }),
    'LineString': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#f00',
        width: 3
      })
    }),
    'Polygon': new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'rgba(0,255,255,0.5)'
      }),
      stroke: new ol.style.Stroke({
        color: '#0ff',
        width: 1
      })
    }),
    'MultiPoint': new ol.style.Style({
      image: new ol.style.Circle({
        fill: new ol.style.Fill({
          color: 'rgba(255,0,255,0.5)'
        }),
        radius: 5,
        stroke: new ol.style.Stroke({
          color: '#f0f',
          width: 1
        })
      })
    }),
    'MultiLineString': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#0f0',
        width: 3
      })
    }),
    'MultiPolygon': new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'rgba(0,0,255,0.5)'
      }),
      stroke: new ol.style.Stroke({
        color: '#00f',
        width: 1
      })
    })
  };

然后创建样式函数

var styleFunction = function(feature, resolution) {
    var featureStyleFunction = feature.getStyleFunction();
    if (featureStyleFunction) {
      return featureStyleFunction.call(feature, resolution);
    } else {
      return defaultStyle[feature.getGeometry().getType()];
    }
  };

最后，将样式函数指定给向量层

    map.addLayer(new ol.layer.Vector({
      source: new ol.source.Vector({}),
      style: styleFunction
    }));

---

查看官方的拖放示例-->

它处理所有可能的几何体

因此，声明您的样式对象

    var defaultStyle = {
    'Point': new ol.style.Style({
      image: new ol.style.Circle({
        fill: new ol.style.Fill({
          color: 'rgba(255,255,0,0.5)'
        }),
        radius: 5,
        stroke: new ol.style.Stroke({
          color: '#ff0',
          width: 1
        })
      })
    }),
    'LineString': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#f00',
        width: 3
      })
    }),
    'Polygon': new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'rgba(0,255,255,0.5)'
      }),
      stroke: new ol.style.Stroke({
        color: '#0ff',
        width: 1
      })
    }),
    'MultiPoint': new ol.style.Style({
      image: new ol.style.Circle({
        fill: new ol.style.Fill({
          color: 'rgba(255,0,255,0.5)'
        }),
        radius: 5,
        stroke: new ol.style.Stroke({
          color: '#f0f',
          width: 1
        })
      })
    }),
    'MultiLineString': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#0f0',
        width: 3
      })
    }),
    'MultiPolygon': new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'rgba(0,0,255,0.5)'
      }),
      stroke: new ol.style.Stroke({
        color: '#00f',
        width: 1
      })
    })
  };

然后创建样式函数

var styleFunction = function(feature, resolution) {
    var featureStyleFunction = feature.getStyleFunction();
    if (featureStyleFunction) {
      return featureStyleFunction.call(feature, resolution);
    } else {
      return defaultStyle[feature.getGeometry().getType()];
    }
  };

最后，将样式函数指定给向量层

    map.addLayer(new ol.layer.Vector({
      source: new ol.source.Vector({}),
      style: styleFunction
    }));

---

style函数的问题在于每次移动贴图时都会调用它。但这是官方文件中使用的方法，所以我想这就是方法。谢谢所以你对答案很满意，但你并不真的喜欢在每一个地图移动中运行的样式函数。我觉得你不太喜欢，因为这会让你表现不佳。如果我是对的，您可以缓存您的样式，从而提高性能，。如果您的情况是这样的，请让我为您提供一个代码剪贴，以便缓存您的样式。没关系，

getStyleFunction

获取功能的样式，而不是每次执行该函数时都分配一个新的样式。样式函数的问题是，每次移动地图时都会调用它。但这是官方文件中使用的方法，所以我想这就是方法。谢谢所以你对答案很满意，但你并不真的喜欢在每一个地图移动中运行的样式函数。我觉得你不太喜欢，因为这会让你表现不佳。如果我是对的，您可以缓存您的样式，从而提高性能，。如果您的情况是这样的，请让我为您提供一个代码片段，以便缓存您的样式。没关系，

getStyleFunction

获取功能的样式，而不是每次执行该功能时都分配一个新的样式