1 |
|
2 | goog.require('ol.Map');
|
3 | goog.require('ol.View');
|
4 | goog.require('ol.format.GeoJSON');
|
5 | goog.require('ol.source.OSM');
|
6 | goog.require('ol.source.VectorTile');
|
7 | goog.require('ol.layer.Tile');
|
8 | goog.require('ol.layer.VectorTile');
|
9 | goog.require('ol.proj.Projection');
|
10 |
|
11 |
|
12 | var replacer = function(key, value) {
|
13 | if (value.geometry) {
|
14 | var type;
|
15 | var rawType = value.type;
|
16 | var geometry = value.geometry;
|
17 |
|
18 | if (rawType === 1) {
|
19 | type = 'MultiPoint';
|
20 | if (geometry.length == 1) {
|
21 | type = 'Point';
|
22 | geometry = geometry[0];
|
23 | }
|
24 | } else if (rawType === 2) {
|
25 | type = 'MultiLineString';
|
26 | if (geometry.length == 1) {
|
27 | type = 'LineString';
|
28 | geometry = geometry[0];
|
29 | }
|
30 | } else if (rawType === 3) {
|
31 | type = 'Polygon';
|
32 | if (geometry.length > 1) {
|
33 | type = 'MultiPolygon';
|
34 | geometry = [geometry];
|
35 | }
|
36 | }
|
37 |
|
38 | return {
|
39 | 'type': 'Feature',
|
40 | 'geometry': {
|
41 | 'type': type,
|
42 | 'coordinates': geometry
|
43 | },
|
44 | 'properties': value.tags
|
45 | };
|
46 | } else {
|
47 | return value;
|
48 | }
|
49 | };
|
50 |
|
51 | var tilePixels = new ol.proj.Projection({
|
52 | code: 'TILE_PIXELS',
|
53 | units: 'tile-pixels'
|
54 | });
|
55 |
|
56 | var map = new ol.Map({
|
57 | layers: [
|
58 | new ol.layer.Tile({
|
59 | source: new ol.source.OSM()
|
60 | })
|
61 | ],
|
62 | target: 'map',
|
63 | view: new ol.View({
|
64 | center: [0, 0],
|
65 | zoom: 2
|
66 | })
|
67 | });
|
68 |
|
69 | var url = 'data/geojson/countries.geojson';
|
70 | fetch(url).then(function(response) {
|
71 | return response.json();
|
72 | }).then(function(json) {
|
73 | var tileIndex = geojsonvt(json, {
|
74 | extent: 4096,
|
75 | debug: 1
|
76 | });
|
77 | var vectorSource = new ol.source.VectorTile({
|
78 | format: new ol.format.GeoJSON(),
|
79 | tileLoadFunction: function(tile) {
|
80 | var format = tile.getFormat();
|
81 | var tileCoord = tile.getTileCoord();
|
82 | var data = tileIndex.getTile(tileCoord[0], tileCoord[1], -tileCoord[2] - 1);
|
83 |
|
84 | var features = format.readFeatures(
|
85 | JSON.stringify({
|
86 | type: 'FeatureCollection',
|
87 | features: data ? data.features : []
|
88 | }, replacer));
|
89 | tile.setLoader(function() {
|
90 | tile.setFeatures(features);
|
91 | tile.setProjection(tilePixels);
|
92 | });
|
93 | },
|
94 | url: 'data:'
|
95 | });
|
96 | var vectorLayer = new ol.layer.VectorTile({
|
97 | source: vectorSource
|
98 | });
|
99 | map.addLayer(vectorLayer);
|
100 | });
|