注意：需要在官网下载openLayers

npm install ol

OpenLayers - Get the Code

一、设置容器

注意：需要设置宽高

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

二、使用步骤

1.引入库

代码如下（示例）：

 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';
 import TileWMS from 'ol/source/TileWMS';

2.初始化地图方法

代码如下（示例）：

//地图初始化
                initMap(){
                    helper.map = new Map({
                      layers: [
                        new TileLayer({
                          source: new OSM(),
                        }),
                      ],
                      target: 'map',
                      view: 
                      new View({
                          center: [111.47, 27.24], //定义地图的经度和纬度
                          projection:'EPSG:4326',
                          zoom: 12, //定义地图显示的层级
                          maxZoom: 30 //最大缩放
                      }),
                       
                    });
                    
                    helper.map.once('postrender', function(event) {//地图加载完成
                        
                    });
                },