Skip to content

Commit e56e78b

Browse files
author
caoxinke@supermap.com
committed
添加Leaflet对接D3.js的示例。
1 parent 41132bf commit e56e78b

File tree

8 files changed

+362
-0
lines changed

8 files changed

+362
-0
lines changed

‎dist/include-leaflet.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,15 @@
4848
if (inArray(includes, 'echarts')) {
4949
inputScript("http://cdn.bootcss.com/echarts/3.6.2/echarts.min.js");
5050
}
51+
if (inArray(includes, 'd3')) {
52+
inputScript("https://cdn.bootcss.com/d3/4.10.2/d3.min.js");
53+
}
54+
if (inArray(includes, 'd3-hexbin')) {
55+
inputScript("https://d3js.org/d3-hexbin.v0.2.min.js");
56+
}
57+
if (inArray(includes, 'd3Layer')) {
58+
inputScript("http://iclient.supermapol.com/libs/leaflet/plugins/leaflet.d3Layer/leaflet-d3Layer.min.js");
59+
}
5160
if (inArray(includes, 'elasticsearch')) {
5261
inputScript("http://cdn.bootcss.com/elasticsearch/13.0.1/elasticsearch.min.js");
5362
}

‎examples/leaflet/config.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -527,6 +527,22 @@ var exampleConfig = {
527527
fileName: "mapVLayerPolygonBuildings"
528528
}]
529529
},
530+
"D3": {
531+
name: "D3",
532+
content: [{
533+
name: "单值专题图",
534+
thumbnail: "l_d3UniqueThemeLayer.png",
535+
fileName: "d3UniqueThemeLayer"
536+
}, {
537+
name: "分段专题图",
538+
thumbnail: "l_d3RangeThemeLayer.png",
539+
fileName: "d3RangeThemeLayer"
540+
}, {
541+
name: "蜂巢图",
542+
thumbnail: "l_d3HexbinLayer.png",
543+
fileName: "d3HexbinLayer"
544+
}]
545+
},
530546
"extrusion": {
531547
name: "OSMBuildings",
532548
content: [{

‎examples/leaflet/d3HexbinLayer.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>D3蜂巢图</title>
6+
<script type="text/javascript" include="jquery,randomcolor" src="../js/include-web.js"></script>
7+
<script type="text/javascript" include="d3,d3-hexbin,d3Layer" src="../../dist/include-leaflet.js"></script>
8+
</head>
9+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
10+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
11+
<script type="text/javascript">
12+
var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
13+
var map, resultLayer, randomColors = [], notfirst = false,
14+
baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
15+
url = host + "/iserver/services/data-jingjin/rest/data";
16+
map = L.map('map', {
17+
preferCanvas: true,
18+
crs: L.CRS.EPSG4326,
19+
center: [39.79, 116.85],
20+
maxZoom: 18,
21+
zoom: 7
22+
});
23+
L.supermap.tiledMapLayer(baseUrl).addTo(map);
24+
query();
25+
26+
function query() {
27+
var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
28+
queryParameter: {
29+
name: "Jingjin",
30+
attributeFilter: "SMID >= -1"
31+
},
32+
datasetNames: ["Jingjin:Town_P"],
33+
fromIndex: 0,
34+
toIndex: 600
35+
});
36+
L.supermap.featureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
37+
var points = [];
38+
serviceResult.result.features.features.map(function (feature) {
39+
var point = map.latLngToLayerPoint(L.latLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]));
40+
points.push([point.x, point.y, feature.properties.NAME]);
41+
});
42+
var d3Layer = L.supermap.d3Layer(function (sel, proj, level) {
43+
if (!notfirst) {
44+
notfirst = true;
45+
} else {
46+
return;
47+
}
48+
var svg = sel;
49+
var margin = {top: 0, right: 0, bottom: 0, left: 0},
50+
width = +map.getSize().x - margin.left - margin.right,
51+
height = +map.getSize().y - margin.top - margin.bottom,
52+
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
53+
var hexbin = d3.hexbin()
54+
.radius(30)
55+
.extent([[0, 0], [width, height]]);
56+
g.append("clipPath")
57+
.attr("id", "clip")
58+
.append("rect")
59+
.attr("width", width)
60+
.attr("height", height);
61+
if (randomColors.length === 0) {
62+
randomColors = randomColor({
63+
luminosity: 'bright',
64+
hue: 'random',
65+
alpha: 0.6,
66+
format: 'rgba',
67+
count: hexbin.hexagon().length
68+
});
69+
}
70+
g.append("g")
71+
.attr("class", "hexagon")
72+
.attr("clip-path", "url(#clip)")
73+
.selectAll("path")
74+
.data(hexbin(points))
75+
.enter().append("path")
76+
.attr("d", hexbin.hexagon())
77+
.attr("transform", function (d) {
78+
return "translate(" + d.x + "," + d.y + ")";
79+
})
80+
.attr("fill", function (d, index) {
81+
return randomColors[index];
82+
});
83+
});
84+
d3Layer.addTo(map);
85+
});
86+
}
87+
</script>
88+
</body>
89+
</html>

‎examples/leaflet/d3RangeThemeLayer.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>D3分段专题图</title>
6+
<script type="text/javascript" include="jquery,bootstrap" src="../js/include-web.js"></script>
7+
<script type="text/javascript" include="d3,d3Layer" src="../../dist/include-leaflet.js"></script>
8+
<style type="text/css">
9+
.legendItemHeader,
10+
.legendItemValue {
11+
width: 120px;
12+
height: 18px;
13+
font-size: 14px;
14+
}
15+
</style>
16+
</head>
17+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
18+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
19+
<script type="text/javascript">
20+
var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
21+
var map, resultLayer,
22+
baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
23+
url = host + "/iserver/services/data-jingjin/rest/data";
24+
map = L.map('map', {
25+
preferCanvas: true,
26+
crs: L.CRS.EPSG4326,
27+
center: [39.79, 116.85],
28+
maxZoom: 18,
29+
zoom: 7
30+
});
31+
L.supermap.tiledMapLayer(baseUrl).addTo(map);
32+
query();
33+
34+
var rangeStyles = [{
35+
start: 0,
36+
end: 0.02,
37+
color: 'rgb(253,226,202)'
38+
}, {
39+
start: 0.02,
40+
end: 0.04,
41+
color: 'rgb(250,206,156)'
42+
}, {
43+
start: 0.04,
44+
end: 0.06,
45+
color: 'rgb(240,156,66)'
46+
}, {
47+
start: 0.06,
48+
end: 0.1,
49+
color: 'rgb(208,119,11)'
50+
}, {
51+
start: 0.1,
52+
end: 0.2,
53+
color: 'rgb(148,83,5)'
54+
}];
55+
56+
function query() {
57+
var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
58+
queryParameter: {
59+
name: "Jingjin",
60+
attributeFilter: "SMID >= -1"
61+
},
62+
datasetNames: ["Jingjin:BaseMap_R"],
63+
fromIndex: 0,
64+
toIndex: 200
65+
});
66+
L.supermap.featureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
67+
var d3Layer = L.supermap.d3Layer(function (sel, proj) {
68+
var upd = sel.selectAll('path').data(serviceResult.result.features.features);
69+
upd.enter()
70+
.append('path')
71+
.attr('d', proj.pathFromGeojson)
72+
.attr('fill', function (feature) {
73+
var pop = parseFloat(feature.properties.POP_DENSITY99);
74+
for (var i = 0; i < rangeStyles.length; i++) {
75+
var rangeStyle = rangeStyles[i];
76+
if (pop >= rangeStyle['start'] && pop <= rangeStyle['end']) {
77+
return rangeStyle['color'];
78+
}
79+
}
80+
})
81+
.attr('fill-opacity', '0.8')
82+
});
83+
d3Layer.addTo(map);
84+
initLegendView();
85+
});
86+
}
87+
88+
//图例控件
89+
function initLegendView() {
90+
var legendView = L.control({position: 'bottomright'});
91+
legendView.onAdd = function () {
92+
this._div = L.DomUtil.create('div', 'panel panel-primary legend ');
93+
var title = "<div class='panel-heading'><h5 class='panel-title text-center'>图例</h5></div>";
94+
$(title + "<div class='panel-body text-center' ><table>" +
95+
"<tr><td class='legendItemHeader'>人口密度(1999年)</td><td class='legendItemValue'>颜色</td></tr>" +
96+
"<tr> <td class='legendItemHeader'>0 - 0.02</td> <td class='legendItemValue' style='background: #FDE2CA'></td></tr>" +
97+
"<tr> <td class='legendItemHeader'>0.02 - 0.04</td> <td class='legendItemValue' style='background: #FACE9C'></td> </tr>" +
98+
"<tr> <td class='legendItemHeader'>0.04 - 0.06</td> <td class='legendItemValue' style='background: #F09C42'></td> </tr>" +
99+
"<tr> <td class='legendItemHeader'>0.06 - 0.1</td> <td class='legendItemValue' style='background: #D0770B'></td> </tr>" +
100+
"<tr> <td class='legendItemHeader'>0.1 - 0.2</td> <td class='legendItemValue' style='background: #945305'></td> </tr>" +
101+
"</table></div>"
102+
).appendTo(this._div);
103+
handleMapEvent(this._div, this._map);
104+
return this._div;
105+
};
106+
legendView.addTo(map);
107+
}
108+
109+
function handleMapEvent(div, map) {
110+
if (!div || !map) {
111+
return;
112+
}
113+
div.addEventListener('mouseover', function () {
114+
map.dragging.disable();
115+
map.scrollWheelZoom.disable();
116+
map.doubleClickZoom.disable();
117+
});
118+
div.addEventListener('mouseout', function () {
119+
map.dragging.enable();
120+
map.scrollWheelZoom.enable();
121+
map.doubleClickZoom.enable();
122+
});
123+
}
124+
</script>
125+
</body>
126+
</html>

‎examples/leaflet/d3UniqueThemeLayer.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>D3单值专题图</title>
6+
<script type="text/javascript" include="jquery,bootstrap" src="../js/include-web.js"></script>
7+
<script type="text/javascript" include="d3,d3Layer" src="../../dist/include-leaflet.js"></script>
8+
<style type="text/css">
9+
.legendItemHeader,
10+
.legendItemValue {
11+
width: 120px;
12+
height: 18px;
13+
font-size: 14px;
14+
}
15+
</style>
16+
</head>
17+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
18+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
19+
<script type="text/javascript">
20+
var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://117.122.248.69:8090";
21+
var map, resultLayer,
22+
baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
23+
url = host + "/iserver/services/data-jingjin/rest/data";
24+
map = L.map('map', {
25+
preferCanvas: true,
26+
crs: L.CRS.EPSG4326,
27+
center: [39.79, 116.85],
28+
maxZoom: 18,
29+
zoom: 7
30+
});
31+
L.supermap.tiledMapLayer(baseUrl).addTo(map);
32+
query();
33+
34+
var uniqueMap = {
35+
"草地": "rgb(193,255,193)",
36+
"城市": "rgb(205,112,84)",
37+
"灌丛": "rgb(124,205,124)",
38+
"旱地": "rgb(238,154,73)",
39+
"湖泊水库": "rgb(142,229,238)",
40+
"经济林": "rgb(222,184,135)",
41+
"水浇地": "rgb(224,255,255)",
42+
"水田": "rgb(56,142,142)",
43+
"用材林": "rgb(85,107,47)",
44+
"沼泽": "rgb(47,79,79)",
45+
"缺省风格": "rgb(171,171,171)"
46+
};
47+
48+
function query() {
49+
var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
50+
queryParameter: {
51+
name: "Landuse_R@Jingjin",
52+
attributeFilter: "SMID > -1"
53+
},
54+
datasetNames: ["Jingjin:Landuse_R"],
55+
fromIndex: 0,
56+
toIndex: 200
57+
});
58+
L.supermap.featureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
59+
var d3Layer = L.supermap.d3Layer(function (sel, proj) {
60+
var upd = sel.selectAll('path').data(serviceResult.result.features.features);
61+
upd.enter()
62+
.append('path')
63+
.attr('d', proj.pathFromGeojson)
64+
.attr('fill', function (feature) {
65+
return uniqueMap[feature.properties.LANDTYPE];
66+
})
67+
.attr('fill-opacity', '0.8');
68+
sel.on('mousemove', function () {
69+
70+
});
71+
});
72+
d3Layer.addTo(map);
73+
initLegendView();
74+
});
75+
}
76+
77+
//图例控件
78+
function initLegendView() {
79+
var legendView = L.control({position: 'bottomright'});
80+
legendView.onAdd = function () {
81+
this._div = L.DomUtil.create('div', 'panel panel-primary legend ');
82+
var title = "<div class='panel-heading'><h5 class='panel-title text-center'>图例</h5></div>";
83+
$(title + "<div class='panel-body text-left' ><table>" +
84+
"<tr><td class='legendItemHeader'>土地类型</td><td class='legendItemValue'>颜色</td></tr>" +
85+
"<tr> <td class='legendItemHeader' >草地</td> <td class='legendItemValue' style='background: #C1FFC1'></td></tr>" +
86+
"<tr> <td class='legendItemHeader'>城市</td> <td class='legendItemValue' style='background: #CD7054'></td> </tr>" +
87+
"<tr> <td class='legendItemHeader'>灌丛</td> <td class='legendItemValue' style='background: #7CCD7C'></td> </tr>" +
88+
"<tr> <td class='legendItemHeader'>旱地</td> <td class='legendItemValue' style='background: #EE9A49'></td> </tr>" +
89+
"<tr> <td class='legendItemHeader'>湖泊水库</td> <td class='legendItemValue' style='background: #8EE5EE'></td> </tr>" +
90+
"<tr> <td class='legendItemHeader'>经济林</td> <td class='legendItemValue' style='background: #548B54'></td> </tr>" +
91+
"<tr><td class='legendItemHeader'>沙漠</td> <td class='legendItemValue' style='background: #DEB887'></td> </tr>" +
92+
"<tr><td class='legendItemHeader'>水浇地</td> <td class='legendItemValue' style='background: #E0FFFF'></td> </tr>" +
93+
"<tr><td class='legendItemHeader'>水田</td> <td class='legendItemValue' style='background: #388E8E'></td> </tr>" +
94+
"<tr> <td class='legendItemHeader'>用材林</td> <td class='legendItemValue' style='background: #556B2F'></td> </tr>" +
95+
"<tr> <td class='legendItemHeader'>沼泽</td> <td class='legendItemValue' style='background: #2F4F4F'></td> </tr>" +
96+
"<tr> <td class='legendItemHeader'>缺省风格</td> <td class='legendItemValue' style='background: #ABABAB'></td> </tr>" +
97+
"</table></div>"
98+
).appendTo(this._div);
99+
handleMapEvent(this._div, this._map);
100+
return this._div;
101+
};
102+
legendView.addTo(map);
103+
}
104+
105+
function handleMapEvent(div, map) {
106+
if (!div || !map) {
107+
return;
108+
}
109+
div.addEventListener('mouseover', function () {
110+
map.dragging.disable();
111+
map.scrollWheelZoom.disable();
112+
map.doubleClickZoom.disable();
113+
});
114+
div.addEventListener('mouseout', function () {
115+
map.dragging.enable();
116+
map.scrollWheelZoom.enable();
117+
map.doubleClickZoom.enable();
118+
});
119+
}
120+
</script>
121+
</body>
122+
</html>

‎examples/leaflet/img/l_d3HexbinLayer.png‎

15.5 KB
Loading

‎examples/leaflet/img/l_d3RangeThemeLayer.png‎

19.8 KB
Loading

‎examples/leaflet/img/l_d3UniqueThemeLayer.png‎

20.5 KB
Loading

0 commit comments

Comments
 (0)