使用openlayers3繪製polygon(多邊形)

問題：在用openlayers3繪製多邊形時總是出現問題,再用鼠標雙擊結束繪圖時，圖形也消失不見
緣由一：在代碼中屢次用到source:new ol.source.Vector(),至關於屢次實例化對象，改正，能夠全局定義source=new ol.source.Vector()，而後在代碼須要的地方直接調用變量名就能夠了；
緣由二：在定義矢量圖層polygonLayer時，定義的樣式style中缺乏fill（填充）或者stroke（線繪製）
錯誤代碼以下所示：
1.source:new ol.source.Vector()
2.style: new ol.style.Style({

image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
                color: 'red'
            })
        })
    })

正確的代碼以下所示：
var openStreetMapLayer=new ol.layer.Tile({

source:new ol.source.OSM()
})

var source=new ol.source.Vector();//矢量圖層是用來渲染矢量數據的圖層類型，在OpenLayers裏，它是能夠定製的，能夠控制它的透明度，顏色，以及加載在上面的要素形狀等。
//經常使用於從數據庫中請求數據，接受數據，並將接收的數據解析成圖層上的信息。如將鼠標移動到中國，相應的區域會以紅色高亮顯示出來，高亮即是矢量圖層的行爲。
var map=new ol.Map({
    layers: [
      openStreetMapLayer
    ],
    // 設置顯示地圖的視圖
    view: new ol.View({
        center: [116.37, 39.89],
        projection: 'EPSG:4326',
        zoom: 10                // 而且定義地圖顯示層級爲2
    }),
    // 讓id爲map的div做爲地圖的容器
    target: 'map'    
});

var polygonLayer=new ol.layer.Vector({
    source:source,

    /*圖形繪製好時最終呈現的樣式,顯示在地圖上的最終圖形*/
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'blue'
        }),
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
                color: 'red'
            })
        })
    })
})
map.addLayer(polygonLayer);
function draw_polygon(){
    var draw = new ol.interaction.Draw({
        source:source,
        type: 'Polygon',

        /*用於交互繪製圖形時所設置的樣式*/

        style: new ol.style.Style({
            fill: new ol.style.Fill({
                // color: 'rgba(255, 255, 255, 0.2)'
                color:'yellow'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 5,
                stroke: new ol.style.Stroke({
                    color: 'red'
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                })
            })
        })
    })
    map.addInteraction(draw);
}
draw_polygon();

正確的運行結果以下所示：