OpenLayers示例代码：固定链接
OpenLayers示例代码：固定链接
<!DOCTYPE html>
<html>
<head>
<title>Permalink</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
// default zoom, center and rotation
var zoom = 2;
var center = [0, 0];
var rotation = 0;
if (window.location.hash !== '') {
// try to restore center, zoom-level and rotation from the URL
var hash = window.location.hash.replace('#map=', '');
var parts = hash.split('/');
if (parts.length === 4) {
zoom = parseInt(parts[0], 10);
center = [
parseFloat(parts[1]),
parseFloat(parts[2])
];
rotation = parseFloat(parts[3]);
}
}
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
target: 'map',
view: new ol.View({
center: center,
zoom: zoom,
rotation: rotation
})
});
var shouldUpdate = true;
var view = map.getView();
var updatePermalink = function() {
if (!shouldUpdate) {
// do not update the URL when the view was changed in the 'popstate' handler
shouldUpdate = true;
return;
}
var center = view.getCenter();
var hash = '#map=' +
view.getZoom() + '/' +
Math.round(center[0] * 100) / 100 + '/' +
Math.round(center[1] * 100) / 100 + '/' +
view.getRotation();
var state = {
zoom: view.getZoom(),
center: view.getCenter(),
rotation: view.getRotation()
};
window.history.pushState(state, 'map', hash);
};
map.on('moveend', updatePermalink);
// restore the view state when navigating through the history, see
// https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
window.addEventListener('popstate', function(event) {
if (event.state === null) {
return;
}
map.getView().setCenter(event.state.center);
map.getView().setZoom(event.state.zoom);
map.getView().setRotation(event.state.rotation);
shouldUpdate = false;
});
</script>
</body>
</html>
说明：
OpenLayers示例代码：固定链接
