-
Notifications
You must be signed in to change notification settings - Fork 70
/
demo1.1.html
143 lines (135 loc) · 5.41 KB
/
demo1.1.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
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>基于Demo 1 利用H5 Geolocation API 定位到当前位置</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" />
<link rel="stylesheet" href="./lib/leaflet.marker.highlight/leaflet.marker.highlight.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 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 src="./lib/leaflet.marker.highlight/leaflet.marker.highlight.js"></script>
<script>
const h5ApiSuccess = (position) => {
const latitude = position.coords.latitude; //纬度
const longitude = position.coords.longitude; //经度
console.log('你的经度纬度分别为' + longitude + ',' + latitude + '。');
return mapInit([latitude, longitude]);
};
const h5ApiError = () => {
console.log('/* 地理位置请求失败 */');
mapInit([31.626866, 104.152894]); //指定一个数据 定位在成都北纬N30°37′45.58″ 东经E104°09′1.44″
};
const mapInit = (LatLng) => {
map = L.map('mapDiv', {
crs: L.CRS.EPSG3857, //要使用的坐标参考系统，默认的坐标参考系，互联网地图主流坐标系
// crs: L.CRS.EPSG4326, //WGS 84坐标系，GPS默认坐标系
zoomControl: true,
// minZoom: 1,
attributionControl: true,
}).setView(LatLng, 18); //定位在当前位置
Baselayer = L.tileLayer(urlTemplate.mapbox_Image, {
maxZoom: 17, //最大视图
minZoom: 2, //最小视图
attribution:
'liuvigongzuoshi@foxmail.com © <a href="https://github.com/liuvigongzuoshi/leaflet-demo">leaflet-demo</a>',
}).addTo(map);
L.marker(LatLng, {
highlight: 'permanent', //永久高亮显示
}).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);
}
};
let map;
let Baselayer;
// 使用H5 API定位 定位在当前位置
if (navigator.geolocation) {
console.log('/* 地理位置服务可用 */');
navigator.geolocation.getCurrentPosition(h5ApiSuccess, h5ApiError);
} else {
console.log('/* 地理位置服务不可用 */');
mapInit([30.626866, 104.152894]); //指定一个数据 定位在成都北纬N30°37′45.58″ 东经E104°09′1.44″
}
</script>
</html>