1、創(chuàng)建圖層并添加到地圖上

var layer = map.getLayersBy("name",'基礎(chǔ)圖層');

//1.設(shè)置圖層默認(rèn)樣式
let baseStyle = new OpenLayers.Style({
    fillColor: '#0be14e',
    fillOpacity: 0.2,
    strokeWidth: 2,
    strokeColor: '#0be14e',
    strokeOpacity: 1,
    pointRadius: 8,
});

//2.判斷圖層不存在時(shí)創(chuàng)建
if(layer.length == 0){
    layer = new OpenLayers.Layer.Vector(
        '基礎(chǔ)圖層',
        {
            styleMap:new OpenLayers.StyleMap({
                "default": baseStyle
            })
        });
        
    //3.把圖層添加到地圖上
    map.addLayer(layer);
}

2、給圖層添加覆蓋物Feature

// 1.從后臺(tái)獲取面的信息polygon
var polygon = "POLYGON((12621138.5917948 2647048.59995726,12621138.5917948 2646988.07768547,12621090.3890413 2647018.33879317,12621138.5917948 2647048.59995726))";

// 2.轉(zhuǎn)換成feature
var feature = new OpenLayers.Format.WKT().read(polygon);

// 3.通過圖層添加覆蓋物Feature
map.getLayersBy("name",'基礎(chǔ)圖層')[0].addFeatures(feature);

3、監(jiān)聽圖層事件

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

// 如果需要監(jiān)聽多個(gè)事件，可以寫成這樣
layer.events.on({
    "move": function(e){
        console.log('移動(dòng)')
    },
    "moveend": function(e){
        console.log('移動(dòng)完成')
    }
});

其中圖層事件有

• loadstart - 在圖層加載開始時(shí)觸發(fā)
• loadend - 在圖層加載結(jié)束時(shí)觸發(fā)
• visibilitychanged - 更改圖層的可見性屬性時(shí)觸發(fā)
• move - 當(dāng)圖層移動(dòng)時(shí)觸發(fā)（在拖動(dòng)過程中每次鼠標(biāo)移動(dòng)觸發(fā)）。
• moveend - 當(dāng)圖層移動(dòng)完成時(shí)觸發(fā)，作為參數(shù)傳遞的對(duì)象具有zoomChanged布爾屬性，該屬性指示縮放已更改。
• added - 將圖層添加到地圖后觸發(fā)
• removed - 從地圖上刪除圖層后觸發(fā)

注：一般情況下我用的最多的是"moveend"事件，為什么呢，有些時(shí)候請(qǐng)求的數(shù)據(jù)太多，幾萬甚至幾十萬幾百萬，這個(gè)時(shí)候不可能是把這些數(shù)據(jù)全部渲染到地圖上，那么我們只需要渲染當(dāng)前屏幕的數(shù)據(jù)就可以，也就是按需加載，移動(dòng)完成一次就請(qǐng)求一次當(dāng)前屏幕的數(shù)據(jù)渲染。