1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
| import GeoJSON from 'ol/format/GeoJSON.js';
import Map from 'ol/Map.js';
import Projection from 'ol/proj/Projection.js';
import VectorTileLayer from 'ol/layer/VectorTile.js';
import VectorTileSource from 'ol/source/VectorTile.js';
import View from 'ol/View.js';
import {Fill, Style} from 'ol/style.js';
const replacer = function (key, value) {
if (!value || !value.geometry) {
return value;
}
let type;
const rawType = value.type;
let geometry = value.geometry;
if (rawType === 1) {
type = 'MultiPoint';
if (geometry.length == 1) {
type = 'Point';
geometry = geometry[0];
}
} else if (rawType === 2) {
type = 'MultiLineString';
if (geometry.length == 1) {
type = 'LineString';
geometry = geometry[0];
}
} else if (rawType === 3) {
type = 'Polygon';
if (geometry.length > 1) {
type = 'MultiPolygon';
geometry = [geometry];
}
}
return {
'type': 'Feature',
'geometry': {
'type': type,
'coordinates': geometry,
},
'properties': value.tags,
};
};
const style = new Style({
fill: new Fill({
color: '#eeeeee',
}),
});
const layer = new VectorTileLayer({
background: '#1a2b39',
style: function (feature) {
const color = feature.get('COLOR') || '#eeeeee';
style.getFill().setColor(color);
return style;
},
});
const map = new Map({
layers: [layer],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2,
}),
});
const url = 'https://openlayers.org/data/vector/ecoregions.json';
fetch(url)
.then(function (response) {
return response.json();
})
.then(function (json) {
const tileIndex = geojsonvt(json, {
extent: 4096,
debug: 1,
});
const format = new GeoJSON({
dataProjection: new Projection({
code: 'TILE_PIXELS',
units: 'tile-pixels',
extent: [0, 0, 4096, 4096],
}),
});
const vectorSource = new VectorTileSource({
tileUrlFunction: function (tileCoord) {
return JSON.stringify(tileCoord);
},
tileLoadFunction: function (tile, url) {
const tileCoord = JSON.parse(url);
const data = tileIndex.getTile(
tileCoord[0],
tileCoord[1],
tileCoord[2]
);
const geojson = JSON.stringify(
{
type: 'FeatureCollection',
features: data ? data.features : [],
},
replacer
);
const features = format.readFeatures(geojson, {
extent: vectorSource.getTileGrid().getTileCoordExtent(tileCoord),
featureProjection: map.getView().getProjection(),
});
tile.setFeatures(features);
},
});
layer.setSource(vectorSource);
});
|
)
