openlayers学习之路（一)——地图显示

openlayers是一个开源免费的js库，用于在网页中实现地图的动态显示和交互。一起看看官方对openlayers的介绍。

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector
data and markers loaded from any source. OpenLayers has been developed to further the use of
geographic information of all kinds. It is completely free, Open Source JavaScript.

需要注意的是openlayers2（以下简称ol）和ol3以上的版本有很大的差异，以最新版5.2.0为例，展开对ol的学习。
为了方便，下载ol 5.2.0,将ol.js和ol.css解压出来。

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="js/ol/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="js/ol/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
        center: ol.proj.fromLonLat([103.73,36.03]),
        zoom: 8,
        minZoom:5,
        maxZoom:12
      })
      });
    </script>
  </body>
</html>

首先，引用ol.css和ol.js，因为我们已经下载了ol库，所以使用ol的本地路径就行了，如果网络方便，可以直接在从ol网站获取。

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">

关于以上代码：

和leaflet一样，地图必须显示在一个div中，因此首先创建一个div。
target:'map' 指定了地图要显示在id为map的div中
new ol.layer.Tile({ source: new ol.source.OSM() }) 定义了一个图层,数据来源是OpenStreetMap提供的切片数据。
new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 4 }) 定义了地图的中心位置，范围和层级。
ol.proj.fromLonLat([37.41, 8.82]) 是将一个经纬度坐标转换成当前地图投影的坐标。
创建一个Map类，指定target,layers和view，就可以将地图数据显示在网页中。

上面涉及的地图组成部分有：

地图(Map)，对应的类是ol.Map ，它就是第一个入口。
图层(Layer)，对应的类是ol.layer，ol5有多种多样用于不同业务的图层，每一种图层在实现上都对应于一个类，放在包ol.layer下面，的ol.layer.Tile就是其中的一种。多个layer可以重叠在一起，相互之间互不干扰。layer相当于一个放置数据的容器，一个Map中可以有0-n个layer，Map类中有一个layers的成员变量并且它适用于此容器，为渲染的地图提供数据。
视图(View)，对应的类是ol.View，控制地图显示的中心位置，范围，层级等。一个Map只能有0或1个View。
数据源(Source)，它是和图层一一对应的，ol 5存在多种不同的数据源，每一种在实现上也对应于一个具体的类，它们都放在包ol.source下面，ol.source.OSM就是其中的一种。ol5支持多种多样在线或离线的数据源；可以是静态图或者瓦片图；也可以是栅格化的或者矢量的。如果你想在地图上加载某种格式的数据，或者某种服务提供的数据，都可以优先查看一下ol 5是否已经支持了。详情可以在官网查看Source和Layer。

对比leaflet显示一个地图的过程，两者的代码确实有比较大的差异，但是其思路是一样的：
1.创建放置地图的div；
2.从某个数据源获得数据创建layer；
3.确定地图的中心位置，层级；
4.创建map，将数据渲染到网页中。
最后展示一下结果。
在这里插入图片描述

openlayers学习之路（一)——地图显示

猜你喜欢