OpenLayers学习笔记初级篇（一、地图加载）

开源的地图包做的比较优秀比较好的就是OpenLayers了，下面我将用我的学习笔记带领一些没接触过OpenLayers的同学进行学习，目前初步将学习笔记分为初级基础篇，中级进阶篇和高级应用篇，我将通过一个个小的demo进行学习，比较有助于大家加深记忆和动手编码能力，下面我们进行初级基础的学习！

1、OpenLayers 3简介

OpenLayers 3简称ol3，它是一个开源的Web GIS引擎，使用了JavaScript、最新的HTML5技术及CSS技术，支持dom，canvas和webgl三种渲染方式。除了支持网页端，还支持移动端（目前移动端还不成熟，有待进一步完善）。在地图数据源方面，支持各种类型的瓦片地图，既支持在线的，也支持离线的。比如OSM, Bing, MapBox, Stamen, MapQuest等等；还支持各种矢量地图，比如GeoJSON，TopoJSON，KML，GML等等。随着OpenLayers 3的进一步发展，将支持更多的地图类型。

2、代码编辑器的选择，这笔我用的是HBuilder，当然还有许多别的可用，比如VSCode、Idea、等等。好了，废话少说我们直接进行第一个OpneLayers地图的加载！我将以源码的形式进行展示！

首先我们在HBuilder中新建一个Web项目，名为OpenLayers初级，如下图所示：

然后我们需要去OpenLayers的官网下载他们的开发包，即ol.js和 ol.css等文件。这个网上也有很多，这里不再赘述，如果有需要可以在下面评论，我发给你。下载下来后把openLlayers对应的css和js文件分别放入对应的包文件下如下图：

好了，下面我们可以写页面加载地图了！

先看一下运行后的效果：

说明我们已经成功将地图加载出来了，我再稍微说一下地图加载相关部分的代码：

其实创建地图的代码就下面一句话：

new ol.Map({...});

然后我们设置地图的图层加载相关参数Layer和地图的显示相关的参数View ，还有一个地图指向的Dom元素target，总结起来就是一个地图要包括图层Layer、显示View和HTML的Dom元素相绑定的target。还有一个重点就是每一个Layer都必须对应一个数据源Source！

下一章节我们将进行地图基本功能的开发！大家加油！