forked from SuperMap/iClient-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmapVLayerPoint.html
More file actions
106 lines (92 loc) · 3.35 KB
/
mapVLayerPoint.html
File metadata and controls
106 lines (92 loc) · 3.35 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapV 出租车上车点</title>
<script type="text/javascript" include="jquery,dat-gui" src="../js/include-web.js"></script>
<style type="text/css">
#loading {
position: absolute;
top: 50%;
left: 50%;
z-index: 800;
margin-left: -130px;
text-align: center;
margin-top: -50px;
width: 290px;
padding: 10px;
background: rgba(0, 0, 0, 0.5);
color: whitesmoke;
font-size: 16px;
}
</style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<div id="loading">纽约出租车145万上车点数据加载中...</div>
<script type="text/javascript" include="mapv" src="../../dist/include-leaflet.js"></script>
<script type="text/javascript">
var map = L.map('map', {
center: [40.73231, -73.90086],
zoom: 11,
});
var attr = 'Map Data © <a href="https://www.supermapol.com/" target="_blank"> SuperMap Online</a>',
url = 'https://www.supermapol.com/iserver/services/map_China/rest/maps/China_Light';
L.supermap.tiledMapLayer(url, {attribution: attr}).addTo(map);
loadData();
function loadData() {
$.get('../data/nyc-taxi.csv', function (csvstr) {
var options = {
size: 1.5,
context: 'webgl',
fillStyle: 'rgba(238, 68, 68, 0.8)',
draw: 'simple'
};
var dataSet = mapv.csv.getDataSet(csvstr);
dataSet.initGeometry();
var dataAttr = "数据来源<a target='_blank' href='http://www.nyc.gov/html/tlc/html/about/trip_record_data.shtml'>NYC Taxi</a>,";
var layer = L.supermap.mapVLayer(dataSet, options, {attributionPrefix: dataAttr});
layer.on('loaded', function () {
$('#loading').hide();
initDatGUI(layer, options)
});
layer.addTo(map);
});
//设置菜单
function initDatGUI(layer, options) {
var gui = new dat.GUI();
var configDiv = L.DomUtil.create('div');
configDiv.appendChild(gui.domElement);
gui.add(options, 'size', 0.1, 10).onFinishChange(finished);
gui.addColor(options, 'fillStyle').onChange(finished);
function finished() {
layer.update({
options: options
});
}
var configControl = L.control({position: 'topright'});
configControl.onAdd = function () {
return configDiv;
};
configControl.addTo(map);
handleMapEvent(configDiv, map);
}
}
function handleMapEvent(div, map) {
if (!div || !map) {
return;
}
div.addEventListener('mouseover', function () {
map.dragging.disable();
map.scrollWheelZoom.disable();
map.doubleClickZoom.disable();
});
div.addEventListener('mouseout', function () {
map.dragging.enable();
map.scrollWheelZoom.enable();
map.doubleClickZoom.enable();
});
}
</script>
</body>
</html>