OpenLayer3入门—

OpenLayer3入门——[一]

一、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坐标系的。