OpenLayers5版本中引用ol.js的方式是import，如果直接復(fù)制官網(wǎng)例子到HTML中是無法運(yùn)行的，由于import是ES6中的語法，因此無法直接copy運(yùn)行，除非完整下載官網(wǎng)示例。
根據(jù)不同情況，有2種解決方法：
一、項(xiàng)目確定有聯(lián)網(wǎng)環(huán)境?？梢园凑展倬W(wǎng)的例子，使用ES6語法，但是得參考https://github.com/openlayers/ol-webpack方式；
二、無法確保項(xiàng)目有聯(lián)網(wǎng)環(huán)境，建議下載官網(wǎng)的ol.js和ol.css，在HTML中引入，在new各種ol的類的時(shí)候，加上前綴包名。下面放一個(gè)例子，先放OpenLayers官網(wǎng)的第一個(gè)例子的代碼：
<!DOCTYPE html>
<html>
<head>
<title>Accessible Map</title>
<link rel="stylesheet" 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>
<style>
a.skiplink {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
a.skiplink:focus {
clip: auto;
height: auto;
width: auto;
background-color: #fff;
padding: 0.3em;
}
#map:focus {
outline: #4A74A8 solid 0.15em;
}
</style>
</head>
<body>
<a class="skiplink" href="#map">Go to map</a>
<div id="map" class="map" tabindex="0"></div>
<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoom in</button>
<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {defaults as defaultControls} from 'ol/control.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
controls: defaultControls({
attributionOptions: {
collapsible: false
}
}),
view: new View({
center: [0, 0],
zoom: 2
})
});
document.getElementById('zoom-out').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom - 1);
};
document.getElementById('zoom-in').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom + 1);
};
</script>
</body>
</html>
下面放改造之后的代碼：
<!DOCTYPE html>
<html>
<head>
<title>Accessible Map</title>
<link rel="stylesheet" href="css/ol.css" />
<script type="text/javascript" src="js/ol.js" ></script>
<style>
a.skiplink {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
a.skiplink:focus {
clip: auto;
height: auto;
width: auto;
background-color: #fff;
padding: 0.3em;
}
#map:focus {
outline: #4A74A8 solid 0.15em;
}
</style>
</head>
<body>
<a class="skiplink" href="#map">Go to map</a>
<div id="map" class="map" tabindex="0"></div>
<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoom in</button>
<script>
// import Map from 'ol/Map.js';
// import View from 'ol/View.js';
// import {defaults as defaultControls} from 'ol/control.js';
// import TileLayer from 'ol/layer/Tile.js';
// import OSM from 'ol/source/OSM.js';
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
}),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
document.getElementById('zoom-out').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom - 1);
};
document.getElementById('zoom-in').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom + 1);
};
</script>
</body>
</html>
參考
來源：CSDN
原文：https://blog.csdn.net/masonqiang/article/details/82626731
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接！
