Example of tile preloading.
The map on the top preloads low resolution tiles. The map on the bottom does not use any preloading. Try zooming out and panning to see the difference.
import 'ol/ol.css';
import BingMaps from 'ol/source/BingMaps';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
var view = new View({
center: [-4808600, -2620936],
zoom: 8,
});
var map1 = new Map({
layers: [
new TileLayer({
preload: Infinity,
source: new BingMaps({
key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
imagerySet: 'Aerial',
}),
}) ],
target: 'map1',
view: view,
});
var map2 = new Map({
layers: [
new TileLayer({
preload: 0, // default value
source: new BingMaps({
key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
imagerySet: 'AerialWithLabelsOnDemand',
}),
}) ],
target: 'map2',
view: view,
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Preload Tiles</title>
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<style>
.map {
width: 100%;
height:400px;
}
</style>
</head>
<body>
<div id="map1" class="map"></div>
<div id="map2" class="map"></div>
<script src="main.js"></script>
</body>
</html>
{
"name": "preload",
"dependencies": {
"ol": "6.4.3"
},
"devDependencies": {
"parcel": "1.11.0"
},
"scripts": {
"start": "parcel index.html",
"build": "parcel build --experimental-scope-hoisting --public-url . index.html"
}
}