使用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();

正确的运行结果以下所示：