如何用OpenLayers画矩形

Gemma_Lemon 2015-12-08 08:29:27

<!DOCTYPE html>
<html>
<head>
<title>Graticule example</title>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.11.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
<script>
var map = new ol.Map({
view:new ol.View({
center:[36,56],
zoom:5,
maxZoom:28
}),
layers:[
new ol.layer.Tile({
source:new ol.source.OSM({
layer:'osm'}),
opacity:0.9,
zIndex:5
})

],
target:'map'
});

var rectangular = new ol.Feature(
new ol.geom.Polygon([[[36,29],[36,129],[99,129],[99,29],[36,29]]])
);

var featureOverlay= new ol.layer.Vector({
source:new ol.source.Vector({features:[rectangular]
}),
style:new ol.style.Style({
fill:new ol.style.Fill({
color:'rgba(255,255,255,0.2)'
}),
stroke:new ol.style.Stroke({
color:'#ffcc33',
width:2
}),
image:new ol.style.Circle({
radius:7,
fill:new ol.style.Fill({
color:'#ffcc33'
})
})
})
});
featureOverlay.setMap(map);
</script>
</body>
</html>
这是我的代码，但是为什么不能够显示矩形，是哪里出错了呀，跪求大神指点呐....帮帮忙....谢谢

...全文