Skip to content

Commit 8ed38d2

Browse files
mevdscheemevdschee
committed
vector tiles wip
1 parent edbb4dc commit 8ed38d2

File tree

3 files changed

+124
-5
lines changed

3 files changed

+124
-5
lines changed

‎examples/clients/leaflet/geojson-dynamic-layer.js renamed to ‎examples/clients/leaflet/geojson-layer.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* global L */
22
(function() {
33

4-
L.GeoJSONURL = L.GeoJSON.extend({
4+
L.GeoJSONLayer = L.GeoJSON.extend({
55

66
includes: L.Evented.prototype,
77

@@ -74,8 +74,8 @@
7474

7575
});
7676

77-
L.geoJSONURL = function (options) {
78-
return new L.GeoJSONURL(options);
77+
L.geoJSONLayer = function (options) {
78+
return new L.GeoJSONLayer(options);
7979
};
8080

8181
}).call(this);

‎examples/clients/leaflet/vanilla.html

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010

1111
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
1212
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
13-
<script src="geojson-dynamic-layer.js"></script>
13+
<script src="geojson-layer.js"></script>
14+
<!--<script src="vector-tile-layer.js"></script>-->
1415
</head>
1516
<body>
1617

@@ -22,9 +23,13 @@
2223
maxZoom: 18,
2324
}).addTo(mymap);
2425

25-
L.geoJSONURL({
26+
L.geoJSONLayer({
2627
url: "http://localhost:8000/api.php/geojson/countries/1,2?bbox={bbox}",
2728
}).addTo(mymap);
29+
30+
// L.vectorTileLayer('http://localhost:8000/api.php/geojson/countries/1,2?tile={z},{y},{x}', {
31+
// maxZoom: 18,
32+
// }).addTo(mymap);
2833
</script>
2934

3035
</body>

‎examples/clients/leaflet/vector-tile-layer.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/* global L */
2+
(function() {
3+
4+
L.vectorTileLayer = L.GeoJSON.extend({
5+
6+
includes: L.Evented.prototype,
7+
8+
map: null,
9+
10+
options: {
11+
},
12+
13+
initialize(extraOptions, options) {
14+
L.GeoJSON.prototype.initialize.call(this, [], options);
15+
L.Util.setOptions(this, extraOptions);
16+
},
17+
18+
19+
/*
20+
function long2tile(lon,zoom) { return (Math.floor((lon+180)/360*Math.pow(2,zoom))); }
21+
function lat2tile(lat,zoom) { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); }
22+
23+
Inverse process:
24+
25+
function tile2long(x,z) {
26+
return (x/Math.pow(2,z)*360-180);
27+
}
28+
function tile2lat(y,z) {
29+
var n=Math.PI-2*Math.PI*y/Math.pow(2,z);
30+
return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));
31+
}
32+
33+
Example for calculating number of tiles within given extent and zoom-level:
34+
35+
var zoom = 9;
36+
var top_tile = lat2tile(north_edge, zoom); // eg.lat2tile(34.422, 9);
37+
var left_tile = lon2tile(west_edge, zoom);
38+
var bottom_tile = lat2tile(south_edge, zoom);
39+
var right_tile = lon2tile(east_edge, zoom);
40+
var width = Math.abs(left_tile - right_tile) + 1;
41+
var height = Math.abs(top_tile - bottom_tile) + 1;
42+
43+
// total tiles
44+
var total_tiles = width * height; // -> eg. 377
45+
*/
46+
47+
_reload: function() {
48+
if (this.map) {
49+
var urls = this._expand(this.options.url);
50+
for (var i=0; i<urls.length; i++) {
51+
this._ajax('GET', urls[i], false, this._update.bind(this));
52+
}
53+
}
54+
},
55+
56+
57+
58+
_update: function(geoData) {
59+
this.clearLayers();
60+
this.addData(geoData);
61+
},
62+
63+
onAdd: function(map) {
64+
L.GeoJSON.prototype.onAdd.call(this, map);
65+
this.map = map;
66+
map.on('moveend zoomend refresh', this._reload, this);
67+
this._reload();
68+
},
69+
70+
onRemove: function(map) {
71+
map.off('moveend zoomend refresh', this._reload, this);
72+
this.map = null;
73+
L.GeoJSON.prototype.onRemove.call(this, map);
74+
},
75+
76+
_expand: function(template) {
77+
var bbox = this._map.getBounds();
78+
var southWest = bbox.getSouthWest();
79+
var northEast = bbox.getNorthEast();
80+
var bboxStr = bbox.toBBoxString();
81+
var coords = {
82+
lat1: southWest.lat,
83+
lon1: southWest.lng,
84+
lat2: northEast.lat,
85+
lon2: northEast.lng,
86+
bbox: bboxStr
87+
};
88+
return [L.Util.template(template, coords)];
89+
},
90+
91+
_ajax: function(method, url, data, callback) {
92+
var request = new XMLHttpRequest();
93+
request.open(method, url, true);
94+
request.onreadystatechange = function() {
95+
if (request.readyState === 4 && request.status === 200) {
96+
callback(JSON.parse(request.responseText));
97+
}
98+
};
99+
if (data) {
100+
request.setRequestHeader('Content-type', 'application/json');
101+
request.send(JSON.stringify(data));
102+
} else {
103+
request.send();
104+
}
105+
return request;
106+
},
107+
108+
});
109+
110+
L.vectorTileLayer = function (options) {
111+
return new L.vectorTileLayer(options);
112+
};
113+
114+
}).call(this);

0 commit comments

Comments
 (0)