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点，会打印出该点的属性