116 lines
3.4 KiB
JavaScript
116 lines
3.4 KiB
JavaScript
// NOCOMPILE
|
|
/* global labelgun, labelSegment, textPath */
|
|
goog.require('ol.Map');
|
|
goog.require('ol.View');
|
|
goog.require('ol.extent');
|
|
goog.require('ol.format.OSMXML');
|
|
goog.require('ol.layer.Tile');
|
|
goog.require('ol.layer.Vector');
|
|
goog.require('ol.source.BingMaps');
|
|
goog.require('ol.source.Vector');
|
|
goog.require('ol.style.Style');
|
|
|
|
var emptyFn = function() {};
|
|
var labelEngine = new labelgun['default'](emptyFn, emptyFn);
|
|
|
|
var context, pixelRatio; // Will be set in the map's postcompose listener
|
|
function measureText(text) {
|
|
return context.measureText(text).width * pixelRatio;
|
|
}
|
|
|
|
var extent, letters; // Will be set in the style's renderer function
|
|
function collectDrawData(letter, x, y, angle) {
|
|
ol.extent.extend(extent, [x, y, x, y]);
|
|
letters.push([x, y, angle, letter]);
|
|
}
|
|
|
|
var style = new ol.style.Style({
|
|
renderer: function(coords, context) {
|
|
var feature = context.feature;
|
|
var text = feature.get('name');
|
|
// Only create label when geometry has a long and straight segment
|
|
var path = labelSegment(coords, Math.PI / 8, measureText(text));
|
|
if (path) {
|
|
extent = ol.extent.createEmpty();
|
|
letters = [];
|
|
textPath(text, path, measureText, collectDrawData);
|
|
ol.extent.buffer(extent, 5 * pixelRatio, extent);
|
|
var bounds = {
|
|
bottomLeft: ol.extent.getBottomLeft(extent),
|
|
topRight: ol.extent.getTopRight(extent)
|
|
};
|
|
labelEngine.ingestLabel(bounds, feature.getId(), 1, letters, text, false);
|
|
}
|
|
}
|
|
});
|
|
|
|
var rasterLayer = new ol.layer.Tile({
|
|
source: new ol.source.BingMaps({
|
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
|
|
imagerySet: 'Aerial'
|
|
})
|
|
});
|
|
|
|
var source = new ol.source.Vector();
|
|
// Request streets from OSM, using the Overpass API
|
|
fetch('https://overpass-api.de/api/interpreter', {
|
|
method: 'POST',
|
|
body: '(way["highway"](48.19642,16.32580,48.22050,16.41986));(._;>;);out meta;'
|
|
}).then(function(response) {
|
|
return response.text();
|
|
}).then(function(responseText) {
|
|
var features = new ol.format.OSMXML().readFeatures(responseText, {
|
|
featureProjection: 'EPSG:3857'
|
|
});
|
|
source.addFeatures(features);
|
|
});
|
|
|
|
var vectorLayer = new ol.layer.Vector({
|
|
source: source,
|
|
style: function(feature) {
|
|
if (feature.getGeometry().getType() == 'LineString' && feature.get('name')) {
|
|
return style;
|
|
}
|
|
}
|
|
});
|
|
|
|
var viewExtent = [1817379, 6139595, 1827851, 6143616];
|
|
var map = new ol.Map({
|
|
layers: [rasterLayer, vectorLayer],
|
|
target: 'map',
|
|
view: new ol.View({
|
|
extent: viewExtent,
|
|
center: ol.extent.getCenter(viewExtent),
|
|
zoom: 17,
|
|
minZoom: 14
|
|
})
|
|
});
|
|
|
|
vectorLayer.on('precompose', function() {
|
|
labelEngine.destroy();
|
|
});
|
|
vectorLayer.on('postcompose', function(e) {
|
|
context = e.context;
|
|
pixelRatio = e.frameState.pixelRatio;
|
|
context.save();
|
|
context.font = 'normal 11px "Open Sans", "Arial Unicode MS"';
|
|
context.fillStyle = 'white';
|
|
context.textBaseline = 'middle';
|
|
context.textAlign = 'center';
|
|
var labels = labelEngine.getShown();
|
|
for (var i = 0, ii = labels.length; i < ii; ++i) {
|
|
// Render label letter by letter
|
|
var letters = labels[i].labelObject;
|
|
for (var j = 0, jj = letters.length; j < jj; ++j) {
|
|
var labelData = letters[j];
|
|
context.save();
|
|
context.translate(labelData[0], labelData[1]);
|
|
context.rotate(labelData[2]);
|
|
context.scale(pixelRatio, pixelRatio);
|
|
context.fillText(labelData[3], 0, 0);
|
|
context.restore();
|
|
}
|
|
}
|
|
context.restore();
|
|
});
|