-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
116 lines (111 loc) · 3.57 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>Wind Animation Demo</title>
<link rel="stylesheet" href="./lib/ol/ol.css" />
<link rel="stylesheet" href="./core/sknight_gis.css" />
</head>
<body>
<div id="map" class="map"></div>
<!--[if lte IE 9]>
<script src="./polyfill/classList.min.js"></script>
<script src="./polyfill/request-animation-frame.js"></script>
<![endif]-->
<script src="./lib/utility/jquery.min.js"></script>
<script src="./lib/utility/template-web.js"></script>
<script src="./lib/ol/ol.js"></script>
<script src="./lib/topojson/topojson.min.js"></script>
<script src="./lib/when/when.js"></script>
<script src="./lib/d3-v3/d3.min.js"></script>
<script src="./core/mvi.js"></script>
<script src="./components/wind/wind-d3.v3.js"></script>
<script src="./core/sknight_gis.js"></script>
<script>
$(function () {
var width = $(window).width();
var height = $(window).height();
$("#map").css({
width: width,
height: height - 80
});
var gisOptions = {
target: document.getElementById("map"),
layers: {
baseMap: [{
label: '基础底图',
// url: 'https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
url:"https://api.mapbox.com/styles/v1/sknight/cizrszca000pb2rpdgsdk6zt5/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2tuaWdodCIsImEiOiJjaXg3YWU4ZXMwMTc2MnhxeWljanJnZGNxIn0.pozkMI1zmVRRsfEJglAsmg",
// url:"https://api.mapbox.com/styles/v1/sknight/ckiy7ex1i4gd519mqf9gc1fal/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2tuaWdodCIsImEiOiJjaXg3YWU4ZXMwMTc2MnhxeWljanJnZGNxIn0.pozkMI1zmVRRsfEJglAsmg",
layerName: 'basic',
},
{
label: '混合底图',
url: 'https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}',
layerName: 'street',
}, {
label: '卫星底图',
url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
layerName: 'satellite',
}],
boundary: {
enable: false,
items: [
{
name: "boundary",
url: "./data/boundary-nb.json"
}
]
}
},
view: {
center: [121.5472412109375, 29.870419710858783],
zoom: 8
//minZoom: 9,
//maxZoom: 13
},
controls: {
// 全屏功能
fullScreen: {
enable: true
},
// 鹰眼功能
overviewMap: {
enable: true
},
//回归中心点
setCenter: {
enable: true
}
},
tools: {
title: false, // 标题
popup: true, // 弹出框
draw: false,
switchBaseMap: true, // 底图切换
mousePosition: true
}
// extent: {
// bound: [
// [121.208840, 29.755223],
// [122.018881, 30.302205]
// ]
// }
};
var map = sntMap(gisOptions);
map.once("postrender", function () {
var canvasFunctions = wind.init(
"./data/air/ningbo.topo.json",
"./data/air/current-ningbo.json",
"./data/air/stations-ningbo.json",
map
);
map.d3Layer(canvasFunctions.particle);
map.d3Layer(canvasFunctions.contour);
});
});
</script>
</body>
</html>