|
|
<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=no">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<!--讓IE8可以用; no...-->
|
<!--meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /-->
|
<!–[if IE]>
|
<!--script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script-->
|
<script src="html5shiv.js"></script>
|
<script>
|
if(typeof String.prototype.trim !== 'function') {
|
String.prototype.trim = function() {
|
return this.replace("/^\s+|\s+$/g", '');
|
}
|
}
|
</script>
|
|
<![endif]–>
|
|
|
<link rel="stylesheet" href="bootstrap-3.3.6/css/bootstrap.min.css" type="text/css">
|
|
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.css">
|
|
<style>
|
.icon-red {color:rgba(255,0,0,0.3);}
|
|
|
.icon-mangenta {color:rgba(255,0,255,0.5);}
|
.icon-yellow {color:rgba(255,240,0,0.3);}
|
.icon-green {color:rgba(0,255,0,0.3);}
|
.icon-blue {color:rgba(0,0,255,0.3);}
|
|
.gridline {
|
outline: 1px solid orange;
|
}
|
|
body { overflow: hidden; }
|
|
.navbar-offset { margin-top: 50px; }
|
#map { position: absolute; top: 50px; bottom: 0px; left: 0px; right: 0px; }
|
#map .ol-zoom { font-size: 1.2em; }
|
|
.zoom-top-opened-sidebar { margin-top: 5px; }
|
.zoom-top-collapsed { margin-top: 45px; }
|
|
.mini-submenu{
|
display:none;
|
background-color: rgba(255, 255, 255, 0.46);
|
border: 1px solid rgba(0, 0, 0, 0.9);
|
border-radius: 4px;
|
padding: 9px;
|
/*position: relative;*/
|
width: 42px;
|
text-align: center;
|
}
|
|
.mini-submenu-left {
|
position: absolute;
|
top: 60px;
|
left: .5em;
|
z-index: 40;
|
}
|
.mini-submenu-right {
|
position: absolute;
|
top: 60px;
|
right: .5em;
|
z-index: 40;
|
}
|
|
#map { z-index: 35; }
|
|
.sidebar { z-index: 45; }
|
|
.main-row { position: relative; top: 0; }
|
|
.mini-submenu:hover{
|
cursor: pointer;
|
}
|
|
.slide-submenu{
|
background: rgba(0, 0, 0, 0.45);
|
display: inline-block;
|
padding: 0 8px;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
</style>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
|
<!--script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script-->
|
<!--script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&libraries=places"></script-->
|
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&libraries=places&key=AIzaSyD1WL6vX0F31lgL7tki1XbcHyAd8U9oxu0"></script>
|
<script src="web/googlelocate/jquery.geocomplete.js"></script>
|
|
|
<!--script src="js/jquery.geocomplete.js"></script-->
|
<script type="text/javascript" src="bootstrap-3.3.6/js/bootstrap.min.js"></script>
|
<script type="text/javascript" src="web/OpenLayers/lib/proj4js.js"></script>
|
|
<!--script type="text/javascript" src="OpenLayers/lib/defs/EPSG900913.js"></script-->
|
|
<script type="text/javascript" src="web/OpenLayers/lib/defs/EPSG3826.js"></script>
|
<script type="text/javascript" src="web/OpenLayers/lib/defs/EPSG3857.js"></script>
|
<!--script type="text/javascript" src="js/OpenLayers/lib/defs/EPSG3828.js"></script-->
|
<script type="text/javascript" src="web/OpenLayers/lib/projCode/tmerc.js"></script>
|
<script type="text/javascript" src="web/OpenLayers/lib/projCode/merc.js"></script>
|
|
|
<script type="text/javascript" src="web/OpenLayers.js"></script>
|
<script type="text/javascript" src="web/Mapguide2.js"></script>
|
|
|
<script type="text/javascript" src="web/OpenLayers/lib/OpenLayers/Lang/zh-TW.js"></script>
|
|
<script src="web/OpenLayers/lib/Ragbag/Control/ModifyFeature-tools.js"></script>
|
<script src="web/OpenLayers/lib/Ragbag/Handler/Path-patch.js"></script>
|
|
<script src="web/OpenLayers/lib/FeaturePopups.js"></script>
|
<!--for IE6 7 8 9-->
|
<script type="text/javascript" src="web/base64.js"></script>
|
<!-- -->
|
<script type="text/javascript" src="web/tpcSetting.js"></script>
|
<script type="text/javascript" src="web/tpcLib.js"></script>
|
|
<script type="text/javascript" src="web/EditLayer.js"></script>
|
|
<script src="tpcWeb.js"></script>
|
<script>
|
|
</script>
|
|
</head>
|
<body>
|
|
<div class="container">
|
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
|
<div class="container-fluid">
|
<!-- Brand and toggle get grouped for better mobile display -->
|
<div class="navbar-header">
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
<span class="sr-only">Toggle navigation</span>
|
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
</button>
|
<a class="navbar-brand" href="#">變壓器用戶-空間範圍圖</a>
|
</div>
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
<form class="navbar-form navbar-left active" role="search">
|
<div class="form-group">
|
<input id="geocomplete" placeholder="請輸入地址" type="text" class="fd form-control" placeholder="Search">
|
</div>
|
|
<button id="find" class="fd btn ">定位</button>
|
<button id="findLocation" class="fd btn ">我的位置</button>
|
</form>
|
|
<ul class="nav navbar-nav navbar-right">
|
<!--li><a href="#">連結</a></li-->
|
<li class="dropdown">
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">連結 <b class="caret"></b></a>
|
<ul class="dropdown-menu">
|
<li><a id="zoomTaiwan" href="#">台灣範圍</a></li>
|
|
<li><a id="layer5m" href="#">5m範圍圖</a></li>
|
<li><a id="layer25m" href="#">25m範圍圖</a></li>
|
</ul>
|
</li>
|
</ul>
|
</div><!-- /.navbar-collapse -->
|
</div><!-- /.container-fluid -->
|
</nav>
|
</div>
|
</nav>
|
<div class="navbar-offset"></div>
|
<div id="map">
|
</div>
|
<div class="row main-row">
|
<div class="col-sm-4 col-md-3 sidebar sidebar-left pull-left">
|
<div class="panel-group sidebar-body " id="accordion-left">
|
|
|
|
<div id="LL0panel" class="panel panel-default">
|
<div class="panel-heading">
|
<h4 class="panel-title">
|
<a data-toggle="collapse" href="#legends">
|
<i class="fa fa-list-alt"></i>
|
圖例
|
</a>
|
|
</h4>
|
</div>
|
|
|
<div id="legends" class="panel-collapse collapse in">
|
<div class="panel-body list-group">
|
<p>
|
<a href="#" class="list-group-item">
|
<i class="fa fa-circle icon-red"></i><span id="legendRed"> 0~5 </span>
|
</a>
|
<a href="#" class="list-group-item">
|
<i class="fa fa-circle icon-green"></i><span id="legendMangenta"> 6~20</span>
|
</a>
|
<a href="#" class="list-group-item">
|
<i class="fa fa-circle icon-blue"></i><span id="legendYellow"> 21+</span>
|
</a>
|
|
</p>
|
</div>
|
</div>
|
|
</div>
|
|
|
</div>
|
</div>
|
<div class="col-sm-4 col-md-6 mid"></div>
|
<div class="col-sm-4 col-md-3 sidebar sidebar-right pull-right">
|
|
</div>
|
</div>
|
<div class="mini-submenu mini-submenu-left pull-left">
|
<i class="fa fa-list-alt"></i>
|
</div>
|
<div class="mini-submenu mini-submenu-right pull-right">
|
<i class="fa fa-tasks"></i>
|
</div>
|
</div>
|
|
<script>
|
var dwc1=init('map');
|
|
var mapdivName="map";
|
|
function applyMargins() {
|
var leftToggler = $(".mini-submenu-left");
|
var rightToggler = $(".mini-submenu-right");
|
if (leftToggler.is(":visible")) {
|
//$("#"+mapdivName+" .ol-zoom")//olControlZoomOut
|
$("#"+mapdivName+" .olControlZoom")//olControlZoomOut
|
.css("margin-left", 0)
|
.removeClass("zoom-top-opened-sidebar")
|
.addClass("zoom-top-collapsed");
|
} else {
|
$("#"+mapdivName+" .olControlZoom")
|
.css("margin-left", $(".sidebar-left").width()+10)
|
.removeClass("zoom-top-opened-sidebar")
|
.removeClass("zoom-top-collapsed");
|
}
|
if (rightToggler.is(":visible")) {
|
$("#"+mapdivName+" .ol-rotate")
|
.css("margin-right", 0)
|
.removeClass("zoom-top-opened-sidebar")
|
.addClass("zoom-top-collapsed");
|
} else {
|
$("#"+mapdivName+" .ol-rotate")
|
.css("margin-right", $(".sidebar-right").width())
|
.removeClass("zoom-top-opened-sidebar")
|
.removeClass("zoom-top-collapsed");
|
}
|
}
|
|
function isConstrained() {
|
return $("div.mid").width() == $(window).width();
|
}
|
|
function applyInitialUIState() {
|
if (isConstrained()) {
|
$(".sidebar-left .sidebar-body").fadeOut('slide');
|
$(".sidebar-right .sidebar-body").fadeOut('slide');
|
$('.mini-submenu-left').fadeIn();
|
$('.mini-submenu-right').fadeIn();
|
}
|
}
|
|
$(function(){
|
$('.sidebar-left .slide-submenu').on('click',function() {
|
var thisEl = $(this);
|
thisEl.closest('.sidebar-body').fadeOut('slide',function(){
|
$('.mini-submenu-left').fadeIn();
|
applyMargins();
|
});
|
});
|
|
$('.mini-submenu-left').on('click',function() {
|
var thisEl = $(this);
|
$('.sidebar-left .sidebar-body').toggle('slide');
|
thisEl.hide();
|
applyMargins();
|
});
|
|
$('.sidebar-right .slide-submenu').on('click',function() {
|
var thisEl = $(this);
|
thisEl.closest('.sidebar-body').fadeOut('slide',function(){
|
$('.mini-submenu-right').fadeIn();
|
applyMargins();
|
});
|
});
|
|
$('.mini-submenu-right').on('click',function() {
|
var thisEl = $(this);
|
$('.sidebar-right .sidebar-body').toggle('slide');
|
thisEl.hide();
|
applyMargins();
|
});
|
|
$(window).on("resize", applyMargins);
|
|
|
applyInitialUIState();
|
applyMargins();
|
});
|
|
$("#geocomplete").geocomplete()
|
.bind("geocode:result", function (event, result) {
|
// debugger;
|
var pointxy={ x: result.geometry.location.lng(), y: result.geometry.location.lat()};
|
dwc1.locationTo({ point:pointxy ,projection:wgs84,zoomLevel:16});
|
})
|
.bind("geocode:error", function (event, status) {
|
})
|
.bind("geocode:multiple", function (event, results) {
|
});
|
|
function findLocation() {
|
if (navigator.geolocation) {
|
navigator.geolocation.getCurrentPosition(
|
function(locationInfo){
|
var pointxy={x:locationInfo.coords.longitude, y: locationInfo.coords.latitude};
|
|
dwc1.locationTo({ point:pointxy,clearAll:true ,projection:wgs84,zoomLevel: 16});
|
});
|
} else {
|
alert('無法取得所在位置');
|
}
|
}
|
|
function zoomTaiwan()
|
{
|
//debugger;
|
var pointxy={x:120.84798, y:23.92272};
|
dwc1.locationTo({ point:pointxy,clearAll:true ,projection:wgs84,zoomLevel: 6});
|
dwc1.clearMark();
|
}
|
function layer5m()
|
{
|
|
dwc1.getMap().layers[2].setVisibility(true);dwc1.getMap().layers[3].setVisibility(false);
|
dwc1.getMap().layers[3].redraw();dwc1.getMap().layers[2].redraw();
|
}
|
function layer25m()
|
{
|
|
dwc1.getMap().layers[3].setVisibility(true);dwc1.getMap().layers[2].setVisibility(false);
|
dwc1.getMap().layers[3].redraw();dwc1.getMap().layers[2].redraw();
|
}
|
|
$("#find").click(function () {
|
$("#geocomplete").trigger("geocode");
|
return false;
|
});
|
|
$("#findLocation").click(function () {
|
findLocation();
|
return false;
|
});
|
|
$("#zoomTaiwan").click(function () {
|
zoomTaiwan();
|
return false;
|
});
|
$("#layer5m").click(function () {
|
layer5m();
|
return false;
|
});
|
$("#layer25m").click(function () {
|
layer25m();
|
return false;
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
