File "index_OLD20130419_asahi.php"
Full path: /www/ansys/qgis/000_nasu/Backup/OLD/index_OLD20130419_asahi.php
File size: 13.93 KiB (14266 bytes)
MIME-type: text/xml
Charset: utf-8
<?xml version="1.0" encoding="UTF-8"?>
<?php
if(isset($_GET['flag'])){
$flag = isset($_GET['flag']) ? htmlspecialchars($_GET['flag']) : null;
}
else
{
}
?>
<!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: 942px;
height: 852px;
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 $lat_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,1000000,500000,200000,100000,50000,25000,12500],
'controls':[],
'minZoomLevel': 1,
'numZoomLevels':8
};
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/003_asahikawa/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; // 図全体の透明度
// Blue style このスタイル（青）を使ったときのプロパティ
var style_1 = OpenLayers.Util.extend({}, layer_style);
style_1.strokeColor = "red"; // 外周の色
style_1.fillColor = "red"; // 内側の色
// Green style このスタイル（緑）を使ったときのプロパティ
var style_2 = {
strokeColor: "#00FF00",
strokeWidth: 3, // 外周の太さ
pointRadius: 6, // 半径
pointerEvents: "visiblePainted" // この意味は調査中
};
var v_f=1;
//var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style});
var vectorLayer = new Array(10);
for(j = 0;j < dct;j++)
{
// Lat[j]=<?php echo $lat[$jct]; ?>;
// Lon[j]=<?php echo $lon[$jct]; ?>;
vectorLayer[j] = new OpenLayers.Layer.Vector(Tn[j], {style: layer_style,visibility:v_f,label :"test"});
// create a point feature 2つの点の位置とプロパティ
// var point = new OpenLayers.Geometry.Point(139.941, 36.881);
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)
{
var pointFeature = new OpenLayers.Feature.Vector(point,null,style_1);
}
else if(Ws[j] == 1)
{
var pointFeature = new OpenLayers.Feature.Vector(point,null,style_2);
}
// var point2 = new OpenLayers.Geometry.Point(-270, -76);
// var pointFeature2 = new OpenLayers.Feature.Vector(point2,null,style_green);
// レイヤの追加と描画する図の指定
map.addLayer(vectorLayer[j]);
vectorLayer[j].addFeatures(pointFeature);
}
//document.write(j);
/*
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);
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();
//139.926 36.882 139.999 36.922
//139.727 35.678 139.779 35.708
map.setCenter(new OpenLayers.LonLat(142.380151,43.812047),6);
//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.events.triggerEvent('move');
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);
// 地図座標に変換
center.transform(projection900913, projection4326);
// 「度、分、秒」に変換
var lon = ToLatLonString(center.lon);
var lat = ToLatLonString(center.lat);
document.sample.boxLon.value = lon;
document.sample.boxLat.value = lat;
}
// 「度」単位から「度、分、秒」の文字列に変換
function ToLatLonString(value){
var degree = parseInt(value);
var minute = parseInt((value-degree)*60);
var secondRest = (value-degree-(minute/60))*3600;
var second = (Math.round(secondRest));
if(second == 60){
second = 0;
minute = minute + 1;
}
if(minute == 60){
minute = 0;
degree = degree + 1;
}
var str = (degree + '度' + minute + '分' + second + '秒');
return str;
}
// -->
</script>
</head>
<body onload="init()">
<center>
<div id="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>