vue使用openlayers創(chuàng)建地圖
更新時(shí)間：2022年04月15日 09:55:45 作者：yuelianng0921
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中使用openlayers創(chuàng)建地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
vue項(xiàng)目中使用openlayers創(chuàng)建地圖，供大家參考，具體內(nèi)容如下
前期準(zhǔn)備
- 安裝node環(huán)境
- 安裝cnpm
- 安裝vue-cli
以上步驟網(wǎng)上都有很多教程
搭建vue項(xiàng)目
vue create vue-ol
按照提示一步步搭建vue項(xiàng)目
cd vue-ol npm run serve
瀏覽器打開(kāi) http://localhost:8080/ 就可以看到初始化的vue項(xiàng)目頁(yè)面
vue項(xiàng)目安裝openlayers
cnpm i ol --s
main.js中引入ol.css
import 'ol/ol.css';
創(chuàng)建地圖組件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>頁(yè)面截圖如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
本文主要介紹了vue中使用typescript配置，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue 遮罩層阻止默認(rèn)滾動(dòng)事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
使用vue3+ts+setup獲取全局變量getCurrentInstance的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于使用vue3+ts+setup獲取全局變量getCurrentInstance的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-08-08
Element中Upload組件上傳功能實(shí)現(xiàn)(圖片和文件的默認(rèn)上傳及自定義上傳)
這篇文章主要介紹了Element中Upload組件上傳功能實(shí)現(xiàn)包括圖片和文件的默認(rèn)上傳及自定義上傳,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
Vue3子組件watch無(wú)法監(jiān)聽(tīng)父組件傳遞的屬性值的解決方法
這篇文章主要介紹了Vue3子組件watch無(wú)法監(jiān)聽(tīng)父組件傳遞的屬性值的解決方法,文中通過(guò)代碼示例講解的講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-10-10
詳解vue-meta如何讓你更優(yōu)雅的管理頭部標(biāo)簽
這篇文章主要介紹了詳解vue-meta如何讓你更優(yōu)雅的管理頭部標(biāo)簽，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue結(jié)合axios與后端進(jìn)行ajax交互的方法
本篇文章主要介紹了vue結(jié)合axios與后端進(jìn)行ajax交互的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
本篇文章主要介紹了vue使用watch 觀察路由變化，重新獲取內(nèi)容 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
手把手教你vue實(shí)現(xiàn)動(dòng)態(tài)路由
動(dòng)態(tài)路由可以根據(jù)不同用戶登錄獲取不一樣的路由層級(jí),可隨時(shí)調(diào)配路由,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件（已發(fā)布到npm的vue2插件，開(kāi)箱即用）
這篇文章主要介紹了vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件（已發(fā)布到npm的vue2插件，開(kāi)箱即用） ,需要的朋友可以參考下2018-11-11