「23 - OpenLayers で地図を重ねる 3 - 数値標高モデルの画像の地図を重ねる2」で使用した「ol003-nippon_bmi_akiruno.pgis.html」に単純な Vector Feature を描画します。
最初に、HTML ファイルを準備します。
f 「ol003-nippon_bmi_akiruno_pgis.html」の内容をコピーして「ol009-nippon_bmi_akiruno_pgis.html」ファイルに貼り付けます。
g javascript の一部を次のように修正します。
--- <script src="OpenLayers-2.13.1/lib/OpenLayers.js"></script> <!-- Proj4js を読込（ol008-nippon_bmi_akiruno_pgis.html からコピー） マウスポジション表示の変換だけなら proj4js.js のみで OK --> <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script> <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script> <!-- proj4js-combined.js または proj4js-compressed.js どちらかを使用 <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-compressed.js"></script> --> <!-- EPSG2451 の定義ファイルを読込 --> <script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2451.js"></script>
<script type="text/javascript"> var map, layer0, layer1, layer2, layer3, layer4; ---
29-2 マーカの設定
OpenLayers の Documentation Getting Started の最後の「Adding a Vector Marker to the Map」にあるコードを修正してあきる野市の地図に設定してみます。
---
map.addLayers([layer0, layer3, layer1, layer2, layer4]);
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(139.23, 35.73).transform(epsg4326, map.getProjectionObject()), // EPSG:4326 から EPSG:2451 へ座標変換
{some:'data'},
{externalGraphic: 'img/marker.png', graphicHeight: 40, graphicWidth: 40});
vectorLayer.addFeatures(feature);
map.addLayer(vectorLayer);
---
計算されているか確認するために次の内容の test.html を作成して Web ブラウザで表示します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css"> <link rel="stylesheet" href="OpenLayers-2.13.1/examples/style.css" type="text/css"> <title>WMS Example BMI Akiruno PGIS2</title> <script src="OpenLayers-2.13.1/lib/OpenLayers.js"></script>
<!-- Proj4js を読込（ol008-nippon_bmi_akiruno_pgis.html からコピー） --> <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script> <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script> <!-- <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-compressed.js"></script> --> <script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2451.js"></script>
<script type="text/javascript">
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var epsg2451 = new OpenLayers.Projection("EPSG:2451");
document.write("Point p [before OpenLayers.Projection.transform] is: " + p + "<br />");
OpenLayers.Projection.transform(p,epsg4326,epsg2451);
document.write("Point p [after OpenLayers.Projection.transform] is: " + p + "<br />");
document.write("proj_src is: " + epsg4326 + "<br />");
document.write("proj_tgt is: " + epsg2451 + "<br />");
document.write();
</script>
</head> <body> </body> </html>
表示結果
Point p [before OpenLayers.Projection.transform] is: POINT(139.23 35.73) Point p [after OpenLayers.Projection.transform] is: POINT(-54578.447280558 -29787.44735537442) proj_src is: EPSG:4326 proj_tgt is: EPSG:2451
0 件のコメント:
コメントを投稿