Skip to content

Commit 9f1a4a0

Browse files
author
caoxinke
committed
添加OpenLayers MapBox矢量瓦片的例子。
1 parent 7638e68 commit 9f1a4a0

File tree

3 files changed

+358
-0
lines changed

3 files changed

+358
-0
lines changed

‎examples/openlayers/config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -364,6 +364,11 @@ var exampleConfig = {
364364
thumbnail: "cartoCSS_naturalStyle.png",
365365
fileName: "cartoCSS_naturalStyle"
366366
},
367+
{
368+
name: "MapBox矢量瓦片",
369+
thumbnail: "mapboxVectorLayer.png",
370+
fileName: "mapboxVectorLayer"
371+
}
367372
]
368373
}
369374
}

‎examples/openlayers/img/mapboxVectorLayer.png‎

163 KB
Loading

‎examples/openlayers/mapboxVectorLayer.html‎

Lines changed: 353 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,353 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>MapBox矢量瓦片</title>
6+
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
7+
<link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
8+
</head>
9+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:600px;">
10+
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
11+
<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
12+
13+
<script type="text/javascript">
14+
var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
15+
var map = new ol.Map({
16+
layers: [
17+
new ol.layer.VectorTile({
18+
source: new ol.source.VectorTile({
19+
attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
20+
'© <a href="https://www.openstreetmap.org/copyright">' +
21+
'OpenStreetMap contributors</a>',
22+
format: new ol.format.MVT(),
23+
tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
24+
tilePixelRatio: 16,
25+
url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
26+
'{z}/{x}/{y}.vector.pbf?access_token=' + key
27+
}),
28+
style: createMapboxStreetsV6Style()
29+
})],
30+
target: 'map',
31+
view: new ol.View({
32+
center: [12957388, 4853991],
33+
zoom: 11
34+
})
35+
});
36+
37+
function createMapboxStreetsV6Style() {
38+
var fill = new ol.style.Fill({color: ''});
39+
var stroke = new ol.style.Stroke({color: '', width: 1});
40+
var polygon = new ol.style.Style({fill: fill});
41+
var strokedPolygon = new ol.style.Style({fill: fill, stroke: stroke});
42+
var line = new ol.style.Style({stroke: stroke});
43+
var text = new ol.style.Style({
44+
text: new ol.style.Text({
45+
text: '', fill: fill, stroke: stroke
46+
})
47+
});
48+
var iconCache = {};
49+
50+
function getIcon(iconName) {
51+
var icon = iconCache[iconName];
52+
if (!icon) {
53+
icon = new ol.style.Style({
54+
image: new ol.style.Icon({
55+
src: 'https://cdn.rawgit.com/mapbox/maki/master/icons/' + iconName + '-15.svg',
56+
imgSize: [15, 15]
57+
})
58+
});
59+
iconCache[iconName] = icon;
60+
}
61+
return icon;
62+
}
63+
64+
var styles = [];
65+
return function (feature, resolution) {
66+
var length = 0;
67+
var layer = feature.get('layer');
68+
var cls = feature.get('class');
69+
var type = feature.get('type');
70+
var scalerank = feature.get('scalerank');
71+
var labelrank = feature.get('labelrank');
72+
var adminLevel = feature.get('admin_level');
73+
var maritime = feature.get('maritime');
74+
var disputed = feature.get('disputed');
75+
var maki = feature.get('maki');
76+
var geom = feature.getGeometry().getType();
77+
if (layer == 'landuse' && cls == 'park') {
78+
fill.setColor('#d8e8c8');
79+
styles[length++] = polygon;
80+
} else if (layer == 'landuse' && cls == 'cemetery') {
81+
fill.setColor('#e0e4dd');
82+
styles[length++] = polygon;
83+
} else if (layer == 'landuse' && cls == 'hospital') {
84+
fill.setColor('#fde');
85+
styles[length++] = polygon;
86+
} else if (layer == 'landuse' && cls == 'school') {
87+
fill.setColor('#f0e8f8');
88+
styles[length++] = polygon;
89+
} else if (layer == 'landuse' && cls == 'wood') {
90+
fill.setColor('rgb(233,238,223)');
91+
styles[length++] = polygon;
92+
} else if (layer == 'waterway' &&
93+
cls != 'river' && cls != 'stream' && cls != 'canal') {
94+
stroke.setColor('#a0c8f0');
95+
stroke.setWidth(1);
96+
styles[length++] = line;
97+
} else if (layer == 'waterway' && cls == 'river') {
98+
stroke.setColor('#a0c8f0');
99+
stroke.setWidth(1);
100+
styles[length++] = line;
101+
} else if (layer == 'waterway' && (cls == 'stream' ||
102+
cls == 'canal')) {
103+
stroke.setColor('#a0c8f0');
104+
stroke.setWidth(1);
105+
styles[length++] = line;
106+
} else if (layer == 'water') {
107+
fill.setColor('#a0c8f0');
108+
styles[length++] = polygon;
109+
} else if (layer == 'aeroway' && geom == 'Polygon') {
110+
fill.setColor('rgb(242,239,235)');
111+
styles[length++] = polygon;
112+
} else if (layer == 'aeroway' && geom == 'LineString' &&
113+
resolution <= 76.43702828517625) {
114+
stroke.setColor('#f0ede9');
115+
stroke.setWidth(1);
116+
styles[length++] = line;
117+
} else if (layer == 'building') {
118+
fill.setColor('#f2eae2');
119+
stroke.setColor('#dfdbd7');
120+
stroke.setWidth(1);
121+
styles[length++] = strokedPolygon;
122+
} else if (layer == 'tunnel' && cls == 'motorway_link') {
123+
stroke.setColor('#e9ac77');
124+
stroke.setWidth(1);
125+
styles[length++] = line;
126+
} else if (layer == 'tunnel' && cls == 'service') {
127+
stroke.setColor('#cfcdca');
128+
stroke.setWidth(1);
129+
styles[length++] = line;
130+
} else if (layer == 'tunnel' &&
131+
(cls == 'street' || cls == 'street_limited')) {
132+
stroke.setColor('#cfcdca');
133+
stroke.setWidth(1);
134+
styles[length++] = line;
135+
} else if (layer == 'tunnel' && cls == 'main' &&
136+
resolution <= 1222.99245256282) {
137+
stroke.setColor('#e9ac77');
138+
stroke.setWidth(1);
139+
styles[length++] = line;
140+
} else if (layer == 'tunnel' && cls == 'motorway') {
141+
stroke.setColor('#e9ac77');
142+
stroke.setWidth(1);
143+
styles[length++] = line;
144+
} else if (layer == 'tunnel' && cls == 'path') {
145+
stroke.setColor('#cba');
146+
stroke.setWidth(1);
147+
styles[length++] = line;
148+
} else if (layer == 'tunnel' && cls == 'major_rail') {
149+
stroke.setColor('#bbb');
150+
stroke.setWidth(2);
151+
styles[length++] = line;
152+
} else if (layer == 'road' && cls == 'motorway_link') {
153+
stroke.setColor('#e9ac77');
154+
stroke.setWidth(1);
155+
styles[length++] = line;
156+
} else if (layer == 'road' && (cls == 'street' ||
157+
cls == 'street_limited') && geom == 'LineString') {
158+
stroke.setColor('#cfcdca');
159+
stroke.setWidth(1);
160+
styles[length++] = line;
161+
} else if (layer == 'road' && cls == 'main' &&
162+
resolution <= 1222.99245256282) {
163+
stroke.setColor('#e9ac77');
164+
stroke.setWidth(1);
165+
styles[length++] = line;
166+
} else if (layer == 'road' && cls == 'motorway' &&
167+
resolution <= 4891.96981025128) {
168+
stroke.setColor('#e9ac77');
169+
stroke.setWidth(1);
170+
styles[length++] = line;
171+
} else if (layer == 'road' && cls == 'path') {
172+
stroke.setColor('#cba');
173+
stroke.setWidth(1);
174+
styles[length++] = line;
175+
} else if (layer == 'road' && cls == 'major_rail') {
176+
stroke.setColor('#bbb');
177+
stroke.setWidth(2);
178+
styles[length++] = line;
179+
} else if (layer == 'bridge' && cls == 'motorway_link') {
180+
stroke.setColor('#e9ac77');
181+
stroke.setWidth(1);
182+
styles[length++] = line;
183+
} else if (layer == 'bridge' && cls == 'motorway') {
184+
stroke.setColor('#e9ac77');
185+
stroke.setWidth(1);
186+
styles[length++] = line;
187+
} else if (layer == 'bridge' && cls == 'service') {
188+
stroke.setColor('#cfcdca');
189+
stroke.setWidth(1);
190+
styles[length++] = line;
191+
} else if (layer == 'bridge' &&
192+
(cls == 'street' || cls == 'street_limited')) {
193+
stroke.setColor('#cfcdca');
194+
stroke.setWidth(1);
195+
styles[length++] = line;
196+
} else if (layer == 'bridge' && cls == 'main' &&
197+
resolution <= 1222.99245256282) {
198+
stroke.setColor('#e9ac77');
199+
stroke.setWidth(1);
200+
styles[length++] = line;
201+
} else if (layer == 'bridge' && cls == 'path') {
202+
stroke.setColor('#cba');
203+
stroke.setWidth(1);
204+
styles[length++] = line;
205+
} else if (layer == 'bridge' && cls == 'major_rail') {
206+
stroke.setColor('#bbb');
207+
stroke.setWidth(2);
208+
styles[length++] = line;
209+
} else if (layer == 'admin' && adminLevel >= 3 && maritime === 0) {
210+
stroke.setColor('#9e9cab');
211+
stroke.setWidth(1);
212+
styles[length++] = line;
213+
} else if (layer == 'admin' && adminLevel == 2 &&
214+
disputed === 0 && maritime === 0) {
215+
stroke.setColor('#9e9cab');
216+
stroke.setWidth(1);
217+
styles[length++] = line;
218+
} else if (layer == 'admin' && adminLevel == 2 &&
219+
disputed === 1 && maritime === 0) {
220+
stroke.setColor('#9e9cab');
221+
stroke.setWidth(1);
222+
styles[length++] = line;
223+
} else if (layer == 'admin' && adminLevel >= 3 && maritime === 1) {
224+
stroke.setColor('#a0c8f0');
225+
stroke.setWidth(1);
226+
styles[length++] = line;
227+
} else if (layer == 'admin' && adminLevel == 2 && maritime === 1) {
228+
stroke.setColor('#a0c8f0');
229+
stroke.setWidth(1);
230+
styles[length++] = line;
231+
} else if (layer == 'country_label' && scalerank === 1) {
232+
text.getText().setText(feature.get('name_en'));
233+
text.getText().setFont('bold 11px "Open Sans", "Arial Unicode MS"');
234+
fill.setColor('#334');
235+
stroke.setColor('rgba(255,255,255,0.8)');
236+
stroke.setWidth(2);
237+
styles[length++] = text;
238+
} else if (layer == 'country_label' && scalerank === 2 &&
239+
resolution <= 19567.87924100512) {
240+
text.getText().setText(feature.get('name_en'));
241+
text.getText().setFont('bold 10px "Open Sans", "Arial Unicode MS"');
242+
fill.setColor('#334');
243+
stroke.setColor('rgba(255,255,255,0.8)');
244+
stroke.setWidth(2);
245+
styles[length++] = text;
246+
} else if (layer == 'country_label' && scalerank === 3 &&
247+
resolution <= 9783.93962050256) {
248+
text.getText().setText(feature.get('name_en'));
249+
text.getText().setFont('bold 9px "Open Sans", "Arial Unicode MS"');
250+
fill.setColor('#334');
251+
stroke.setColor('rgba(255,255,255,0.8)');
252+
stroke.setWidth(2);
253+
styles[length++] = text;
254+
} else if (layer == 'country_label' && scalerank === 4 &&
255+
resolution <= 4891.96981025128) {
256+
text.getText().setText(feature.get('name_en'));
257+
text.getText().setFont('bold 8px "Open Sans", "Arial Unicode MS"');
258+
fill.setColor('#334');
259+
stroke.setColor('rgba(255,255,255,0.8)');
260+
stroke.setWidth(2);
261+
styles[length++] = text;
262+
} else if (layer == 'marine_label' && labelrank === 1 &&
263+
geom == 'Point') {
264+
text.getText().setText(feature.get('name_en'));
265+
text.getText().setFont(
266+
'italic 11px "Open Sans", "Arial Unicode MS"');
267+
fill.setColor('#74aee9');
268+
stroke.setColor('rgba(255,255,255,0.8)');
269+
stroke.setWidth(1);
270+
styles[length++] = text;
271+
} else if (layer == 'marine_label' && labelrank === 2 &&
272+
geom == 'Point') {
273+
text.getText().setText(feature.get('name_en'));
274+
text.getText().setFont(
275+
'italic 11px "Open Sans", "Arial Unicode MS"');
276+
fill.setColor('#74aee9');
277+
stroke.setColor('rgba(255,255,255,0.8)');
278+
stroke.setWidth(1);
279+
styles[length++] = text;
280+
} else if (layer == 'marine_label' && labelrank === 3 &&
281+
geom == 'Point') {
282+
text.getText().setText(feature.get('name_en'));
283+
text.getText().setFont(
284+
'italic 10px "Open Sans", "Arial Unicode MS"');
285+
fill.setColor('#74aee9');
286+
stroke.setColor('rgba(255,255,255,0.8)');
287+
stroke.setWidth(1);
288+
styles[length++] = text;
289+
} else if (layer == 'marine_label' && labelrank === 4 &&
290+
geom == 'Point') {
291+
text.getText().setText(feature.get('name_en'));
292+
text.getText().setFont(
293+
'italic 9px "Open Sans", "Arial Unicode MS"');
294+
fill.setColor('#74aee9');
295+
stroke.setColor('rgba(255,255,255,0.8)');
296+
stroke.setWidth(1);
297+
styles[length++] = text;
298+
} else if (layer == 'place_label' && type == 'city' &&
299+
resolution <= 1222.99245256282) {
300+
text.getText().setText(feature.get('name_en'));
301+
text.getText().setFont('11px "Open Sans", "Arial Unicode MS"');
302+
fill.setColor('#333');
303+
stroke.setColor('rgba(255,255,255,0.8)');
304+
stroke.setWidth(1);
305+
styles[length++] = text;
306+
} else if (layer == 'place_label' && type == 'town' &&
307+
resolution <= 305.748113140705) {
308+
text.getText().setText(feature.get('name_en'));
309+
text.getText().setFont('9px "Open Sans", "Arial Unicode MS"');
310+
fill.setColor('#333');
311+
stroke.setColor('rgba(255,255,255,0.8)');
312+
stroke.setWidth(1);
313+
styles[length++] = text;
314+
} else if (layer == 'place_label' && type == 'village' &&
315+
resolution <= 38.21851414258813) {
316+
text.getText().setText(feature.get('name_en'));
317+
text.getText().setFont('8px "Open Sans", "Arial Unicode MS"');
318+
fill.setColor('#333');
319+
stroke.setColor('rgba(255,255,255,0.8)');
320+
stroke.setWidth(1);
321+
styles[length++] = text;
322+
} else if (layer == 'place_label' &&
323+
resolution <= 19.109257071294063 && (type == 'hamlet' ||
324+
type == 'suburb' || type == 'neighbourhood')) {
325+
text.getText().setText(feature.get('name_en'));
326+
text.getText().setFont('bold 9px "Arial Narrow"');
327+
fill.setColor('#633');
328+
stroke.setColor('rgba(255,255,255,0.8)');
329+
stroke.setWidth(1);
330+
styles[length++] = text;
331+
} else if (layer == 'poi_label' && resolution <= 19.109257071294063 &&
332+
scalerank == 1 && maki !== 'marker') {
333+
styles[length++] = getIcon(maki);
334+
} else if (layer == 'poi_label' && resolution <= 9.554628535647032 &&
335+
scalerank == 2 && maki !== 'marker') {
336+
styles[length++] = getIcon(maki);
337+
} else if (layer == 'poi_label' && resolution <= 4.777314267823516 &&
338+
scalerank == 3 && maki !== 'marker') {
339+
styles[length++] = getIcon(maki);
340+
} else if (layer == 'poi_label' && resolution <= 2.388657133911758 &&
341+
scalerank == 4 && maki !== 'marker') {
342+
styles[length++] = getIcon(maki);
343+
} else if (layer == 'poi_label' && resolution <= 1.194328566955879 &&
344+
scalerank >= 5 && maki !== 'marker') {
345+
styles[length++] = getIcon(maki);
346+
}
347+
styles.length = length;
348+
return styles;
349+
};
350+
}
351+
</script>
352+
</body>
353+
</html>

0 commit comments

Comments
 (0)