Openlaerで四角描画
表示中の地図の中心に四角形を描画したいのですがよくわからないで困っています。ご教示頂けないでしょうか？
index.htmlの内容
↓ここから
<!doctype html>
<html lang ='ja'>
<head>
<meta charset='utf-8'/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10 ">
<link rel=" stylesheet" href=" https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src=" https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script type='text/javascript'>
var view = new ol.View({
projection: "EPSG:3857",
maxZoom: MaxZoom,
minZoom: MinZoom
})
var __map = null;
var center_lon = 135.100303888; // 中心の経度（須磨浦公園）
var center_lat = 34.637674639; // 中心の緯度（須磨浦公園）
var initZoom = 10; // ズームの初期値
var MinZoom = 6; // ズームの最小値（最も広い範囲）
var MaxZoom = 17; // ズームの最大値（最も狭い範囲）
var default_lon = center_lon;
var default_lat = center_lat;
function loadMap() {
var _stdLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'
})
});
__map = new ol.Map({
target: 'map',
layers: [
_stdLayer
],
view: view,
controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
interactions: ol.interaction.defaults()
});
// zoom slider の追加
__map.addControl(new ol.control.ZoomSlider());
// 中心の指定。view に対して指定。transform を忘れないこと。
view.setCenter(ol.proj.transform([center_lon, center_lat], "EPSG:4326", "EPSG:3857"));
// zoom の指定。view に対して指定する。
view.setZoom(initZoom);
}
</script>
<style>
html, body { height:99%; width: 100%; padding:1px 0; margin: 0; }
#map {height:98%; width:98%; margin:0 auto;}
#content { width: 100%; height: 100%; }
body #content p { margin: 0 0 0 0 ; }
body .popup {
left: -36px ; top: -76px ;
position: relative ; display: inline-block ;
margin: 1.5em 0 ; padding: 3px 6px ;
width: 130px ; background: #FFF ;
box-sizing: border-box ; font-size: 12px ;
border: solid 1px #555 ; border-radius: 6px;
}
</style>
</head>
<body onload ='loadMap();'>
<div id='map'></div>
</body>
</html>
