一、OpenLayer3下载
- 首先下载OpenLayer3开发包，步骤如下：
- 下载地址https://github.com/openlayers/openlayers/releases/tag/v3.20.1
- 选择对应的包
- 将对应的文件加入到项目中
二、HelloWord
代码如下
<html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GIS</title> <!-- bootstrap样式 --> <link rel="stylesheet" href="/css/bootstrap.min.css"> <!-- OpenLayer样式 --> <link rel="stylesheet" href="/css/ol.css"/> <!-- 自定义样式 --> <link rel="stylesheet" href="/css/index.css"/> <!-- JS --> <!-- <script src="/js/ol.js"></script> --> <script src="/js/ol-debug.js"></script> <script src="/js/jquery-1.4.1.js"></script> </head> <body> <div class="back-img"> <!--底层地图--> <div class="sr-1"> <div id="centerMap"></div> </div> </div> </body> <script type="text/javascript"> // 初始化地图 var map; $(function(){ initmap(); }) function initmap(){ debugger; // 初始化地图参数 map = new ol.Map({ target: 'centerMap',// DOM中地图容器的id layers: [ ],// 图层可以在地图初始化一起进行初始化也可以后期通过addLayer方法进行添加 view:new ol.View({ // 视图 center:[13380880,3535823],// 设置地图中心坐标点 zoom:8,// 设置初始化显示层级 minZoom:7,// 最小显示层级 maxZoom:14 // 最大显示层级 }) }); //创建一个使用Open Street Map地图源的瓦片图层 var tilelayers = new ol.layer.Tile({source:new ol.source.OSM()}); map.addLayer(tilelayers); } </script> </html>
下面详细解释上面地图创建中各个代码语句：
首先是说一下openlayers3的组成部分:
1). ol.map:它本身并没有什么实事需要他做，他只是一个协调者，去协调各个组成部分。对于我们开发而言，它就是一个程序的入口，我们可以通过它使用其提供的功能。
2) ol.view:即视图。它主要就是控制地图显示的位置以及层级等功能
3) ol.layer:即图层。在openlayers3中针对不同业务有着多种多样的图层类提供，而ol.layer相当于一个管理者，有效处理地图数据来源的多样性和复杂性问题。
4) ol.source:即数据源。它是整个地图背后的核心部分，如果没有数据，地图是渲染不出来。它与图层一一对应，针对不同的图层也会有不同的数据来源。
还有两个组成部分:控件（ol.control），交互（ol. interaction），这里就不细讲了，在后面用到是会提到。
现在说代码中ol.map初始化的参数：
1). target : 这个做地图开发的都懂的，就是在DOM中定义的地图容器，一般是一个div
2) layers: openlayers3支持多个图层显示，我是通过后期addlayer方法添加上去的ol.layer.Tile是ol.layer下的一个子类。主要是用来定义瓦片图层。
3) view：主要定义地图显示的中心点以及层级，可能有人疑问这个地图中心点为什么不是常见的WGS84坐标系坐标点。这主要是openlayers默认使用的墨卡托投影坐标系，当然我们也是可以使用WGS84坐标系的。