OpenLayers创建一个新的Vector图层并添加覆盖物，并监听图层事件

1、创建图层并添加到地图上

var layer = map.getLayersBy("name",'基础图层');

//1.设置图层默认样式
let baseStyle = new OpenLayers.Style({
    fillColor: '#0be14e',
    fillOpacity: 0.2,
    strokeWidth: 2,
    strokeColor: '#0be14e',
    strokeOpacity: 1,
    pointRadius: 8,
});

//2.判断图层不存在时创建
if(layer.length == 0){
    layer = new OpenLayers.Layer.Vector(
        '基础图层',
        {
            styleMap:new OpenLayers.StyleMap({
                "default": baseStyle
            })
        });
        
    //3.把图层添加到地图上
    map.addLayer(layer);
}

2、给图层添加覆盖物Feature

// 1.从后台获取面的信息polygon
var polygon = "POLYGON((12621138.5917948 2647048.59995726,12621138.5917948 2646988.07768547,12621090.3890413 2647018.33879317,12621138.5917948 2647048.59995726))";

// 2.转换成feature
var feature = new OpenLayers.Format.WKT().read(polygon);

// 3.通过图层添加覆盖物Feature
map.getLayersBy("name",'基础图层')[0].addFeatures(feature);

3、监听图层事件

layer.events.register('moveend', layer, function (e) {
    console.log(e);
});

// 如果需要监听多个事件，可以写成这样
layer.events.on({
    "move": function(e){
        console.log('移动')
    },
    "moveend": function(e){
        console.log('移动完成')
    }
});

其中图层事件有

• loadstart - 在图层加载开始时触发
• loadend - 在图层加载结束时触发
• visibilitychanged - 更改图层的可见性属性时触发
• move - 当图层移动时触发（在拖动过程中每次鼠标移动触发）。
• moveend - 当图层移动完成时触发，作为参数传递的对象具有zoomChanged布尔属性，该属性指示缩放已更改。
• added - 将图层添加到地图后触发
• removed - 从地图上删除图层后触发

注：一般情况下我用的最多的是"moveend"事件，为什么呢，有些时候请求的数据太多，几万甚至几十万几百万，这个时候不可能是把这些数据全部渲染到地图上，那么我们只需要渲染当前屏幕的数据就可以，也就是按需加载，移动完成一次就请求一次当前屏幕的数据渲染。