如何防止OpenLayers.StyleMap和OpenLayers.SelectFeature发生冲突?

时间:2013-06-11 17:01:29

标签: openlayers

我有一个OpenLayers.Layer.Vector图层,如下所示:

layer = new OpenLayers.Layer.Vector("zzzzz", {
  strategies: [
    new OpenLayers.Strategy.Fixed(),
  ],
  // styleMap: new OpenLayers.StyleMap({
  //   'default': { .. layer styles here ..}
  //   'select': { .. selected styles here ..}
  // }),
  protocol: new OpenLayers.Protocol.HTTP({
    url: "/kml/zzzzzz.kml",
    renderers: ['Canvas','SVG'],
    format: new OpenLayers.Format.KML({
      extractStyles: false, 
      extractAttributes: true,
      maxDepth: 0
    })
  })
});

然后我有一个OpenLayers.Controls.SelectFeature控件,如下所示:

selectFeature = new OpenLayers.Control.SelectFeature(
    [layer],
    {
      renderIntent: "select",
      clickout: true,
      toggle: true
    }
);

然后,我将它添加到地图中,如下所示:

map = new OpenLayers.Map('map');
map.addLayer(layer);
map.addControl(selectFeature);
selectFeature.activate();

现在,我取消注释那些styleMap行的 instant ,我的所有功能都变得无法点击和无法响应。这些风格不仅不反映状态,而且状态似乎根本没有变化。

我需要做些什么来维护自定义样式并让图层可以移动和/或点击?

1 个答案:

答案 0 :(得分:2)

你是如何设计意图的?符号化器哈希值'default': { .. layer styles here ..} ???

的值是多少

我认为您正在创建一个“空”对象并仅为默认和选择样式设置一些属性,例如:

default: {
    strokeColor: "red"
}

生成仅具有一个属性且没有lineWidth,strokeOpacity等的样式

下一个代码对我来说很好。另请注意,必须在层中指定renderers,而不是在协议中指定。

    var map = new OpenLayers.Map("map");

    // Create an OpenStreeMap raster layer and add to the map
    var osm = new OpenLayers.Layer.OSM();
    map.addLayer(osm);

    // Set view to zoom maximum map extent
    map.zoomToMaxExtent();

    // Create symbolizers inherited from the predefined styles and change only some properties.
    var defaultStyleSymbolizer = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    defaultStyleSymbolizer.strokeColor = "green";
    var selectStyleSymbolizer = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['select']);
    selectStyleSymbolizer.strokeColor = "red";

    // Create a vector layer
    var layer = new OpenLayers.Layer.Vector("zzzzz", {
      strategies: [
        new OpenLayers.Strategy.Fixed(),
      ],
      // Set the renderers
      renderers: ['Canvas','SVG'],
      // Apply the style map
      styleMap: new OpenLayers.StyleMap({
        'default': defaultStyleSymbolizer,
        'select': selectStyleSymbolizer
      }),
      protocol: new OpenLayers.Protocol.HTTP({
        url: "./global_undersea.kml",
        format: new OpenLayers.Format.KML({
          extractStyles: false, 
          extractAttributes: true,
          maxDepth: 0
        })
      })
    });

    // The select control
    var selectFeature = new OpenLayers.Control.SelectFeature([layer], {
      renderIntent: "select",
      clickout: true,
      toggle: true
    });

    // Add layer and control
    map.addLayer(layer);
    map.addControl(selectFeature);
    selectFeature.activate();