forked from SuperMap/iClient-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathd3HexbinLayer.html
More file actions
92 lines (91 loc) · 3.97 KB
/
d3HexbinLayer.html
File metadata and controls
92 lines (91 loc) · 3.97 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
<!--********************************************************************
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_d3HexbinLayer"></title>
<script type="text/javascript" include="jquery,randomcolor" src="../js/include-web.js"></script>
<script type="text/javascript" include="d3,d3-hexbin,d3Layer" src="../../dist/leaflet/include-leaflet.js"></script>
</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>
<script type="text/javascript">
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
var map, resultLayer, randomColors = [], notfirst = false,
baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
url = host + "/iserver/services/data-jingjin/rest/data";
map = L.map('map', {
preferCanvas: true,
crs: L.CRS.EPSG4326,
center: [39.79, 116.85],
maxZoom: 18,
zoom: 7
});
L.supermap.tiledMapLayer(baseUrl).addTo(map);
query();
function query() {
var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
queryParameter: {
name: "Jingjin",
attributeFilter: "SMID >= -1"
},
datasetNames: ["Jingjin:Town_P"],
fromIndex: 0,
toIndex: 600
});
L.supermap.featureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
var points = [];
serviceResult.result.features.features.map(function (feature) {
var point = map.latLngToLayerPoint(L.latLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]));
points.push([point.x, point.y, feature.properties.NAME]);
});
var d3Layer = L.supermap.d3Layer(function (sel, proj, level) {
if (!notfirst) {
notfirst = true;
} else {
return;
}
var svg = sel;
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = +map.getSize().x - margin.left - margin.right,
height = +map.getSize().y - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var hexbin = d3.hexbin()
.radius(30)
.extent([[0, 0], [width, height]]);
g.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
if (randomColors.length === 0) {
randomColors = randomColor({
luminosity: 'bright',
hue: 'random',
alpha: 0.6,
format: 'rgba',
count: hexbin.hexagon().length
});
}
g.append("g")
.attr("class", "hexagon")
.attr("clip-path", "url(#clip)")
.selectAll("path")
.data(hexbin(points))
.enter().append("path")
.attr("d", hexbin.hexagon())
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
})
.attr("fill", function (d, index) {
return randomColors[index];
});
});
d3Layer.addTo(map);
});
}
</script>
</body>
</html>