|
|
@@ -1,114 +1,86 @@
|
|
1
|
1
|
/* global L */
|
|
2
|
2
|
(function() {
|
|
3
|
3
|
|
|
4
|
|
- L.GeoJSONTileLayer = 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.geoJSONTileLayer = function (options) {
|
|
111
|
|
- return new L.GeoJSONTileLayer(options);
|
|
112
|
|
-};
|
|
|
4
|
+ L.GeoJSONTileLayer = L.GridLayer.extend({
|
|
|
5
|
+
|
|
|
6
|
+ includes: L.Evented.prototype,
|
|
|
7
|
+
|
|
|
8
|
+ url: null,
|
|
|
9
|
+ layer: null,
|
|
|
10
|
+ features: null,
|
|
|
11
|
+
|
|
|
12
|
+ initialize(url, options) {
|
|
|
13
|
+ this.url = url;
|
|
|
14
|
+ this.layer = new L.GeoJSON(null, options);
|
|
|
15
|
+ this.features = {};
|
|
|
16
|
+ L.GridLayer.prototype.initialize.call(this, options);
|
|
|
17
|
+ },
|
|
|
18
|
+
|
|
|
19
|
+ createTile: function (coords) {
|
|
|
20
|
+ var tile = L.DomUtil.create('div', 'leaflet-tile');
|
|
|
21
|
+ var url = L.Util.template(this.url, coords);
|
|
|
22
|
+ this.ajaxRequest('GET', url, false, this.updateLayers.bind(this));
|
|
|
23
|
+ return tile;
|
|
|
24
|
+ },
|
|
|
25
|
+
|
|
|
26
|
+ ajaxRequest: function(method, url, data, callback) {
|
|
|
27
|
+ var request = new XMLHttpRequest();
|
|
|
28
|
+ request.open(method, url, true);
|
|
|
29
|
+ request.onreadystatechange = function() {
|
|
|
30
|
+ if (request.readyState === 4 && request.status === 200) {
|
|
|
31
|
+ callback(JSON.parse(request.responseText));
|
|
|
32
|
+ }
|
|
|
33
|
+ };
|
|
|
34
|
+ if (data) {
|
|
|
35
|
+ request.setRequestHeader('Content-type', 'application/json');
|
|
|
36
|
+ request.send(JSON.stringify(data));
|
|
|
37
|
+ } else {
|
|
|
38
|
+ request.send();
|
|
|
39
|
+ }
|
|
|
40
|
+ return request;
|
|
|
41
|
+ },
|
|
|
42
|
+
|
|
|
43
|
+ updateLayers: function(geoData) {
|
|
|
44
|
+ this.layer.clearLayers();
|
|
|
45
|
+ this.layer.addData(geoData);
|
|
|
46
|
+ },
|
|
|
47
|
+
|
|
|
48
|
+ onAdd(map) {
|
|
|
49
|
+ L.GridLayer.prototype.onAdd.call(this, map);
|
|
|
50
|
+ map.addLayer(this.layer);
|
|
|
51
|
+ this.map = map;
|
|
|
52
|
+ //map.on('moveend zoomend refresh', this.reloadMap, this);
|
|
|
53
|
+ //this.reloadMap();
|
|
|
54
|
+ },
|
|
|
55
|
+
|
|
|
56
|
+ onRemove(map) {
|
|
|
57
|
+ //map.off('moveend zoomend refresh', this.reloadMap, this);
|
|
|
58
|
+ this.map = null;
|
|
|
59
|
+ map.removeLayer(this.layer)
|
|
|
60
|
+ L.GridLayer.prototype.onRemove.call(this, map);
|
|
|
61
|
+ },
|
|
|
62
|
+
|
|
|
63
|
+ ajaxRequest: function(method, url, data, callback) {
|
|
|
64
|
+ var request = new XMLHttpRequest();
|
|
|
65
|
+ request.open(method, url, true);
|
|
|
66
|
+ request.onreadystatechange = function() {
|
|
|
67
|
+ if (request.readyState === 4 && request.status === 200) {
|
|
|
68
|
+ callback(JSON.parse(request.responseText));
|
|
|
69
|
+ }
|
|
|
70
|
+ };
|
|
|
71
|
+ if (data) {
|
|
|
72
|
+ request.setRequestHeader('Content-type', 'application/json');
|
|
|
73
|
+ request.send(JSON.stringify(data));
|
|
|
74
|
+ } else {
|
|
|
75
|
+ request.send();
|
|
|
76
|
+ }
|
|
|
77
|
+ return request;
|
|
|
78
|
+ },
|
|
|
79
|
+
|
|
|
80
|
+ });
|
|
|
81
|
+
|
|
|
82
|
+ L.geoJSONTileLayer = function (options) {
|
|
|
83
|
+ return new L.GeoJSONTileLayer(options);
|
|
|
84
|
+ };
|
|
113
|
85
|
|
|
114
|
86
|
}).call(this);
|
Maurits van der Schee
4 yıl önce