Skip to content

Commit 6bbbb0e

Browse files
fuzhennfuzhenn
authored
Merge pull request huiyan-fe#1 from liubgithub/maptalks
Add maptalks's examples with mapv
2 parents 9eb4f56 + f8855c2 commit 6bbbb0e

17 files changed

Lines changed: 26284 additions & 600 deletions

‎examples/data/wuhan-car‎

Lines changed: 0 additions & 600 deletions
This file was deleted.

‎examples/maptalks/maptalks-map-point-heatmap.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>maptalks example</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.css" />-->
9+
<link href="../threeParts/maptalks.css" rel="stylesheet" />
10+
<style>
11+
html, body, #map {
12+
height: 100%;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="map"></div>
20+
21+
<!--<script src="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.js"></script>-->
22+
<script src="../threeParts/maptalks.js"></script>
23+
<script src="../../build/mapv.js"></script>
24+
<script>
25+
26+
var map = new maptalks.Map('map', {
27+
center: [-102.17609405517578, 34.41583177128595],
28+
zoom: 4,
29+
attribution: {
30+
content: '&copy; Google Maps'
31+
},
32+
baseLayer: new maptalks.TileLayer('base', {
33+
'urlTemplate' : 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
34+
'subdomains' : ['a','b','c','d','e']
35+
})
36+
});
37+
38+
var randomCount = 500;
39+
var data = [];
40+
while (randomCount--) {
41+
data.push({
42+
geometry: {
43+
type: 'Point',
44+
coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
45+
},
46+
count: 30 * Math.random()
47+
});
48+
}
49+
50+
var dataSet = new mapv.DataSet(data);
51+
52+
var options = {
53+
max: 30, // 设置显示的权重最大值
54+
type: 'circle', // 点形状,可选circle:圆形(默认),rect:矩形
55+
size:10, // 半径大小
56+
maxOpacity: 0.9,
57+
gradient: { // 显示的颜色渐变范围
58+
'0': 'blue',
59+
'0.6': 'cyan',
60+
'0.7': 'lime',
61+
'0.8': 'yellow',
62+
'1.0': 'red'
63+
},
64+
draw: 'heatmap'
65+
}
66+
67+
var mapvLayer = new mapv.MaptalksLayer('mapv', dataSet, options).addTo(map);
68+
69+
</script>
70+
</body>
71+
</html>

‎examples/maptalks/maptalks-point-bubble.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>maptalks example</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.css" />-->
9+
<link href="../threeParts/maptalks.css" rel="stylesheet" />
10+
<style>
11+
html, body, #map {
12+
height: 100%;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="map"></div>
20+
21+
<!--<script src="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.js"></script>-->
22+
<script src="../threeParts/maptalks.js"></script>
23+
<script src="../../build/mapv.js"></script>
24+
<script>
25+
26+
var map = new maptalks.Map('map', {
27+
center: [-102.17609405517578, 34.41583177128595],
28+
zoom: 4,
29+
attribution: {
30+
content: '&copy; Google Maps'
31+
},
32+
baseLayer: new maptalks.TileLayer('base', {
33+
'urlTemplate' : 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
34+
'subdomains' : ['a','b','c','d','e']
35+
})
36+
});
37+
38+
var randomCount = 300;
39+
var data = [];
40+
while (randomCount--) {
41+
data.push({
42+
geometry: {
43+
type: 'Point',
44+
coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
45+
},
46+
count: 30 * Math.random()
47+
});
48+
}
49+
50+
var dataSet = new mapv.DataSet(data);
51+
52+
var options = {
53+
fillStyle: 'rgba(255, 250, 50, 0.8)',
54+
globalCompositeOperation: "lighter",
55+
maxSize: 10,
56+
max: 30,
57+
shadowBlur: 30,
58+
shadowColor: 'rgba(255, 250, 50, 1)',
59+
draw: 'bubble'
60+
}
61+
62+
var mapvLayer = new mapv.MaptalksLayer('mapv', dataSet, options).addTo(map);
63+
64+
</script>
65+
</body>
66+
</html>

‎examples/maptalks/maptalks-point-category.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>maptalks example</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.css" />-->
9+
<link href="../threeParts/maptalks.css" rel="stylesheet" />
10+
<style>
11+
html, body, #map {
12+
height: 100%;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="map"></div>
20+
21+
<!--<script src="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.js"></script>-->
22+
<script src="../threeParts/maptalks.js"></script>
23+
<script src="../../build/mapv.js"></script>
24+
<script>
25+
26+
var map = new maptalks.Map('map', {
27+
center: [-102.17609405517578, 34.41583177128595],
28+
zoom: 4,
29+
attribution: {
30+
content: '&copy; Google Maps'
31+
},
32+
baseLayer: new maptalks.TileLayer('base', {
33+
'urlTemplate' : 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
34+
'subdomains' : ['a','b','c','d','e']
35+
})
36+
});
37+
38+
var randomCount = 300;
39+
var data = [];
40+
while (randomCount--) {
41+
data.push({
42+
geometry: {
43+
type: 'Point',
44+
coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
45+
},
46+
count: parseInt(4 * Math.random())
47+
});
48+
}
49+
50+
var dataSet = new mapv.DataSet(data);
51+
52+
var options = {
53+
splitList: {
54+
other: 'white',
55+
1: 'blue',
56+
2: 'yellow',
57+
3: 'red'
58+
},
59+
size: 2,
60+
max: 30,
61+
draw: 'category'
62+
}
63+
64+
var mapvLayer = new mapv.MaptalksLayer('mapv', dataSet, options).addTo(map);
65+
66+
</script>
67+
</body>
68+
</html>

‎examples/maptalks/maptalks-point-cluster.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>maptalks example</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.css" />-->
9+
<link href="../threeParts/maptalks.css" rel="stylesheet" />
10+
<style>
11+
html, body, #map {
12+
height: 100%;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="map"></div>
20+
21+
<!--<script src="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.js"></script>-->
22+
<script src="../threeParts/maptalks.js"></script>
23+
<script src="../../build/mapv.js"></script>
24+
<script>
25+
26+
var map = new maptalks.Map('map', {
27+
center: [-102.17609405517578, 34.41583177128595],
28+
zoom: 4,
29+
attribution: {
30+
content: '&copy; Google Maps'
31+
},
32+
baseLayer: new maptalks.TileLayer('base', {
33+
'urlTemplate' : 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
34+
'subdomains' : ['a','b','c','d','e']
35+
})
36+
});
37+
38+
var randomCount = 300;
39+
var data = [];
40+
while (randomCount--) {
41+
data.push({
42+
geometry: {
43+
type: 'Point',
44+
coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
45+
},
46+
count: 30 * Math.random()
47+
});
48+
}
49+
50+
var dataSet = new mapv.DataSet(data);
51+
52+
var options = {
53+
fillStyle: '#fa8b2e', // 填充颜色
54+
strokeStyle: '#fff', // 边框颜色
55+
label: { // 是否显示文字标签
56+
show: true,
57+
},
58+
draw: 'cluster'
59+
}
60+
61+
var mapvLayer = new mapv.MaptalksLayer('mapv', dataSet, options).addTo(map);
62+
63+
</script>
64+
</body>
65+
</html>

‎examples/maptalks/maptalks-point-colorpleth.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>maptalks example</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.css" />-->
9+
<link href="../threeParts/maptalks.css" rel="stylesheet" />
10+
<style>
11+
html, body, #map {
12+
height: 100%;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="map"></div>
20+
21+
<!--<script src="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.js"></script>-->
22+
<script src="../threeParts/maptalks.js"></script>
23+
<script src="../../build/mapv.js"></script>
24+
<script>
25+
26+
var map = new maptalks.Map('map', {
27+
center: [-102.17609405517578, 34.41583177128595],
28+
zoom: 4,
29+
attribution: {
30+
content: '&copy; Google Maps'
31+
},
32+
baseLayer: new maptalks.TileLayer('base', {
33+
'urlTemplate' : 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
34+
'subdomains' : ['a','b','c','d','e']
35+
})
36+
});
37+
38+
var randomCount = 300;
39+
var data = [];
40+
while (randomCount--) {
41+
data.push({
42+
geometry: {
43+
type: 'Point',
44+
coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
45+
},
46+
count: parseInt(8 * Math.random())
47+
});
48+
}
49+
50+
var dataSet = new mapv.DataSet(data);
51+
52+
var options = {
53+
size:5,
54+
splitList: [
55+
{
56+
start: 0,
57+
end: 2,
58+
value: 'red'
59+
}, {
60+
start: 2,
61+
end: 4,
62+
value: 'yellow'
63+
}, {
64+
start: 4,
65+
value: 'blue'
66+
}
67+
],
68+
max: 30,
69+
draw: 'choropleth'
70+
}
71+
72+
var mapvLayer = new mapv.MaptalksLayer('mapv', dataSet, options).addTo(map);
73+
74+
</script>
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)