Skip to content

Commit f04d502

Browse files
luoxiao-supermapluoxiao-supermap
committed
【feature】leaflet新增pixi范例 review by songym
1 parent 3dc0431 commit f04d502

File tree

5 files changed

+156
-0
lines changed

5 files changed

+156
-0
lines changed

‎dist/leaflet/include-leaflet.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,12 @@
111111
if (inArray(includes, 'deck')) {
112112
inputScript("https://iclient.supermap.io/web/libs/deck.gl/5.1.3/deck.gl.min.js");
113113
}
114+
if (inArray(includes, 'pixi')) {
115+
inputScript('https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.7/pixi.js');
116+
inputScript('https://cdn.jsdelivr.net/npm/leaflet-pixi-overlay@1.8.1/L.PixiOverlay.min.js');
117+
inputScript('https://iclient.supermap.io/web/libs/leaflet/plugins/Leaflet.PixiOverlay/1.8.1/MarkerContainer.js');
118+
inputScript('https://iclient.supermap.io/web/libs/bezier-easing/2.1.0/bezier-easing.js');
119+
}
114120

115121
// iclient
116122
if (!inArray(excludes, 'iclient-leaflet')) {

‎examples/leaflet/config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -990,6 +990,18 @@ var exampleConfig = {
990990
thumbnail: "l_graphThemeLayer.png",
991991
fileName: "graphThemeLayer"
992992
}]
993+
},
994+
pixi: {
995+
name: 'Pixi',
996+
name_en: 'Pixi',
997+
content: [
998+
{
999+
name: '纽约出租车上车点分布图（140万点数据绘制）',
1000+
name_en: 'Use Pixi to draw 1.4 millions New York Taxi Points',
1001+
thumbnail: 'l_pixiOverlay_taxi.png',
1002+
fileName: 'l_pixiOverlay_taxi'
1003+
}
1004+
]
9931005
}
9941006
}
9951007
},

‎examples/leaflet/img/l_pixiOverlay_taxi.png‎

22.7 KB
Loading

‎examples/leaflet/img/marker-icon.png‎

1.43 KB
Loading

‎examples/leaflet/l_pixiOverlay_taxi.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html style="height: 100%; margin: 0;">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title data-i18n="resources.title_pixiOverlay_taxi"></title>
6+
<link href="https://cdn.bootcss.com/leaflet/1.5.1/leaflet.css" rel="stylesheet" />
7+
<script type="text/javascript" include="jquery,bootstrap,papaparse,widgets" src="../js/include-web.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%" class="cartes"></div>
11+
<!-- 引入 pixi.js 、L.PixiOverlay.js等相关js -->
12+
<script type="text/javascript" include="pixi" src="../../dist/leaflet/include-leaflet.js"></script>
13+
<script>
14+
let host = window.isLocal ? window.server : 'https://iserver.supermap.io';
15+
var url = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
16+
var map = L.map('map', {
17+
center: [40.7594, -73.91426],
18+
maxZoom: 18,
19+
zoom: 11
20+
});
21+
// iclient-leaflet添加tilelayer
22+
L.supermap
23+
.tiledMapLayer(url, {
24+
attribution:
25+
"<a href='https://github.com/manubb/Leaflet.PixiOverlay' target='_blank' >© Leaflet.PixiOverlay</a>"
26+
})
27+
.addTo(map);
28+
widgets.loader.showLoader('data loading...');
29+
30+
// pixi构建多marker图层
31+
var easing = BezierEasing(0, 0, 0.25, 1);
32+
var loader = new PIXI.loaders.Loader();
33+
loader.add('marker', 'img/marker-icon.png');
34+
document.addEventListener('DOMContentLoaded', function() {
35+
loader.load(function(loader, resources) {
36+
var texture = resources.marker.texture;
37+
// 请求纽约出租车上车点的数据
38+
$.get('../data/nyc-taxi.csv', function(csvstr) {
39+
widgets.loader.removeLoader();
40+
var nycData = Papa.parse(csvstr, { skipEmptyLines: true, header: true });
41+
var data = nycData.data;
42+
// 构建pixiLayer
43+
var pixiLayer = (function() {
44+
var zoomChangeTs = null;
45+
var pixiContainer = new PIXI.Container();
46+
var innerContainer = new PIXI.particles.ParticleContainer(data.length, { vertices: true });
47+
// add properties for our patched particleRenderer:
48+
innerContainer.texture = texture;
49+
innerContainer.baseTexture = texture.baseTexture;
50+
innerContainer.anchor = { x: 0.5, y: 1 };
51+
52+
pixiContainer.addChild(innerContainer);
53+
var doubleBuffering = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
54+
var initialScale;
55+
return L.pixiOverlay(
56+
function(utils, event) {
57+
var zoom = utils.getMap().getZoom();
58+
var container = utils.getContainer();
59+
var renderer = utils.getRenderer();
60+
var project = utils.latLngToLayerPoint;
61+
var getScale = utils.getScale;
62+
var invScale = 1 / getScale();
63+
64+
if (event.type === 'add') {
65+
var origin = project([(48.7 + 49) / 2, (2.2 + 2.8) / 2]);
66+
innerContainer.x = origin.x;
67+
innerContainer.y = origin.y;
68+
initialScale = invScale / 8;
69+
innerContainer.localScale = initialScale;
70+
71+
for (var i = 0; i < data.length; i++) {
72+
var coords = project([data[i].lat, data[i].lng]);
73+
// our patched particleContainer accepts simple {x: ..., y: ...} objects as children:
74+
innerContainer.addChild({
75+
x: coords.x - origin.x,
76+
y: coords.y - origin.y
77+
});
78+
}
79+
}
80+
81+
if (event.type === 'zoomanim') {
82+
var targetZoom = event.zoom;
83+
if (targetZoom >= 18 || zoom >= 18) {
84+
zoomChangeTs = 0;
85+
var targetScale =
86+
targetZoom >= 18 ? 1 / getScale(event.zoom) : initialScale;
87+
innerContainer.currentScale = innerContainer.localScale;
88+
innerContainer.targetScale = targetScale;
89+
}
90+
return;
91+
}
92+
93+
if (event.type === 'redraw') {
94+
var delta = event.delta;
95+
if (zoomChangeTs !== null) {
96+
var duration = 17;
97+
zoomChangeTs += delta;
98+
var lambda = zoomChangeTs / duration;
99+
if (lambda > 1) {
100+
lambda = 1;
101+
zoomChangeTs = null;
102+
}
103+
lambda = easing(lambda);
104+
innerContainer.localScale =
105+
innerContainer.currentScale +
106+
lambda * (innerContainer.targetScale - innerContainer.currentScale);
107+
} else {
108+
return;
109+
}
110+
}
111+
112+
renderer.render(container);
113+
},
114+
pixiContainer,
115+
{
116+
doubleBuffering: doubleBuffering,
117+
destroyInteractionManager: true
118+
}
119+
);
120+
})();
121+
pixiLayer.addTo(map);
122+
var ticker = new PIXI.ticker.Ticker();
123+
ticker.add(function(delta) {
124+
pixiLayer.redraw({ type: 'redraw', delta: delta });
125+
});
126+
map.on('zoomstart', function() {
127+
ticker.start();
128+
});
129+
map.on('zoomend', function() {
130+
ticker.stop();
131+
});
132+
map.on('zoomanim', pixiLayer.redraw, pixiLayer);
133+
});
134+
});
135+
});
136+
</script>
137+
</body>
138+
</html>

0 commit comments

Comments
 (0)