forked from QingyaFan/data-visualization
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
60 lines (60 loc) · 2.15 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/main.css">
<style>
.index-wrapper {
position: absolute;
width: 240px;
height: 210px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 9;
}
</style>
<script src="./js/ol.js"></script>
</head>
<body>
<div id="map">
<div class="index-wrapper">
<div><a href="./mapserver-wms-railways.html">Mapserver WMS（铁路）</a></div>
<div><a href="./mapserver-wms-roads.html">Mapserver WMS（高速）</a></div>
<div><a href="./got-map.html">权利的游戏-静态图片地图</a></div>
<div><a href="./point-cluster.html">全球地震点聚集</a></div>
<div><a href="./measure-distance-area.html">绘制&测量距离和面积</a></div>
<div><a href="./drag-zoom.html">拉框缩放</a></div>
<div><a href="./contextmenu.html">地图右键菜单</a></div>
<div><a href="./car-move-ol.html">车辆沿轨迹移动</a></div>
<div><a href="./layer-switcher.html">图层切换</a></div>
<div><a href="./ol3-graticule.html">经纬网格</a></div>
<div><a href="./point-animation-overlay.html">点要素动画</a></div>
<div><a href="./vector.html">矢量图层</a></div>
<div><a href="./vectortiles.html">矢量切片</a></div>
</div>
</div>
<script>
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.TileImage({
url: 'http://mt1.google.com/vt/lyrs=m@113&hl=en&&x={x}&y={y}&z={z}'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-20, -14]),
zoom: 4
})
})
</script>
</body>
</html>