OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。
要在你的网页中使用OpenLayers(现用版本：v3.19,1)，需要在head中做以下引用：
OpenLayers css样式引用：
<link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
OpenLayers js文件引用：
<script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
对低版本浏览器的API填充（polyfill）：
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
polyfill:大致是在低版本浏览器对API新特性不支持时，作为辅助实现API功能的东西。
通过以上的标签连接到OpenLayers 相应的文件。简单的说，有了上面的几个标签，在body部分写脚本时相应的类（如下面的：ol.Map,ol.layer.Tile等）才会起作用。下面贴一个完整的简单例子：
<!DOCTYPE html>
<html>
<head>
<title>Accessible Map</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.19.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/v3.19.1/build/ol.js"></script>
<style>
#map:focus {
outline: #4A74A8 solid 0.15em;
}
</style>
</head>
<body>
<div id="map" class="map" tabindex="0"></div>
<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoom in</button>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: ‘map‘,
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.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>
对OpenLayers的使用有了一个简单的认识后，开始在OpenLayers官网http://openlayers.org/上下载API进行更深入的学习。
下载后的API文件结构如下：
每个文件夹下存放什么内容需要自己使用时慢慢探索清楚。
时间： 2025-01-11 14:03:12