这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

安装ol依赖包

本章教程安装的ol是6.9.0版本的。

npm install ol

组件中的配置

先在布局中创建一个div，充当地图存放的容器，通过id来进行初始化绑定。

先引入初始化地图需要的类。

  import 'ol/ol.css';
  import Map from 'ol/Map'; //地图初始化
  import OSM from 'ol/source/OSM';
  import TileLayer from 'ol/layer/Tile';
  import View from 'ol/View';

ol.css文件通常是缩放按钮和鹰眼比例尺等功能的样式配置，这里就不介绍了。

Map 是 OpenLayers 的核心组件。其实就是初始化地图的一个入口，初始化完后该对象下挂载的很多实例与方法。

TileLayer 是 OpenLayers 的图层中的一种,瓦片图层，通常适用于地图底图服务的加载，与对应服务类型相对应，下一章将单独介绍下不同的地图服务加载类。

OSM 每个图层下都有一个source类，osm是对第三方地图服务osm加载的封装类。

View 表示地图的简单 2D 视图。用于更改地图的中心、分辨率和旋转的对象。

OpenStreetMap（简称OSM） 开源wiki地图，很多人们习以为常可以随便拿来用的地图，其实有很多法律和技术上的限制，这些限制使得像地图这类的地理资讯无法有创意、有效率地被再利用。开放街道地图成立动机在于希望能创造并且提供可以被自由地使用的地理资料（像街道地图）给每个想使用的人，就像自由软件所赋予使用者的自由一样。

dom节点

先在布局中创建一个div，充当地图存放的容器，通过id来进行初始化绑定。

<div id="openlayers" class="map"></div>

div的样式设置

 .map{
    width: 100%;
    height: 100%;
    position: absolute;
  }

初始化地图

定义地图初始化函数

    methods: {
      init(){
       const map = new Map({
         layers: [
           new TileLayer({
             source: new OSM(),
           }),
         ],
         target: 'openlayers',
         view: new View({
           center: [0, 0],
           zoom: 2,
         }),
       }); 
      }
    },

组件mounted的时候调用初始化函数

    mounted() {
      this.init()
    },

最终效果