<!DOCTYPE html>
|
<html class="no-js css-menubar" lang="zh-cn">
|
|
<head>
|
<title>上海市道路交通环境监测平台</title>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<!-- 移动设备 viewport -->
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
|
<meta name="author" content="上海市道路交通环境监测平台 http://mars3d.cn" />
|
<!-- 360浏览器默认使用Webkit内核 -->
|
<meta name="renderer" content="webkit" />
|
<!-- Chrome浏览器添加桌面快捷方式(安卓) -->
|
<link rel="icon" type="image/png" href="img/favicon/favicon.png" />
|
<meta name="mobile-web-app-capable" content="yes" />
|
<!-- Safari浏览器添加到主屏幕(IOS) -->
|
<link rel="icon" sizes="192x192" href="img/favicon/apple-touch-icon.png" />
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
<meta name="apple-mobile-web-app-title" content="火星科技 MarsGIS" />
|
|
<!--第三方lib-->
|
<script type="text/javascript" src="../lib/include-lib.js?time=20210803" libpath="../lib/"
|
include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,localforage,nprogress,toastr,admui,turf,mars3d,mars3d-widget,mars3d-wind"></script>
|
<link href="../css/style.css?time=20210803" rel="stylesheet" />
|
<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
|
<link href="../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.css" rel="stylesheet" />
|
<script src="../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.js"></script>
|
<script src="../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
|
|
<link rel="stylesheet" href="css/ol.css" type="text/css">
|
<link href="css/dataTime.css" rel="stylesheet" />
|
|
<script type="text/javascript" src="js/changable_params.js"></script>
|
<style>
|
* {
|
padding: 0;
|
margin: 0;
|
box-sizing: border-box;
|
}
|
|
ul,
|
li {
|
list-style: none;
|
}
|
|
.footbar {
|
height: 50px;
|
background: #fff;
|
box-shadow: 0 -1px 6px rgba(13, 71, 161, 0.25);
|
z-index: 9999999999999;
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
}
|
|
.footbar ul {
|
display: flex;
|
overflow: hidden;
|
margin: 8px 12px;
|
border-radius: 3px;
|
}
|
|
.footbar ul li {
|
flex: 1;
|
font-size: 14px;
|
line-height: 34px;
|
color: #333;
|
text-align: center;
|
border: 1px solid rgba(83, 116, 167, 0.2);
|
}
|
|
.footbar ul li.active {
|
font-weight: 500;
|
color: #e0f7fa;
|
background: #0d47a1;
|
border: 1px solid 0d47a1;
|
}
|
|
.hidden {
|
display: none;
|
}
|
|
.map-panel {
|
height: calc(100vh - 50px);
|
background: #fff;
|
overflow: hidden;
|
}
|
|
.map-panel-item {
|
width: 100%;
|
height: 100%;
|
}
|
|
/*引用geoserver样式表*/
|
/* .ol-zoom {
|
top: 52px;
|
} */
|
|
.ol-toggle-options {
|
z-index: 1000;
|
background: rgba(255, 255, 255, 0.4);
|
border-radius: 4px;
|
padding: 2px;
|
position: absolute;
|
left: 8px;
|
top: 8px;
|
}
|
|
#updateFilterButton,
|
#resetFilterButton {
|
height: 22px;
|
width: 22px;
|
text-align: center;
|
text-decoration: none !important;
|
line-height: 22px;
|
margin: 1px;
|
font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
|
font-weight: bold !important;
|
background: rgba(0, 60, 136, 0.5);
|
color: white !important;
|
padding: 2px;
|
}
|
|
.ol-toggle-options a {
|
background: rgba(0, 60, 136, 0.5);
|
color: white;
|
display: block;
|
font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
|
font-size: 19px;
|
font-weight: bold;
|
height: 22px;
|
line-height: 11px;
|
margin: 1px;
|
padding: 0;
|
text-align: center;
|
text-decoration: none;
|
width: 22px;
|
border-radius: 2px;
|
}
|
|
.ol-toggle-options a:hover {
|
color: #fff;
|
text-decoration: none;
|
background: rgba(0, 60, 136, 0.7);
|
}
|
|
body {
|
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
|
font-size: small;
|
}
|
|
iframe {
|
width: 100%;
|
height: 100%;
|
border: none;
|
}
|
|
.styleSelect {
|
position: fixed;
|
top: 54px;
|
right: 10px;
|
z-index: 999;
|
height: 32px;
|
line-height: 32px;
|
}
|
|
/* Toolbar styles */
|
#toolbar {
|
position: relative;
|
padding-bottom: 0.5em;
|
}
|
|
#toolbar ul {
|
list-style: none;
|
padding: 0;
|
margin: 0;
|
}
|
|
#toolbar ul li {
|
float: left;
|
padding-right: 1em;
|
padding-bottom: 0.5em;
|
}
|
|
#toolbar ul li a {
|
font-weight: bold;
|
font-size: smaller;
|
vertical-align: middle;
|
color: black;
|
text-decoration: none;
|
}
|
|
#toolbar ul li a:hover {
|
text-decoration: underline;
|
}
|
|
#toolbar ul li * {
|
vertical-align: middle;
|
}
|
|
#map {
|
clear: both;
|
position: relative;
|
width: 100%;
|
height: calc(100vh - 44px);
|
margin-top: 44px;
|
border: none;
|
background-color: darkslategrey;
|
}
|
|
#wrapper {
|
width: 100%;
|
}
|
|
#location {
|
float: right;
|
}
|
|
/* Styles used by the default GetFeatureInfo output, added to make IE happy */
|
table.featureInfo,
|
table.featureInfo td,
|
table.featureInfo th {
|
border: 1px solid #ddd;
|
border-collapse: collapse;
|
margin: 0;
|
padding: 0;
|
font-size: 90%;
|
padding: .2em .1em;
|
}
|
|
table.featureInfo th {
|
padding: .2em .2em;
|
font-weight: bold;
|
background: #eee;
|
}
|
|
table.featureInfo td {
|
background: #fff;
|
}
|
|
table.featureInfo tr.odd td {
|
background: #eee;
|
}
|
|
table.featureInfo caption {
|
text-align: left;
|
font-size: 100%;
|
font-weight: bold;
|
padding: .2em .2em;
|
}
|
|
.datetimepicker {
|
right: 0;
|
border-radius: 0;
|
}
|
|
.datetimepicker table {
|
width: 100%;
|
}
|
</style>
|
|
<script src="js/ol.js" type="text/javascript"></script>
|
<script src="js/changable_params.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
<!--道路展示 开始-->
|
<div class="map-panel-item">
|
<div id="toolbar" style="display: none; height: 0; overflow: hidden;">
|
<ul>
|
<li>
|
<a>WMS version:</a>
|
<select id="wmsVersionSelector" onchange="setWMSVersion(value)">
|
<option value="1.1.1">1.1.1</option>
|
<option value="1.3.0">1.3.0</option>
|
</select>
|
</li>
|
<li>
|
<a>Tiling:</a>
|
<select id="tilingModeSelector" onchange="setTileMode(value)">
|
<option value="untiled">Single tile</option>
|
<option value="tiled">Tiled</option>
|
</select>
|
</li>
|
<li>
|
<a>Antialias:</a>
|
<select id="antialiasSelector" onchange="setAntialiasMode(value)">
|
<option value="full">Full</option>
|
<option value="text">Text only</option>
|
<option value="none">Disabled</option>
|
</select>
|
</li>
|
<li>
|
<a>Format:</a>
|
<select id="imageFormatSelector" onchange="setImageFormat(value)">
|
<option value="image/png">PNG 24bit</option>
|
<option value="image/png8">PNG 8bit</option>
|
<option value="image/gif">GIF</option>
|
<option id="jpeg" value="image/jpeg">JPEG</option>
|
<option id="jpeg-png" value="image/vnd.jpeg-png">JPEG-PNG</option>
|
<option id="jpeg-png8" value="image/vnd.jpeg-png8">JPEG-PNG8</option>
|
</select>
|
</li>
|
<li>
|
<a>Styles:</a>
|
<select id="imageFormatSelector" onchange="setStyle(value)">
|
<option value="">Default</option>
|
<option value="polyline_road_co">polyline_road_co</option>
|
<option value="polyline_road_pm25">polyline_road_pm25</option>
|
<option value="polyline_road_no">polyline_road_no</option>
|
<option value="polyline_road_no2">polyline_road_no2</option>
|
<option value="polyline_road_nox">polyline_road_nox</option>
|
<option value="polyline_road_pm10">polyline_road_pm10</option>
|
</select>
|
</li>
|
<li>
|
<a>Width/Height:</a>
|
<select id="widthSelector" onchange="setWidth(value)">
|
<!--
|
These values come from a statistics of the viewable area given a certain screen area
|
(but have been adapted a litte, simplified numbers, added some resolutions for wide screen)
|
You can find them here: http://www.evolt.org/article/Real_World_Browser_Size_Stats_Part_II/20/2297/
|
-->
|
<option value="auto">Auto</option>
|
<option value="600">600</option>
|
<option value="750">750</option>
|
<option value="950">950</option>
|
<option value="1000">1000</option>
|
<option value="1200">1200</option>
|
<option value="1400">1400</option>
|
<option value="1600">1600</option>
|
<option value="1900">1900</option>
|
</select>
|
<select id="heigthSelector" onchange="setHeight(value)">
|
<option value="auto">Auto</option>
|
<option value="300">300</option>
|
<option value="400">400</option>
|
<option value="500">500</option>
|
<option value="600">600</option>
|
<option value="700">700</option>
|
<option value="800">800</option>
|
<option value="900">900</option>
|
<option value="1000">1000</option>
|
</select>
|
</li>
|
<li>
|
<a>Filter:</a>
|
<select id="filterType">
|
<option value="cql">CQL</option>
|
<option value="ogc">OGC</option>
|
<option value="fid">FeatureID</option>
|
</select>
|
<input type="text" size="80" id="filter" />
|
<a id="updateFilterButton" href="#" onClick="updateFilter()" title="Apply filter">Apply</a>
|
<a id="resetFilterButton" href="#" onClick="resetFilter()" title="Reset filter">Reset</a>
|
</li>
|
</ul>
|
</div>
|
|
<!--选择时间 开始-->
|
<div class="input-group input-group-lg append_test">
|
<div style="width:78px; height:44px; line-height: 1; border-radius: 0; font-size: 14px;"
|
class="fa fa-globe input-group-addon dropdown-toggle" data-toggle="dropdown">
|
<span id="current">小时</span>
|
</div>
|
<input type='text' class="form-control date" id='appDate' name="appDate" onchange="changetime()"
|
style="height:44px;width:100%;display:none;" />
|
<input type='text' class="form-control date" id='appDateHour' name="appDateHour" onchange="changetime()"
|
style="height:44px;width:100%;" />
|
<ul class="dropdown-menu dropdown-menu_datatime">
|
<div class="layui-form">
|
<div class="layui-form-item">
|
<div class="layui-inline" style="margin-bottom: 10px;">
|
<div class="layui-input-inline">
|
<input type="radio" name="datatype" value="hour" title="小时数据" checked >
|
<input type="text" class="layui-input" id="datatype_hour" placeholder="yyyy-mm-dd hh">
|
</div>
|
</div>
|
<div class="layui-inline">
|
<div class="layui-input-inline">
|
<input type="radio" name="datatype" value="day" title="天数据" >
|
<input type="text" class="layui-input" id="datatype_day" placeholder="yyyy-mm-dd">
|
</div>
|
</div>
|
</div>
|
</div>
|
</ul>
|
</div>
|
<script type="text/javascript" src="js/dataTime.js"></script>
|
<!--选择时间 结束-->
|
<select id="imageFormatSelector" onchange="setStyle(value)" class="styleSelect">
|
<option value="">Default</option>
|
<option value="polyline_road_co">co</option>
|
<option value="polyline_road_pm25">pm25</option>
|
<option value="polyline_road_no">no</option>
|
<option value="polyline_road_no2">no2</option>
|
<option value="polyline_road_nox">nox</option>
|
<option value="polyline_road_pm10">pm10</option>
|
</select>
|
|
<div id="map">
|
<div class="ol-toggle-options ol-unselectable" style="display: none; height: 0; overflow: hidden;"><a title="Toggle options toolbar"
|
onClick="toggleControlPanel()" href="#toggle">...</a></div>
|
</div>
|
<div id="wrapper" class="hidden">
|
<div id="location"></div>
|
<div id="scale">
|
</div>
|
<div id="nodelist">
|
<em>Click on the map to get feature info</em>
|
</div>
|
<script type="text/javascript">
|
var pureCoverage = false;
|
// if this is just a coverage or a group of them, disable a few items,
|
// and default to jpeg format
|
var format = 'image/png';
|
var bounds = [120, 30,
|
123, 32];
|
if (pureCoverage) {
|
document.getElementById('antialiasSelector').disabled = true;
|
document.getElementById('jpeg').selected = true;
|
format = "image/jpeg";
|
}
|
|
var supportsFiltering = true;
|
if (!supportsFiltering) {
|
document.getElementById('filterType').disabled = true;
|
document.getElementById('filter').disabled = true;
|
document.getElementById('updateFilterButton').disabled = true;
|
document.getElementById('resetFilterButton').disabled = true;
|
}
|
|
var mousePositionControl = new ol.control.MousePosition({
|
className: 'custom-mouse-position',
|
target: document.getElementById('location'),
|
coordinateFormat: ol.coordinate.createStringXY(5),
|
undefinedHTML: ' '
|
});
|
|
var untiled = new ol.layer.Image({
|
source: new ol.source.ImageWMS({
|
ratio: 1,
|
url: default_system_params.geoserver_url_predix + 'geoserver/konglu_58/wms',
|
params: {
|
'FORMAT': 'image/png',
|
'VERSION': '1.1.1',
|
"STYLES": 'polyline_road_pm25',
|
"LAYERS": 'konglu_58:vis_roadsection_' + getFormParams().querytype_,
|
"exceptions": 'application/vnd.ogc.se_inimage',
|
"BBOX": '120.84686279296875,30.25909423828125,121.98394775390625,32.00592041015625'
|
}
|
})
|
});
|
|
var tiled = new ol.layer.Tile({
|
visible: false,
|
source: new ol.source.TileWMS({
|
url: default_system_params.geoserver_url_predix + 'geoserver/konglu_58/wms',
|
params: {
|
'FORMAT': 'image/png',
|
'VERSION': '1.1.1',
|
tiled: true,
|
"STYLES": 'polyline_road_pm25',
|
"LAYERS": 'konglu_58:vis_roadsection_' + getFormParams().querytype_,
|
"exceptions": 'application/vnd.ogc.se_inimage',
|
"BBOX": '120.84686279296875,30.25909423828125,121.98394775390625,32.00592041015625',
|
tilesOrigin: 120 + "," + 30
|
}
|
})
|
});
|
var projection = new ol.proj.Projection({
|
code: 'EPSG:4326',
|
units: 'degrees',
|
axisOrientation: 'neu',
|
global: true
|
});
|
var map = new ol.Map({
|
controls: ol.control.defaults({
|
attribution: false
|
}).extend([mousePositionControl]),
|
target: 'map',
|
layers: [
|
untiled,
|
tiled
|
],
|
view: new ol.View({
|
projection: projection
|
})
|
});
|
map.getView().on('change:resolution', function (evt) {
|
var resolution = evt.target.get('resolution');
|
var units = map.getView().getProjection().getUnits();
|
var dpi = 25.4 / 0.28;
|
var mpu = ol.proj.METERS_PER_UNIT[units];
|
var scale = resolution * mpu * 39.37 * dpi;
|
if (scale >= 9500 && scale <= 950000) {
|
scale = Math.round(scale / 1000) + "K";
|
} else if (scale >= 950000) {
|
scale = Math.round(scale / 1000000) + "M";
|
} else {
|
scale = Math.round(scale);
|
}
|
document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
|
});
|
map.getView().fit(bounds, map.getSize());
|
map.on('singleclick', function (evt) {
|
document.getElementById('nodelist').innerHTML = "Loading... please wait...";
|
var view = map.getView();
|
var viewResolution = view.getResolution();
|
var source = untiled.get('visible') ? untiled.getSource() : tiled.getSource();
|
var url = source.getGetFeatureInfoUrl(
|
evt.coordinate, viewResolution, view.getProjection(),
|
{ 'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50 });
|
if (url) {
|
document.getElementById('nodelist').innerHTML = '<iframe seamless src="' + url + '"></iframe>';
|
}
|
});
|
|
// sets the chosen WMS version
|
function setWMSVersion(wmsVersion) {
|
map.getLayers().forEach(function (lyr) {
|
lyr.getSource().updateParams({ 'VERSION': wmsVersion });
|
});
|
if (wmsVersion == "1.3.0") {
|
origin = bounds[1] + ',' + bounds[0];
|
} else {
|
origin = bounds[0] + ',' + bounds[1];
|
}
|
tiled.getSource().updateParams({ 'tilesOrigin': origin });
|
}
|
|
// Tiling mode, can be 'tiled' or 'untiled'
|
function setTileMode(tilingMode) {
|
if (tilingMode == 'tiled') {
|
untiled.set('visible', false);
|
tiled.set('visible', true);
|
} else {
|
tiled.set('visible', false);
|
untiled.set('visible', true);
|
}
|
}
|
|
function setAntialiasMode(mode) {
|
map.getLayers().forEach(function (lyr) {
|
lyr.getSource().updateParams({ 'FORMAT_OPTIONS': 'antialias:' + mode });
|
});
|
}
|
|
// changes the current tile format
|
function setImageFormat(mime) {
|
map.getLayers().forEach(function (lyr) {
|
lyr.getSource().updateParams({ 'FORMAT': mime });
|
});
|
}
|
|
function setStyle(style) {
|
map.getLayers().forEach(function (lyr) {
|
lyr.getSource().updateParams({ 'STYLES': style });
|
});
|
}
|
|
function setWidth(size) {
|
var mapDiv = document.getElementById('map');
|
var wrapper = document.getElementById('wrapper');
|
|
if (size == "auto") {
|
// reset back to the default value
|
mapDiv.style.width = null;
|
wrapper.style.width = null;
|
}
|
else {
|
mapDiv.style.width = size + "px";
|
wrapper.style.width = size + "px";
|
}
|
// notify OL that we changed the size of the map div
|
map.updateSize();
|
}
|
|
function setHeight(size) {
|
var mapDiv = document.getElementById('map');
|
if (size == "auto") {
|
// reset back to the default value
|
mapDiv.style.height = null;
|
}
|
else {
|
mapDiv.style.height = size + "px";
|
}
|
// notify OL that we changed the size of the map div
|
map.updateSize();
|
}
|
|
function updateFilter() {
|
if (!supportsFiltering) {
|
return;
|
}
|
var filterType = document.getElementById('filterType').value;
|
var filter = document.getElementById('filter').value;
|
var formPrams = getFormParams();
|
// by default, reset all filters
|
var filterParams = {
|
'FILTER': null,
|
'CQL_FILTER': null,
|
'FEATUREID': null,
|
"LAYERS": 'konglu_58:vis_roadsection_' + formPrams.querytype_,
|
"viewparams": 'userid:2;regiontype:1005;datetime:' + formPrams.datatime_+';querytype:'+formPrams.querytype_,
|
};
|
if (filter.replace(/^\s\s*/, '').replace(/\s\s*$/, '') != "") {
|
if (filterType == "cql") {
|
filterParams["CQL_FILTER"] = filter;
|
}
|
if (filterType == "ogc") {
|
filterParams["FILTER"] = filter;
|
}
|
if (filterType == "fid")
|
filterParams["FEATUREID"] = filter;
|
}
|
// merge the new filter definitions
|
map.getLayers().forEach(function (lyr) {
|
lyr.getSource().updateParams(filterParams);
|
});
|
}
|
|
function resetFilter() {
|
if (!supportsFiltering) {
|
return;
|
}
|
document.getElementById('filter').value = "";
|
updateFilter();
|
}
|
|
// shows/hide the control panel
|
function toggleControlPanel() {
|
var toolbar = document.getElementById("toolbar");
|
if (toolbar.style.display == "none") {
|
toolbar.style.display = "block";
|
}
|
else {
|
toolbar.style.display = "none";
|
}
|
map.updateSize()
|
}
|
|
function getFormParams() {
|
var datatime_, querytype_;
|
if ($("#appDateHour")[0].style.display == 'none') {
|
datatime_ = $("#appDate").val();
|
querytype_ = 'day';
|
datatime_ = datatime_.replace(/\:/g,"").replace(/-/g,"").replace(/\s+/g,"");
|
} else {
|
datatime_ = $("#appDateHour").val();
|
querytype_ = 'hour';
|
datatime_ = datatime_.replace(/\:/g,"").replace(/-/g,"").replace(/\s+/g,"");
|
}
|
return {"datatime_":datatime_,"querytype_":querytype_} ;
|
}
|
|
function changetime() {
|
var datatime_, querytype_;
|
if ($("#appDateHour")[0].style.display == 'none') {
|
datatime_ = $("#appDate").val();
|
querytype_ = 'day';
|
datatime_ = datatime_.replace(/\:/g,"").replace(/-/g,"").replace(/\s+/g,"");
|
//调用刷新地图
|
} else {
|
datatime_ = $("#appDateHour").val();
|
querytype_ = 'hour';
|
datatime_ = datatime_.replace(/\:/g,"").replace(/-/g,"").replace(/\s+/g,"");
|
//调用刷新地图
|
}
|
updateFilter();
|
}
|
|
</script>
|
</div>
|
</div>
|
<!--道路展示 结束-->
|
</body>
|
|
</html>
|