forked from lvisei/leaflet-demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo1.html
130 lines (123 loc) · 5.36 KB
/
demo1.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>leaflet底图加载（底图类型、切换）</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./lib/Flat-UI-master/dist/css/vendor/bootstrap/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./lib/Flat-UI-master/dist/css/flat-ui.min.css">
<link rel="stylesheet" href="./lib/leaflet/leaflet.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-embossed" role="navigation" style="margin-bottom: 0; border-radius: 0; z-index:2">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="#">Flat UI</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-01">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#fakelink">Menu Item
<span class="navbar-unread">1</span>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Messages
<b class="caret"></b>
</a>
<span class="dropdown-arrow"></span>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
<li>
<a href="#fakelink">About Us</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">leafelt不同底图加载方式
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a id="mapbox_Image" href='JavaScript:void(0)' onclick='setLayer("mapbox_Image")'>leafleat加载彩色影像世界地图</a>
</li>
<li>
<a id="mapbox_Vector" href='JavaScript:void(0)' onclick='setLayer("mapbox_Vector")'>leafleat加载彩色矢量世界地图</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" action="#" role="search">
<div class="form-group">
<div class="input-group">
<input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn">
<span class="fui-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" id="mapDiv" style="position: absolute;top: 53px;bottom: 0;z-index:1"></div>
<!-- 地图面板 -->
<!--底部状态栏部分 -->
</div>
</div>
</body>
<script src="./lib/Flat-UI-master/dist/js/vendor/jquery.min.js"></script>
<script src="./lib/Flat-UI-master/dist/js/flat-ui.js"></script>
<script src="./lib/leaflet/leaflet.js"></script>
<script src="./js/urlTemplate.js"></script>
<script>
const map = L.map("mapDiv", {
crs: L.CRS.EPSG3857, //要使用的坐标参考系统，默认的坐标参考系，互联网地图主流坐标系
// crs: L.CRS.EPSG4326, //WGS 84坐标系，GPS默认坐标系
zoomControl: true,
// minZoom: 1,
attributionControl: false,
}).setView([31.6268660000, 104.1528940000], 18);//定位在成都北纬N30°37′45.58″ 东经E104°09′1.44″
let Baselayer = L.tileLayer(urlTemplate.mapbox_Image, {
maxZoom: 17, //最大视图
minZoom: 2, //最小视图
attribution: '[email protected] © <a href="https://github.com/liuvigongzuoshi/WebGIS-for-learnning/tree/master/Leaflet_Demo">WebGIS-for-learnning</a>'
}).addTo(map);
console.log(Baselayer)
const setLayer = (ele) => {
map.removeLayer(Baselayer)
if (ele == "mapbox_Image") {
Baselayer = L.tileLayer(urlTemplate.mapbox_Image, {
maxZoom: 17,
minZoom: 2
}).addTo(map);
} else if (ele == "mapbox_Vector") {
Baselayer = L.tileLayer(urlTemplate.mapbox_Vector, {
maxZoom: 17,
minZoom: 1
}).addTo(map);
console.log(Baselayer)
}
}
</script>
</html>