Example サイト
http://www.geoext.org/examples.html
「Modifying Popups」リンクをクリックすると Modified Popup Example が表示されます。
popup-more.js. を参考にします。
説明を意訳すると、複数の場所（位置）のコンテンツを表示する単一のポップアップの使用方法を示します。
var mapPanel, popup;
Ext.onReady(function() {
function addToPopup(loc) {
// create the popup if it doesn't exist
if (!popup) {
popup = new GeoExt.Popup({
title: "Popup",
width: 200,
maximizable: true,
collapsible: true,
map: mapPanel.map,
anchored: true,
listeners: {
close: function() {
// closing a popup destroys it, but our reference is truthy
popup = null;
}
}
});
}
// プロジェクションの変更
var proj2 = new OpenLayers.Projection("EPSG:4326");
loc.transform(map.getProjectionObject(), proj2); // 数値表示のための投影法の変更
// add some content to the popup (this can be any Ext component)
popup.add({
xtype: "box",
autoEl: {
html: "You clicked on (" + loc.lon.toFixed(2) + ", " + loc.lat.toFixed(2) + ")"
}
});
// reset the popup's location
loc.transform(proj2, map.getProjectionObject()); // 表示位置のため投影法を元に戻す
popup.location = loc;
popup.doLayout();
// since the popup is anchored, calling show will move popup to this location
popup.show();
}
// 東京都用マップ設定
var map = new OpenLayers.Map('map', {
controls: [
new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.ScaleLine()
],
projection: new OpenLayers.Projection("EPSG:2456"),
maxResolution: 'auto', //'367.1875', '183.594'
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000),
units: 'meters',
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
// create Ext window including a map panel
var mapPanel = new GeoExt.MapPanel({
title: "Map",
renderTo: "container",
width: 650, height: 356,
layers: [
/* レイヤを変更
new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
)
*/
new OpenLayers.Layer.WMS( "Tokyo Height WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/tokyo_bmi_pgis_img2.map',
layers: 'height',
format: 'image/png'
}),
new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/tokyo_bmi_pgis_img2.map',
layers: 'kukaku',
transparent: true,
format: 'image/png'
})
],
// center: [0, 0],
// zoom: 2
map: map
});
var control = new OpenLayers.Control.Click({
trigger: function(evt) {
var loc = mapPanel.map.getLonLatFromViewPortPx(evt.xy);
addToPopup(loc);
}
});
mapPanel.map.addControl(control);
control.activate();
});
// simple control to handle user clicks on the map
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
single: true,
double: false,
pixelTolerance: 0,
stopSingle: true
},
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
options && options.handlerOptions || {},
this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this,
{
click: this.trigger
},
this.handlerOptions
);
},
CLASS_NAME: "OpenLayers.Control.Click"
});
HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext17_popup-more.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以下のように HTML を作成します。
geoext16_popup.html をコピーし、外部 JavaScript 読み込みファイルを修正しマップのスタイルシートを修正し body タグ内に container を設定します。
---
<title>GeoExt17 Modified Popup</title>
---
<!-- popup-more.js 追加 -->
<script type="text/javascript" src="./popup-more.js"></script>
<!-- map スタイルシート追加 -->
<style type="text/css">
#container {
margin: 1em;
}
</style>
</head>
<body>
<h1 id="title">GeoExt 17 - Modified Popupp</h1>
<p id="shortdesc">
Modified Popup Example
</p>
<p>This example demonstrates the use of a single popup to display
content from multiple locations.<br />
Clicking on the map will open a popup displaying the click location.
Subsequent clicks will update the content and the position.
Close the popup to start over.</p>
<p>この例では、複数の場所（位置）のコンテンツを表示する単一のポップアップの使用方法を示します。<br />
地図をクリックすると、クリック位置を表示するポップアップを開きます。
続けてクリックするとコンテンツと位置を更新（追加）します。最初からやり直すにポップアップを閉じます。</p>
<div id="container"></div>
</body>
</html>
0 件のコメント:
コメントを投稿