Vue项目中使用openlayers创建地图,供大家参考,具体内容如下 前期准备 安装node环境安装cnpm安装vue-cli 以上步骤网上都有很多教程 搭建vue项目 vue c
Vue项目中使用openlayers创建地图,供大家参考,具体内容如下
以上步骤网上都有很多教程
vue create vue-ol
按照提示一步步搭建vue项目
cd vue-ol
npm run serve
浏览器打开 Http://localhost:8080/ 就可以看到初始化的vue项目页面
cnpm i ol --s
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>
页面截图如下:
--结束END--
本文标题: vue使用openlayers创建地图
本文链接: https://www.lsjlt.com/news/146074.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0