-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathoverview.html
More file actions
141 lines (122 loc) · 5.43 KB
/
overview.html
File metadata and controls
141 lines (122 loc) · 5.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<title>写字楼时空数据展示</title>
<!-- Loading Bootstrap -->
<link href="Flat-UI-master/dist/css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="Flat-UI-master/dist/css/flat-ui.css" rel="stylesheet">
<link rel="shortcut icon" href="Flat-UI-master/dist/img/favicon.ico">
<link rel="stylesheet" href="leaflet/awesome-markers/leaflet.awesome-markers.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- 加载leaflet-->
<link rel="stylesheet" href="leaflet/leaflet.css"/>
<script src="leaflet/leaflet.js"></script>
<script src="leaflet/leaflet.ChineseTmsProviders.js"></script>
<script src="esri/esri-leaflet.js"></script>
<script src="leaflet/awesome-markers/leaflet.awesome-markers.js"></script>
<script src="coorTransform.js"></script>
<script src="searchPOI.js"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=Xs3ww5WyUnGwLuKtoPxOb33kQhjI9z6D"></script>
<link href="map.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<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>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">预览</a></li>
<li><a href="index.html">主页</a></li>
<li><a href="statistics.html">统计分析</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">地图<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="heatmap.html">热力图</a></li>
<li><a href="clustering.html">聚合图</a></li>
</ul>
</li>
<li><a href="models.html">模型分析</a></li>
</ul>
<!--<form class="navbar-form navbar-right">-->
<!--<div class="form-group">-->
<!--<input type="text" placeholder="Email" class="form-control">-->
<!--</div>-->
<!--<div class="form-group">-->
<!--<input type="password" placeholder="Password" class="form-control">-->
<!--</div>-->
<!--<button type="submit" class="btn btn-success">Sign in</button>-->
<!--</form>-->
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h3>上海市写字楼时空数据展示</h3>
<p>基于Arcgis的上海写字楼信息展示。 </p>
<p>数据来源：对房屋租售信息网站安居客的上海写字楼页面进行定期爬取和更新。 </p>
<p><a class="btn btn-primary btn-lg" href="http://10.60.45.22:9999/excel" role="button">导出EXCEL数据</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="mapView" id="mapDiv">
</div>
</div>
</div>
<footer>
<p>© Leppard</p>
</footer>
</div>
<!-- /container -->
<script src="Flat-UI-master/dist/js/vendor/jquery.min.js"></script>
<script>
var centerPoint = [31.23, 121.40];
var baseLayer = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
maxZoom: 18,
minZoom: 8
});
var buildingLayer = L.esri.featureLayer({
url: 'http://10.60.45.22:6080/arcgis/rest/services/ShanghaiOfficeBuilding/MapServer/0'
});
// buildingLayer.addTo(map);
buildingLayer.bindPopup(function (layer) {
return L.Util.template('<p><b>{name}</b></p><p class="mypopup">{address}<br>日租金: {rent}<br>物业费: {property_fee}<br>类别: {type}<br>总楼层: {floors}层<br>建成时间: {buil_time}<br> </p>', layer.feature.properties);
});
var map = L.map("mapDiv", {
center: centerPoint,
zoom: 10,
layers: [baseLayer, buildingLayer]
});
var baseMaps = {
"上海市写字楼": buildingLayer
};
//初始化使计算Map控件大小
document.getElementById("mapDiv").style.height = document.documentElement.clientHeight - 120 + "px";
//当网页变化是重新计算地图控件的大小
window.onresize = function () {
document.getElementById("mapDiv").style.height = document.documentElement.clientHeight - 120 + "px";
}
</script>
<script src="Flat-UI-master/dist/js/flat-ui.min.js"></script>
</body>
</html>