File "index_OLD20130418.php"
Full path: /www/ansys/qgis/000_nasu/Backup/OLD/index_OLD20130418.php
File size: 14.38 KiB (14725 bytes)
MIME-type: text/xml
Charset: utf-8
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Refresh" content="30 ;URL=index.php?flag=<?php $flag ?>">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta equiv="expires" content="0">
<title>OpenLayers Example</title>
<meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
<style type="text/css">
#map {
width: 752px;
height: 552px;
border: 1px solid black;
}
h1 {
font-family: Utopia,Arial, Helvetica, sans-serif;
font-size: 28px;
line-height: 32px;
color: #005599;
}
#features {
margin-top: 5px;
font-size: small;
}
table, table td, table th {
border: 1px solid #DDD;
border-collapse: collapse;
margin: 0;
text-align: center;
padding: 1px 3px;
}
table th {
background-color: #EEE;
font-weight: bold;
}
</style>
<?php
//
// Loading the map file
//
//データベース接続
$HOST = "192.168.100.153";
$DB = "ansys";
$USER = "postgres";
$PASS = "am#71ZJ*";
$conn = pg_connect("
host = ". $HOST. "
dbname = ". $DB. "
user = ". $USER. "
password= ". $PASS. "
") or die("接続エラー" .$HOST ."--" .$DB ."--" .$USER ."--" .$PASS .pg_last_error());
$sql = "SELECT * FROM qgis.ts_terminal ORDER BY regdatetime;";
$res = pg_query($conn,$sql) or die (pg_last_error() ."<BR>" .$sql ."<BR>");
$Ct = pg_num_rows($res);
for($ii = 0;$ii < $Ct;$ii++)
{
$row = pg_fetch_array($res,$ii);
$lat[$ii] = $row['lat'];
$lon[$ii] = $row['lon'];
$w_status[$ii] = $row['work_status'];
$t_name[$ii] = $row['terminal_name'];
//print "lat = ". $lat[$ii] ."<BR>";
//print "lon = ". $lon[$ii] ."<BR>";
}
$lat_php = join(",",$lat);
$lon_php = join(",",$lon);
$w_status_php = join(",",$w_status);
$t_name_php = join(",",$t_name);
$jct = 0;
// print $t_name_php ."<BR>";
// print $lon_php ."<BR>";
// print $jct ."<BR>";
// print $Ct ."<BR>";
?>
<script src="./OpenLayers.js"></script>
<script type="text/javascript">
<!--
function init(){
var dct = <?php echo $Ct; ?>;
var j = 0;
var Lat = new Array(10);
var Lon = new Array(10);
//$ar[] = $a[name]; // (1) DBデータを配列に格納
//$v_php = join(“,”,$ar); // (2) 配列をカンマ区切りデータにする
//JavaScript側
var lat_js = "<?php echo $lat_php ?>"; // (3) PHP変数をJavaScript変数に代入
var lon_js = "<?php echo $lon_php ?>"; // (3) PHP変数をJavaScript変数に代入
var ws_js = "<?php echo $w_status_php ?>"; // (3) PHP変数をJavaScript変数に代入
var t_name_js = "<?php echo $t_name_php ?>"; // (3) PHP変数をJavaScript変数に代入
var Lat = lat_js.split(","); // (4) カンマ区切りデータを配列に格納
var Lon = lon_js.split(","); // (4) カンマ区切りデータを配列に格納
var Ws = ws_js.split(","); // (4) カンマ区切りデータを配列に格納
var Tn = t_name_js.split(","); // (4) カンマ区切りデータを配列に格納
//document.write("AAA" + lat_js);
var options = {
'projection':"EPSG:4326",
scales : [3000,100000,50000,25000,12500],
'controls':[],
'minZoomLevel': 1,
'numZoomLevels':5
};
var map = new OpenLayers.Map('map',options);
var landsat = new OpenLayers.Layer.WMS(
"OnEarth",
"http://hyperquad.telascience.org/cgi-bin/onearth", {
layers: "OnEarth"
}, {
isBaseLayer: true,
buffer: 0,
visibility: false,
tileSize: new OpenLayers.Size(512, 512),
opacity: 1.0
}
);
//map.addLayer(landsat);
var host = location.protocol + "//" + location.hostname;
if (location.port != "") {
host += ":" + location.port;
}
var msLayer = new OpenLayers.Layer.WMS(
"WMSレイヤー",
host + "/cgi-bin/mapserv-i18n?map=/www/ansys/qgis/000_nasu/map/mapfiles/wms.map&",
{layers: ['road'],transparent: true, format: 'image/gif'} ,
{isBaseLayer: true, singleTile: true, opacity:0.7}
);
// document.write(host+ "/cgi-bin/mapserv-i18n?map=../html/mapserver-extensions/mapfiles/wms.map&");
map.addLayer(msLayer);
///////////////////////////////////////////////
// 図の基本プロパティ
var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
layer_style.fillOpacity = 0.2; // 内側の透明度
layer_style.graphicOpacity = 1; // 図全体の透明度
/*
// Green style このスタイル（緑）を使ったときのプロパティ
var style_1 = {
strokeColor: "#00FF00",
strokeWidth: 3, // 外周の太さ
pointRadius: 6, // 半径
pointerEvents: "visiblePainted" // この意味は調査中
};
// Green style このスタイル（緑）を使ったときのプロパティ
var style_1 = OpenLayers.Util.extend({}, layer_style);
style_1.strokeColor = "red"; // 外周の色
style_1.fillColor = "red"; // 内側の色
style_1.fontSize = 10; // 文字のサイズ
*/
var v_f=1;
//var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style});
var vectorLayer = new Array(10);
var style = new Array(50);
for(j = 0;j < dct;j++)
{
//styleの定義
style[j] = OpenLayers.Util.extend({}, layer_style);
style[j].label = Tn[j];
style[j].fontSize = 10; // 文字のサイズ
style[j].labelAlign = "left";
style[j].labelXOffset = 10;
style[j].labelYOffset = 10;
vectorLayer[j] = new OpenLayers.Layer.Vector(Tn[j], {style: layer_style,visibility:v_f,label:"Test",fontColor:"#00FFFF",fontSize: "12px",fontFamily: "Arial"});
// create a point feature 2つの点の位置とプロパティ
var point = new OpenLayers.Geometry.Point(Lon[j], Lat[j]);
point.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
//work_statusによって色を変更
if(Ws[j] == 0)
{
style[j].strokeColor = "red"; // 外周の色
style[j].fillColor = "red"; // 内側の色
}
else if(Ws[j] == 1)
{
style[j].strokeColor = "green"; // 外周の色
style[j].fillColor = "red"; // 内側の色
}
else if(Ws[j] == 2)
{
style[j].strokeColor = "blue"; // 外周の色
style[j].fillColor = "red"; // 内側の色
}
else if(Ws[j]== 3)
{
style[j].strokeColor = "pink"; // 外周の色
style[j].fillColor = "red"; // 内側の色
}
var pointFeature = new OpenLayers.Feature.Vector(point,null,style[j]);
// レイヤの追加と描画する図の指定
map.addLayer(vectorLayer[j]);
vectorLayer[j].addFeatures(pointFeature);
}
/*
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var marker = new OpenLayers.Marker(
new OpenLayers.LonLat(139.941, 36.881)
.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
)
);
markers.addMarker(marker);
var size = new OpenLayers.Size(32, 32);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('img/van.png', size, offset);
var marker = new OpenLayers.Marker(
new OpenLayers.LonLat(139.941, 36.881)
.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
),
icon
);
markers.addMarker(marker);
*/
/*
// 点のプロパティ
var style_point = {
strokeColor: "#FF6347",
fillColor: "#FF6347",
fillOpacity: 0.2, // 内側の透明度
strokeWidth: 4, // 外周の太さ
pointRadius: 10 // 半径
};
var vectorLayer = new OpenLayers.Layer.Vector("描画テスト", {style: layer_style});
// 点の座標を決める
var point = new OpenLayers.Geometry.Point(139.941, 36.881);
// 座標を変換 ※この処理が新たに必要だった
point.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
// 点を生成
var pointFeature = new OpenLayers.Feature.Vector(point, null, style_point);
// レイヤの追加と描画する図の指定
map.addLayer(vectorLayer);
vectorLayer.addFeatures([pointFeature]);
*/
///////////////////////////////////////////////
var styles = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeColor: "#FF0000",
strokeWidth: 10,
strokeOpacity: 0.5
})
});
highlightLayer = new OpenLayers.Layer.Vector("選択道路", { styleMap: styles });
map.addLayer(highlightLayer);
control = new OpenLayers.Control.GetFeature({
protocol: OpenLayers.Protocol.WFS.fromWMSLayer(msLayer, {
featurePrefix: "ms",
maxFeatures: 3,
formatOptions: {
xy: false
}
}),
single: false
});
control.events.register("featuresselected", this, function(evt){
highlightLayer.destroyFeatures();
showInfo(evt.features);
// 地図の中心を取得
var center = map.getCenter();
//document.write(center.lon);
// 地図座標に変換
center.transform(new OpenLayers.Projection("EPSG:4326"));
document.sample.boxLon.value = center.lon;
document.sample.boxLat.value = center.lat;
if (evt.features && evt.features.length > 0) {
highlightLayer.addFeatures(evt.features);
highlightLayer.redraw();
}
});
control.events.register("clickout", this, function(evt){
highlightLayer.destroyFeatures();
showInfo(null);
});
map.addControl(control);
control.activate();
map.setCenter(new OpenLayers.LonLat(139.944,36.908),3);
//map.events.register('move',this, handleMapMove);
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.MouseDefaults());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.ScaleLine());
//map.addControl(new OpenLayers.Control.OverviewMap());
//map.addControl(new OpenLayers.Control.ZoomPanel());
// Mapにmoveイベントを登録し、初期表示のためにイベント起動
//map.events.register('move', map, handleMapMove);
//map.events.triggerEvent('move');
//右クリックでブラウザのデフォルトのメニューが開かないようにする
document.getElementById('map').oncontextmenu = function(e){
e = e?e:window.event;
if(e.preventDefault) {
e.preventDefault(); // For non-IE browsers.
}else{
return false; // For IE browsers.
}
}
var center = map.getCenter();
//document.write(center);
}
var attributes = ["gid", "id", "namae", "joutai", "yuryo", "syubetsu", "kokubango", "fukuin", "hashi", "tonneru", "yukiooi"];
function showInfo(features) {
if (features == null || features.length == 0) {
document.getElementById("attributes").style.display = "none";
document.getElementById("message").style.display = "block";
return;
}
document.getElementById("attributes").style.display = "block";
document.getElementById("message").style.display = "none";
var table = document.getElementById("attributes");
while (table.childNodes.length > 2) {
table.removeChild(table.lastChild);
}
for (var i = 0, len = features.length; i < len; i++) {
var tr = document.createElement("tr");
for (var k = 0; k < attributes.length; k++) {
var td = document.createElement("td");
td.innerHTML = features[i].attributes[attributes[k]];
tr.appendChild(td);
}
table.appendChild(tr);
}
}
// moveイベント
function handleMapMove() {
// 地図の中心を取得
var center = map.getCenter();
//document.write(center.lon);
// 地図座標に変換
center.transform(new OpenLayers.Projection("EPSG:4326"));
document.sample.boxLon.value = center.lon;
document.sample.boxLat.value = center.lat;
}
// -->
</script>
</head>
<body onload="init()">
<center>
<!-- <div id="map" name="map" style="width:700px;height:1000px;"></div>-->
<div id="map" name="map"></div>
<div id="features">
<p id="message" style="display:none">表示するデータがありません。</p>
<table>
<tbody id="attributes" style="display:none">
<tr>
<th>gid</th>
<th>id</th>
<th>名前</th>
<th>状態</th>
<th>有料</th>
<th>種別</th>
<th>国道番号</th>
<th>幅員</th>
<th>橋</th>
<th>トンネル</th>
<th>雪覆い</th>
</tr>
</tbody>
</table>
</div>
</center>
<form name="sample">
<div>経度：<input type="text" name="boxLon" />
緯度：<input type="text" name="boxLat" /></div>
</form>
</body>
</html>