-
Notifications
You must be signed in to change notification settings - Fork 7
/
random.html
64 lines (59 loc) · 1.87 KB
/
random.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
<!DOCTYPE html>
<html>
<head>
<title>maptalks.GridLayer demo</title>
<script src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
<script src="../dist/maptalks.gridlayer.js"></script>
<script src="metrics.js"></script>
<script src="colors.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@>=0.35.1/dist/maptalks.css">
<style>
#map { width: 960px; height: 600px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new maptalks.Map("map",{
center: [175.46873, -37.90258],
zoom: 16,
hitDetect : false,
attributionControl : {
'content' : '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
},
baseLayer : new maptalks.TileLayer("tile",{
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains : ['a','b','c','d']
})
});
var data = [];
for (var i = -150; i < 150; i++ ){
for (var ii = -150; ii < 150; ii++) {
data.push([i, ii, { symbol: getSymbol(i, ii)}]);
}
}
var grid = new maptalks.GridLayer('grid',{
projection : true,
center : map.getCenter(),
width : 100,
height : 100,
data : data
})
.addTo(map);
var r = new maptalks.VectorLayer('r').addTo(map);
map.on('click', function(e) {
r.clear().addGeometry(grid.identify(e.coordinate).geometry);
})
function getSymbol(col, row) {
var len = colors.length;
var color = colors[Math.round(Math.random() * (len - 1))];
return symbol = {
lineColor : '#000',
lineOpacity : 1,
polygonFill : 'rgb(' + color.join() + ')',
polygonOpacity : 0.4
};
}
</script>
</body>
</html>