学习vue加OpenLayers（1）

因为我是从现在开始学习这个ol，所以案例是从官网上找的，openlayers官网
只不过我用vue重新写一遍，下面开始。

效果图

1.创建好的vue项目，执行npm i ol --save命令
2.写一个div地图容器

 <div id="map" class="map" tabindex="0"></div>
    <button id="zoom-out" @click="zoomout">Zoom out</button>
    <button id="zoom-in" @click="zoomin">Zoom in</button>

3.引入ol类

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";

4.地图方法