OpenLayer3入门——[一]

Posted zyxiaohuihui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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坐标系的。












以上是关于OpenLayer3入门——[一]的主要内容,如果未能解决你的问题,请参考以下文章

openlayer3相关扩展

openlayer3中地图重复怎么获取正确的坐标点

OpenLayer3动态点线和动态点的扩散实现

openlayer3计算两点之间的距离

推荐net开发cad入门阅读代码片段

openlayer3-加载第三方地图,百度,谷歌等