这篇短文说明了如何在网页上插入一个简单的地图。
不过，就开发而言，我们强烈推荐将请求和它依赖的内容部绑定起来，详见创建一个OpenLayers请求说明手册。
1.在页面上放一个地图
下面是一个完整的例子：新建一个文件，将下面的代码复制进去，然后在浏览器中打开。
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
2.理解地图是如何生成的
想要在页面上插入地图，需要做三件事：
- 引入 OpenLayers；
- 容纳地图的容器 div 块；
- 创建地图的 JS 代码。
引入OpenLayers
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
第一部分是引入JavaScript库。在这里由于只做介绍，直接引用的OpenLayers源网站的JavaScript库。如果在开发环境，我们会创建一个仅包含应用必需组件的用户版js库。
提示： 如果OpenLayers要应用于旧版本平台例如 IE 或 Android 4.x，那么在引入OpenLayers之前，还需要一个js文件：
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
容纳地图的 div 块
<div id="map" class="map"></div>
请求的地图放在一个 div 中，通过给这个 div 设置CSS样式，可以控制地图的宽高和边界等元素。下列的CSS代码的作用是将地图设置为400px高，与浏览器等宽：
<style>
.map {
height: 400px;
width: 100%;
}
</style>
创建地图的js代码
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
使用这段js代码，就生成了非洲东海岸可缩放的OSM层地图对象。接下来我们将代码拆分讲解一下：
下面这行代码的意思是创建一个OpenLayers地图对象，如果只有一行，什么也不会发生，因为没有任何层或者交互与它绑定在一起。
var map = new ol.Map({ ... });
在地图对象中添加一个叫做“target”的参数，可以将地图绑定到 div 容器中，它的取值为 div 的 ID：
target: 'map'
数组 layer: [...]用来定义地图中所有可用的层，下面的第一个也是唯一一个层是一个瓦片层：
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
在OpenLayers中有三种类型的layer：Image（图片）、Tile（瓦片）和Vector（矢量），每个layer必然包含一个source。source 是获取地图的协议。
Map的下一个对象是View。View可以用来指定地图的中心、分辨率以及旋转。定义View最简单的方法就是定义一个中心点（center）和一个缩放等级（zoom）。要记得缩放等级为0时代表着缩小。
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
你会发现指定的中心点是在经度/纬度坐标系（EPSG:4326）。既然我们用的唯一的layer默认使用的是球形墨托卡投影(EPSG:3857坐标)，我们可以通过转换对它们重新设定，以便能将地图在合适的坐标系中进行缩放。
网友评论