openlayers2實現圖層要素單擊事件

openlayers2已經越來越少用了，但是由於一些老項目要維護的原因，偶爾還是要使用一下。經常不用，一些功能使用方法難免會生疏，所以最好趁着新鮮寫下了。
這次要實現的是在矢量圖層上單擊選擇要素事件，示例代碼如下：

1、實現過程

1）初始化地圖

先進行地圖初始化，並定義了一個名爲vectorlLayer的矢量圖層。

var map;
var vectorLayer;//這此示例操作的圖層
function init() {
  var layerURL = 'http://10.18.224.161:8080/geoserver/serverTest/wms?service=WMS'; 
  var layerName = 'serverTest:world'; 
  var baseLayer =  new OpenLayers.Layer.WMS(
    'chinaMap',
    layerURL,
    {
      layers: layerName
    }
  );
  
  map = new OpenLayers.Map({
   div: 'map',
   layers:[ baseLayer],
   center: [116.3, 32],
   zoom: 5 
  });

  //定義圖層樣式
  var style = new OpenLayers.Style({
    fillColor: "#ffcc66",
    strokeColor: "#ff9933",
    strokeWidth: 2,
    label: "${label}",//大括號內爲要標註的要素屬性，要素屬性設置見76行
    fontColor: "#333333",
    fontFamily: "sans-serif",
    fontWeight: "bold"
  },{
    //符號字體隨地圖縮放而縮放
    rules: [
      new OpenLayers.Rule({
        minScaleDenominator: 200000000,
        symbolizer: {
          pointRadius: 7,
          fontSize: "9px"
        }
      }),
      new OpenLayers.Rule({
        maxScaleDenominator: 200000000,
        minScaleDenominator: 100000000,
        symbolizer: {
          pointRadius: 10,
          fontSize: "12px"
        }
      }),
      new OpenLayers.Rule({
        maxScaleDenominator: 100000000,
        symbolizer: {
          pointRadius: 13,
          fontSize: "15px"
        }
      })
    ]
  })

  vectorLayer = new OpenLayers.Layer.Vector("layerName",{
    styleMap: new OpenLayers.StyleMap(style)//設置圖層樣式
  })
  map.addLayer(vectorLayer);
}

2）載入矢量數據

這個方法中，先定義了示例數據data（爲點數據），然後將數據載入到vectorLayer圖層中。

//加載數據並顯示
function loadData(){
  var data = [
    {name: 'p1', x: 119, y: 36},
    {name: 'p2', x: 114.6, y: 32.5},
    {name: 'p3', x: 120, y: 28.3},
    {name: 'p4', x: 103.4, y: 34.1},
    {name: 'p5', x: 118, y: 33.8},
  ];
  var fts = [];
  data.forEach(pt =>{
    var ft = new OpenLayers.Feature.Vector(
      new OpenLayers.Geometry.Point(pt.x, pt.y),
      {
        label: pt.name	//設置要素屬性
      }
    )
    fts.push(ft);
  })
  vectorLayer.addFeatures(fts);
}

3）註冊單擊選擇事件

1、先定義了一個選擇控件selectControl，並綁定到vectorLayer圖層上;
2、選擇控件加入到Map中並激活控件
3、在vectorLayer圖層上註冊featureselected要素選擇事件。事件方法是打印選擇要素的屬性

這樣，當單擊vectorLayer圖層上的要素時，會選擇該要素，並出發featureselected事件。

//在vector圖層上註冊單擊選擇事件
function registerClickEvent(){
  var selectControl = new OpenLayers.Control.SelectFeature(
    vectorLayer,
    {
      clickout: true, toggle:false,
      multiple: false, hover: false,
      toggleKey: "ctrlKey",
      multipleKey: "shiftKey"
    }
  )

  map.addControl(selectControl);
  selectControl.activate();

  vectorLayer.events.on({
    'featureselected': function(evt) {
      console.log(evt.feature.attributes);//打印選擇的要素的屬性
    }
  })

}

2、結果

如圖，單擊地圖上的p4點，會打印出該點的屬性