-
-
Save roy-bukapeta/6d4341aa9c0c4fd91d4f2cf2ad627586 to your computer and use it in GitHub Desktop.
Example Openlayer3 Add layer vector tile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Advanced Mapbox Vector Tiles</title> | |
<link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css"> | |
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> | |
<script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> | |
<script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script> | |
<style> | |
.map { | |
background: #f8f4f0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map" class="map"></div> | |
<div id="popup" class="ol-popup"> | |
<a href="#" id="popup-closer" class="ol-popup-closer"></a> | |
<div id="popup-content"></div> | |
</div> | |
<script> | |
function createStyle(){ | |
var fill = new ol.style.Fill({color: ''}); | |
var stroke = new ol.style.Stroke({color: '', width: 1}); | |
var polygon = new ol.style.Style({fill: fill}); | |
var strokedPolygon = new ol.style.Style({fill: fill, stroke: stroke}); | |
var line = new ol.style.Style({stroke: stroke}); | |
var text = new ol.style.Style({text: new ol.style.Text({text: '', fill: fill, stroke: stroke})}); | |
var iconCache = {}; | |
function getIcon(iconName) { | |
var icon = iconCache[iconName]; | |
if (!icon) { | |
icon = new ol.style.Style({image: new ol.style.Icon({ | |
src: 'https://cdn.rawgit.com/mapbox/maki/master/icons/' + iconName + '-15.svg', | |
imgSize: [15, 15] | |
})}); | |
iconCache[iconName] = icon; | |
} | |
return icon; | |
} | |
var styles = []; | |
return function(feature, resolution) { | |
var length = 0; | |
var layer = feature.get('layer'); | |
var cls = feature.get('class'); | |
var type = feature.get('type'); | |
var scalerank = feature.get('scalerank'); | |
var labelrank = feature.get('labelrank'); | |
var adminLevel = feature.get('admin_level'); | |
var maritime = feature.get('maritime'); | |
var disputed = feature.get('disputed'); | |
var maki = feature.get('maki'); | |
var geom = feature.getGeometry().getType(); | |
if (layer == 'layer') { | |
text.getText().setText(feature.get('nama_kecam')); | |
text.getText().setFont('bold 11px "Open Sans", "Arial Unicode MS"'); | |
fill.setColor('#1fff10'); | |
stroke.setColor('#e80808'); | |
stroke.setWidth(3); | |
styles[length++] = strokedPolygon; | |
}else if(layer == 'layer'){ | |
text.getText().setText(feature.get('nama_kecam')); | |
text.getText().setFont('bold 11px "Open Sans", "Arial Unicode MS"'); | |
styles[length++] = text; | |
} | |
styles.length = length; | |
return styles; | |
}; | |
} | |
/* eslint-disable openlayers-internal/no-unused-requires */ | |
var key = 'pk.eyJ1IjoiLWhhYmliLSIsImEiOiJjaWdjbmpsZzE0MXM3dmptM3NzN292NWVhIn0.AfZ7s3jnuqK-2nPzbfl7IA'; | |
// For how many zoom levels do we want to use the same vector tiles? | |
// 1 means "use tiles from all zoom levels". 2 means "use the same tiles for 2 | |
// subsequent zoom levels". | |
var reuseZoomLevels = 2; | |
// Offset of loaded tiles from web mercator zoom level 0. | |
// 0 means "At map zoom level 0, use tiles from zoom level 0". 1 means "At map | |
// zoom level 0, use tiles from zoom level 1". | |
var zoomOffset = 1; | |
// Calculation of tile urls | |
var resolutions = []; | |
for (var z = zoomOffset / reuseZoomLevels; z <= 22 / reuseZoomLevels; ++z) { | |
resolutions.push(156543.03392804097 / Math.pow(2, z * reuseZoomLevels)); | |
} | |
function tileUrlFunction(tileCoord) { | |
return ('http://pbf.webgisberau.net?token=5d0e1242406d61e853a5735ad5fbde33a81cd4ff0453fd20d287b2ada0a699ea772a29b0130b1755738c60a8b4e841fe5610cb760207284b35d3f76298db521b&z={z}&x={x}&y={y}.pbf') | |
.replace('{z}', String(tileCoord[0] * reuseZoomLevels + zoomOffset)) | |
.replace('{x}', String(tileCoord[1])) | |
.replace('{y}', String(-tileCoord[2] - 1)) | |
.replace('{a-d}', 'abcd'.substr( | |
((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1)); | |
} | |
var raster = new ol.layer.Tile({ | |
source: new ol.source.OSM() | |
}); | |
var vector_tile = new ol.layer.VectorTile({ | |
renderMode: 'vector', | |
preload: Infinity, | |
source: new ol.source.VectorTile({ | |
attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' + | |
'© <a href="http://www.openstreetmap.org/copyright">' + | |
'OpenStreetMap contributors</a>', | |
format: new ol.format.MVT(), | |
tileGrid: new ol.tilegrid.TileGrid({ | |
extent: ol.proj.get('EPSG:3857').getExtent(), | |
resolutions: resolutions | |
}), | |
tilePixelRatio: 16, | |
tileUrlFunction: tileUrlFunction | |
}), | |
style: createStyle() | |
}); | |
var map = new ol.Map({ | |
layers: [raster,vector_tile], | |
target: 'map', | |
view: new ol.View({ | |
center: [117, -2], | |
minZoom: 4, | |
zoom: 4 | |
}) | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment