在 OpenLayers 中为每个组件绘制不同样式的 MultiPolygon

Question

我有一个 OpenLayers.Feature.Vector 创建如下：

var multiPol = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.MultiPolygon([polygonGeometry1,polygonGeometry2]));

两个多边形代表地图上的同一个逻辑对象（一个“实体”），比如一朵云。这就是为什么我将它们保留在一个功能中。 我想绘制它，以便这个多多边形（polygonGeometry1，polygonGeometry2）的每个组件在添加到图层时以不同的颜色绘制：

   var layer = new OpenLayers.Layer.Vector("polygonLayer");
   layer.addFeatures([multiPol]);

我查看了 OpenLayers 中的样式、样式映射和规则，但它们似乎还不够。它们确实使我能够用不同的颜色绘制每种几何类型，但前提是它们属于不同的特征（向量）。有没有办法解决这个问题？我真的必须为每个多边形使用单独的向量吗？

Answer 1

Jon Snyder 提出的解决方案为我们提供了一个总体思路，但最终并未完全奏效（尤其是基于 OpenLayers 2.1x，此任务不需要扩展 OpenLayers.Layer.Vector）。

我们创建了一个类YourApp.Handler.EndPointsPath（扩展OpenLayers.Handler.Path），其中函数geometryClone()返回一个YourApp.Geometry.EndPointsPath类型的新几何。

然后我们在OpenLayers.Renderer.Elements 中修补了函数drawGeometry() 来绘制这个新几何体：

OpenLayers.Util.extend(OpenLayers.Renderer.Elements.prototype, {

  drawGeometry: function (geometry, style, featureId) {
    var cl = geometry.CLASS_NAME;

    var rendered = true,
      i, len;
    if ((cl === "OpenLayers.Geometry.Collection") ||
      (cl === "OpenLayers.Geometry.MultiPoint") ||
      (cl === "OpenLayers.Geometry.MultiLineString") ||
      (cl === "OpenLayers.Geometry.MultiPolygon") ||
      (cl === "YourApp.Geometry.EndPointsPath")) {
      // Iterate over all Geometry components and draw each individually
      for (i = 0, len = geometry.components.length; i < len; i++) {
        // Is there a style for each of the components?
        if (OpenLayers.Util.isArray(style)) {
          // Draw Geometry with own style
          rendered = this.drawGeometry(geometry.components[i], style[i], featureId) && rendered;
        } else {
          // Draw Geometry with common style 
          rendered = this.drawGeometry(geometry.components[i], style, featureId) && rendered;
        }
      }
      return rendered;
    }
    // (...standard code...)
  },

  eraseGeometry: function (geometry, featureId) {
    var cl = geometry.CLASS_NAME,
      i, len;
    if ((cl === "OpenLayers.Geometry.MultiPoint") ||
      (cl === "OpenLayers.Geometry.MultiLineString") ||
      (cl === "OpenLayers.Geometry.MultiPolygon") ||
      (cl === "YourApp.Geometry.EndPointsPath") ||
      (cl === "OpenLayers.Geometry.Collection")) {
      for (i = 0, len = geometry.components.length; i < len; i++) {
        this.eraseGeometry(geometry.components[i], featureId);
      }
      // (...standard code...)
    }
  }
});

Answer 2

据我所知，要获得此功能，您需要使用自己的类扩展类。

首先为 OpenLayers.Feature.Vector 创建一个扩展，将其命名为 YourApp.Feature.MultiVector。您可以通过查看 OpenLayers 代码来查看有关如何扩展类的示例。此类应接受样式数组和多多边形。它应该有一个方法可以返回一个 OpenLayers.Feature.Vectors 列表，每个都有自己的风格。

第二次为 OpenLayers.Layer.Vector 创建一个扩展，命名为 YourApp.Layer.VectorSupportingMultiStyledFeatures。您将需要覆盖“drawFeature”方法。在drawFeature方法中测试看特征的类型是否为MultiVector。如果是，循环遍历 MultiVector 中的每个特征并调用 renderer.drawFeature(feature)。否则调用 super.drawFeature 方法。

所以调用它的代码如下所示：

var multiPol = new YourApp.Feature.MultiVector(
    new OpenLayers.Geometry.MultiPolygon([polygonGeometry1,polygonGeometry2]),
    [style1,style2,style3,style4]);

var layer = new YourApp.Layer.VectorSupportingMultiStyledFeatures("polygonLayer");
layer.addFeatures([multiPol]);