OpenLayer3入门——[一]

一、OpenLayer3下载

  • 首先下载OpenLayer3开发包,步骤如下:
  • 下载地址https://github.com/openlayers/openlayers/releases/tag/v3.20.1
  • 选择对应的包
  • 将对应的文件加入到项目中

OpenLayer3入门——[一]_第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>GIStitle>
        
        <link rel="stylesheet" href="/css/bootstrap.min.css">
        
        <link rel="stylesheet" href="/css/ol.css"/>
        
        <link rel="stylesheet" href="/css/index.css"/>
        
        
        <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坐标系的。

你可能感兴趣的:(OpenLayer3入门——[一])