• ベストアンサー
  • 困ってます

Openlaerで四角描画

  • 質問No.9664784
  • 閲覧数21
  • ありがとう数3
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 12% (1/8)

表示中の地図の中心に四角形を描画したいのですがよくわからないで困っています。ご教示頂けないでしょうか?
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>

質問者が選んだベストアンサー

  • 回答No.2
  • ベストアンサー

ベストアンサー率 72% (111/153)

ご希望の四角形がどのようなものか、具体的に把握できなかったので推測して実装しました。
ご提示いただいたソースコードに以下の改変を加えると、地図の移動に関わらず地図の中央に120px×120pxの四角形を描画します。

■JavaScript
・var MaxZoom = 17の次の行に下記を追加
var square = { // 描画する四角形のサイズ(px)
width: 120,
height: 120
};

・loadMap関数の末尾に下記を追加
// 中心に四角形表示
var target = document.getElementById(__map.values_.target);
target.insertAdjacentHTML('beforeend', '<div id="square_overlay" style="width:' + square.width + 'px; height:' + square.height + 'px"></div>');

■CSS
・下記のCSSを追加
#square_overlay{
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
z-index: 2147483647;
background: rgba(255, 0, 0, 0.5);
border: solid 1px red;
}

var squareの値を変えるとサイズが変更できます。また、スタイルは適宜お好みのものを指定してください。
お礼コメント
rai4_

お礼率 12% (1/8)

ありがとうございました。早速試してみます。
投稿日時:2019/10/09 16:58

その他の回答 (全1件)

  • 回答No.1

ベストアンサー率 10% (400/3783)

詳しくはわかりませんが

z-indexの問題なのでは?

地図と四角の読み込ませ方の順番を考えて見た方が良い気がします。

CCSの読み込ませ方の位置、JSの読み込ませ方の位置。とか
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ