当前位置:   article > 正文

学习vue加OpenLayers(1)_npm i ol

npm i ol

因为我是从现在开始学习这个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>
  • 1
  • 2
  • 3

3.引入ol类

import "ol/ol.css";
import Map from "ol/Map";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile"
  • 1
  • 2
  • 3
本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签