File "index.php"
Full path: /www/ansys/qgis/000_nasu/map/index.php
File size: 11.37 KiB (11647 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">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta equiv="expires" content="0">
<title>運行管理-旭川-</title>
<meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
<style type="text/css">
#map {
width: 952px;
height: 842px;
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;
}
.olControlButtonItemActive {
position : absolute;
top : 0px;
right : 0px;
background-image: url("van.png");
width : 31px;
height : 31px;
}
.olControlPanel {
top : 85px;
right : 917px;
width : 32px;
height : 32px;
border : 0px solid black;
}
</style>
<?php
//データベース接続
$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" charset="utf-8">
var map;
var lon;
var lat;
var zoom;
var vectorLayer = new Array(50);
var style = new Array(50);
function init()
{
<!--
var dct = <?php echo $Ct; ?>;
var j = 0;
//■PHPで抽出したデータをJavaScript側の変数へ代入⇒カンマ区切りデータを配列に格納
var lat_js = "<?php echo $lat_php ?>";
var lon_js = "<?php echo $lon_php ?>";
var ws_js = "<?php echo $w_status_php ?>";
var t_name_js = "<?php echo $t_name_php ?>";
var Lat = lat_js.split(",");
var Lon = lon_js.split(",");
var Ws = ws_js.split(",");
var Tn = t_name_js.split(",");
//① //■マップファイルの場所を指定
var MapFilePath = "/www/ansys/qgis/000_nasu/map/wms.map";
//② //■任意の倍率、最大倍率、最小倍率を設定
var options = {
'projection':"EPSG:4326",
scales : [3000,100000,50000,25000,12500],
'minZoomLevel': 1,
'numZoomLevels':5
};
//■新規のオーバーレイヤーを作成
map = new OpenLayers.Map('map',options);
//③ //■地図の初期位置・倍率の設定(zoomは、optionsで設定したscalesの配列番号になる(1~))
//現在のクッキーの値をセット(値がない場合はデフォルト値をセット)
if((GetCookie('lon') == null) || (GetCookie('lon') == 0))
{
lon = 139.944;
document.cookie = 'lon=' + encodeURIComponent( lon );
}
else
{
lon = GetCookie('lon');
}
if((GetCookie('lat') == null) || (GetCookie('lat') == 0))
{
lat = 36.908;
document.cookie = 'lat=' + encodeURIComponent( lat );
}
else
{
lat = GetCookie('lat');
}
if(GetCookie('zoom') == null)
{
zoom = 3;
document.cookie = 'zoom=' + encodeURIComponent( zoom );
}
else
{
zoom = GetCookie('zoom');
}
//document.write(DefZoom);
//■マウスイベントの登録
map.events.register("mousemove", map, onMouseMove);
map.events.register("zoomend", map, onZoom);
//map.addControl(new OpenLayers.Control.LayerSwitcher());
//map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.Panel());
//map.addControl(new OPenLayers.Control.Permalink());
//var button = new OpenLayers.Control.Button({
// displayClass: "MyButton", trigger: myFunction
//});
//============================================================
var button = new OpenLayers.Control.Button(
{
displayClass : "olControlButton",
trigger : buttonClicked,
title : "Button is to be clicked"
});
var panel = new OpenLayers.Control.Panel({defaultControl : button});
panel.addControls([button]);
map.addControl (panel);
//============================================================
/*
var panel_type2 = new OpenLayers.Control.Panel({displayClass: 'Panel2'});
map.addControl(panel_type2);
var _aBtn2 = new OpenLayers.Control.Button({displayClass: 'first', type: OpenLayers.Control.TYPE_TOGGLE, eventListeners: {'activate': function(){alert('Control of OpenLayers.Control.TYPE_TOGGLE type is activated')}, 'deactivate': function(){alert('Control of OpenLayers.Control.TYPE_TOGGLE type is deactivated')}}});
panel_type2.addControls([_aBtn2]);
*/
//この下は無くても問題無さそう
/*
map.addLayer(new OpenLayers.Layer('', {
isBaseLayer: true,
maxExtent: new OpenLayers.Bounds(-200, -200, 200, 200)
}));
var buildingLayer = new OpenLayers.Layer.Vector("Buildings", {
maxExtent: new OpenLayers.Bounds(-200, -200, 200, 200),
strategies: [new OpenLayers.Strategy.Cluster({
autoActivate: true,
distance: 100
})]
});
map.addLayer(buildingLayer);
buildingLayer.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-50.126, 36.755))]);
map.zoomToMaxExtent();
*/
map.addControl(new OpenLayers.Control.Button({displayClass: "MyButton", trigger: deleteCookie}));
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=" + MapFilePath +"&",
{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 renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
///////////////////////////////////////////////
for(j = 0;j < dct;j++)
{
var pointFeature;
//■ポイント・ラベルのstyleの定義
style[j] ={
fillOpacity : 0.2, // 内側の透明度
graphicOpacity : 1, // 図全体の透明度
strokeColor: "#00FF00",
strokeWidth: 1, // 外周の太さ
pointRadius: 6, // 半径
label : Tn[j],
fontSize : 10, // 文字のサイズ
labelXOffset : 35,
labelYOffset : 10
};
//■新規のレイヤー作成
vectorLayer[j] = new OpenLayers.Layer.Vector(Tn[j], {style: style[j]});
//■レイヤーに追加する、座標情報の設定
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 map_center = new OpenLayers.Geometry.Point(lon, lat);
map.setCenter(new OpenLayers.LonLat(map_center.x, map_center.y), zoom);
}
function buttonClicked()
{
//alert ('Button clicked.');
deleteCookie();
location.reload();
}
//------マウスイベント(移動後)
function onMouseMove()
{
var lonLat = map.getCenter();
//document.getElementById("lon").value = lonLat.lon;
//document.getElementById("lat").value = lonLat.lat;
document.cookie = 'lon=' + encodeURIComponent( lonLat.lon );
document.cookie = 'lat=' + encodeURIComponent( lonLat.lat );
}
//------マウスイベント(ズーム完了後)
function onZoom()
{
var lonLat = map.getCenter();
var ZoomSts = map.getZoom();
//document.getElementById("zoom").value = ZoomSts;
document.cookie = 'zoom=' + encodeURIComponent( ZoomSts );
document.cookie = 'lon=' + encodeURIComponent( lonLat.lon );
document.cookie = 'lat=' + encodeURIComponent( lonLat.lat );
}
//------クッキー削除
function deleteCookie()
{
dTime = new Date();
dTime.setYear(dTime.getYear() - 1);
document.cookie = "zoom=" + ";expires=" + dTime.toGMTString();
document.cookie = "lon=" + ";expires=" + dTime.toGMTString();
document.cookie = "lat=" + ";expires=" + dTime.toGMTString();
}
//------クッキー読み込み
function GetCookie(name)
{
var result = null;
var cookieName = name + '=';
var allcookies = document.cookie;
var position = allcookies.indexOf( cookieName );
if( position != -1 )
{
var startIndex = position + cookieName.length;
var endIndex = allcookies.indexOf( ';', startIndex );
if( endIndex == -1 )
{
endIndex = allcookies.length;
}
result = decodeURIComponent(allcookies.substring(startIndex, endIndex));
}
return result;
}
// -->
</script>
</head>
<body onload="init()">
<div id="map" name="map"></div>
</body>
</html>