当前位置:   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博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/595209
推荐阅读
相关标签