openlayer3 基础学习一创建&显示地图

<!doctype html>

<html lang="en">

  <head>

    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">

    <style>

      .map {

        height: 400px;

        width: 100%;

      }

    </style>

    <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></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([37.41, 8.82]), 

          zoom: 4

        })

      });

    </script>

  </body>

</html>

注意，其实上面这段代码就只有一条语句:

new ol.Map({...});

其他代码只是用于设置地图的构造参数。由此可以推测出ol.Map是最主要的地图类，创建地图就需要构造这么一个对象。接下来依次分析每一个参数部分的代码。

参数layers:
```
layers: [

            // 创建一个使用Open Street Map地图源的瓦片图层

            new ol.layer.Tile({source: new ol.source.OSM()})

          ],
```
从名字和具体的值可见这个地方可以设置多个layer，它是OpenLayers 3地图的组成结构单元，地图是由多个layer组成的，这种设计类似于Photoshop里面的图层，多个图层是可以叠加的，在最上面的会覆盖下面的，以此类推。在代码中我们添加了一个Open Street Map的地图layer。

参数view：

view: new ol.View({

            center: [0, 0],    // 定义地图显示中心于经度0度，纬度0度处

            zoom: 2            // 并且定义地图显示层级为2

          }),

通过字面意思可以看出，它为地图定义显示窗口，对应ol.View类，可以自定义地图显示的中心点，缩放层级等。

参数target：
```
target: 'map'
```
指定地图在页面中具体哪个位置进行显示，为此要记住地图显示还是离不开使用dom来实现。虽然和地图业务没什么关系，但也必不可少，因为它是Web GIS，最基本的还是依赖于HTML。

通过上面的源码解读，我们可以发现OpenLayers 3地图主要是由layer和view组成，layer可以有多个，view只能有一个。

秒客网

openlayer3 基础学习一创建&显示地图

相关文章