vue使用openlayers创建地图
作者：yuelianng0921
这篇文章主要为大家详细介绍了vue项目中使用openlayers创建地图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue项目中使用openlayers创建地图，供大家参考，具体内容如下
前期准备
- 安装node环境
- 安装cnpm
- 安装vue-cli
以上步骤网上都有很多教程
搭建vue项目
vue create vue-ol
按照提示一步步搭建vue项目
cd vue-ol npm run serve
浏览器打开 http://localhost:8080/ 就可以看到初始化的vue项目页面
vue项目安装openlayers
cnpm i ol --s
main.js中引入ol.css
import 'ol/ol.css';
创建地图组件MapContainer.vue
<template>
<div class="map" id="map"></div>
</template>
<script>
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';
export default {
name: "MapContainer",
methods:{
createMap(){
let map = new Map({
layers: [new TileLayer({
source: new OSM(),
}) ],
target: 'map',
view: new View({
maxZoom: 18,
center: fromLonLat([108.92,34.28]),
zoom: 10,
}),
});
}
},
mounted(){
this.createMap()
}
};
</script>
<style scoped>
.map {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background: #1f3064;
}
</style>在home.vue中引入地图组件
<template>
<div class="home">
<MapContainer msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import MapContainer from '@/components/MapContainer.vue'
export default {
name: 'Home',
components: {
MapContainer
}
}
</script>
<style>
.home{
height: 100%;
position: relative;
}
</style>页面截图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。