Ориентация и/или изменение области KML в OpenLayers

Question

Я создал несколько приложений Javascript для карт с использованием карт google, и я надеялся воссоздать их в OpenLayers. Я нахожу документацию на их сайте довольно запутанной и трудной для навигации. До сих пор, я могу загрузить в моем KML, используя следующий код:

var map = new OpenLayers.Map({ 
      div: divName, 
      layers: [ 
       new OpenLayers.Layer.OSM(), 
       new OpenLayers.Layer.Vector("KML", { 
        strategies: [new OpenLayers.Strategy.Fixed()], 
        protocol: new OpenLayers.Protocol.HTTP({ 
         url: "data.kml", 
         format: new OpenLayers.Format.KML({ 
          extractStyles: true, 
          extractAttributes: true, 
          maxDepth: 4 
         }) 
        }) 
       }) 
      ], 
      zoom: 4 
     }); 
     map.setCenter(
      new OpenLayers.LonLat(-97, 38).transform(
       new OpenLayers.Projection("EPSG:4326"), 
       map.getProjectionObject() 
      ), 4 
     ); 

Что я хотел бы сделать, это быть в состоянии изменить или настроить таргетинг на отдельные регионы KML. Например, просто привязка события клика или изменение цвета фона в регионе.
Я огляделся и не могу найти хороший пример. У меня загружен jQuery, если это помогает. Любая помощь будет принята с благодарностью.

Answer 1

Вы можете добавлять события в OpenLayers карты с помощью объекта OpenLayers.Control.SelectFeature

Чтобы изменить цвет фона объектов что-то, как это должно работать

var myVectorLayer = map.getLayersByName("KML")[0]; 

var highlightCtrl = new OpenLayers.Control.SelectFeature(myVectorLayer , { 
       hover: true, 
       highlightOnly: true, 
       renderIntent: "temporary"     
      }); 

    var selectCtrl = new OpenLayers.Control.SelectFeature(myVectorLayer , 
     {clickout: true} 
    ); 

    map.addControl(highlightCtrl); 
    map.addControl(selectCtrl); 

Уволить дальнейшие события/получить более подробную информацию от выбранных функций, которые можно использовать

myVectorLayer.events.on({ 
      "featureselected": function (e) { 
       alert(e.type + " - " + e.feature.id); 
    } 
});