本博客合集是我的openlayers学习笔记，希望能帮助到刚开始接触openlayers的同学
@commnet 所用openlayers版本：v5.3.0
@commnet 阅读本文前需要对前端知识有一定的了解
@comment 本文内容只提供参考，建议结合openlayers官网的API和examples来学习
@comment 部分代码参考了@老胡
openlayers框架的根对象为ol，一切变量和方法都由ol直接或间接调用。
本文将创建一个简单的地图，用到的数据结构如下
ol.Map为ol地图类，创建ol地图后，返回地图对象，此对象可由三个（但不限于）参数构成：target、layers和view。
target参数指向地图容器<div id="map"></div>。
layers参数指向地图的图层集合，该集合必须有一个底图图层，这里使用ol.layer.Tile地图数据类型，数据源使用ol.source.OSM()。
view参数指向ol.View对象，该对象包含了决定地图展示方式的一些信息，如缩放等级zoom、地图中心点center等。
其他参数，但对创建一个简单地图来说并不是必要的。
现在可以使用以上的数据结构实现一个简单的地图，步骤如下
- 引入openlayers的css和js文件
<link rel="stylesheet" href="../include/ol.css" type="text/css">
<script src="../include/ol.js"></script>
- 创建一个存放地图的容器。
<div id="map"></div>
- 创建ol.Map对象。
//创建一个ol.Map对象
var map = new ol.Map({
//layers指向了地图图层集合，这里只用了一个底图图层ol.layer.Tile
//source参数指向了地图数据源，使用ol.source.OSM（此外还可以使用百度地图、google地图、Bing地图等）
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
//target指向存放地图的容器，值为容器标签的id属性
target: 'map',
//view指向了ol.View对象，并设置了地图中心点为[0,0]和缩放级别zoom为2
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
至此，一个简单的地图创建完成，可在浏览器中查看效果
