nas
/
todo_api
Watch 2
Star 1
Fork 0
Code Issues 1 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

vector tiles wip

Maurits van der Schee 6 years ago
parent
edbb4dcadb
commit
8ed38d28be
3 changed files with 124 additions and 5 deletions
Split View Show Diff Stats
  1. 3
    3
      examples/clients/leaflet/geojson-layer.js
  2. 7
    2
      examples/clients/leaflet/vanilla.html
  3. 114
    0
      examples/clients/leaflet/vector-tile-layer.js

examples/clients/leaflet/geojson-dynamic-layer.js → examples/clients/leaflet/geojson-layer.js View File 

@@ -1,7 +1,7 @@
1 1 
 /* global L */
2 2 
 (function() {
3 3
4 
-    L.GeoJSONURL = L.GeoJSON.extend({
4 
+    L.GeoJSONLayer = L.GeoJSON.extend({
5 5
6 6 
     includes: L.Evented.prototype,
7 7 
 
@@ -74,8 +74,8 @@
74 74
75 75 
 });
76 76
77 
-L.geoJSONURL = function (options) {
78 
-    return new L.GeoJSONURL(options);
77 
+L.geoJSONLayer = function (options) {
78 
+    return new L.GeoJSONLayer(options);
79 79 
 };
80 80
81 81 
 }).call(this);

+ 7
- 2
examples/clients/leaflet/vanilla.html View File 

@@ -10,7 +10,8 @@
10 10
11 11 
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
12 12 
     <script src="https://unpkg.com/leaflet@1.5.1/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>-->
14 15 
 </head>
15 16 
 <body>
16 17 
 
@@ -22,9 +23,13 @@
22 23 
 	 	maxZoom: 18,
23 24 
 	}).addTo(mymap);
24 25
25 
-	L.geoJSONURL({
26 
+	L.geoJSONLayer({
26 27 
 		url: "http://localhost:8000/api.php/geojson/countries/1,2?bbox={bbox}",
27 28 
 	}).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);
28 33 
 </script>
29 34
30 35 
 </body>

+ 114
- 0
examples/clients/leaflet/vector-tile-layer.js View File 

@@ -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);

Write Preview
Loading…
Cancel
Save