Vue3 openlayers加載瓦片地圖并手動標(biāo)記坐標(biāo)點功能
更新時間：2024年04月30日 15:20:01 作者：我向往自由
這篇文章主要介紹了 Vue3 openlayers加載瓦片地圖并手動標(biāo)記坐標(biāo)點功能,我們這里用vue/cli創(chuàng)建,我用的node版本是18.12.1,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
一、創(chuàng)建Vue3項目
注：不用創(chuàng)建項目的可以直接跳過這塊。
我們這里用vue/cli創(chuàng)建，我用的node版本是18.12.1。
創(chuàng)建前可以先配置下鏡像源：npm config set registry https://registry.npmmirror.com
按下面的步驟創(chuàng)建即可：
## 查看@vue/cli版本，確保@vue/cli版本在4.5.0以上 vue --version ## 安裝或者升級你的@vue/cli npm install -g @vue/cli ## 執(zhí)行創(chuàng)建命令 vue create vue_test ## 隨后選擇3.x ## Choose a version of Vue.js that you want to start the project with (Use arrow keys) ## > 3.x ## 2.x ## 啟動 cd vue_test npm run serve
二、openlayers加載瓦片地圖（引js文件版）
2.1 將以下的文件復(fù)制到public下
2.2 index.html引入ol腳本
2.3 刪除項目自帶的HelloWorld.vue，創(chuàng)建Map.vue
2.4 編碼Map.vue
<template>
<div class="map" id="map" ref="mapContainer"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
export default {
name: 'MapComponent',
setup() {
const mapContainer = ref(null);
onMounted(() => {
var BaseMapLayer = function(options) {
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: options.url,
tilePixelRatio: 1,
minZoom:2,
maxZoom:17
})
});
return layer;
};
var view = new ol.View({
// 這兩個參數(shù)是你地圖地點的中心點經(jīng)緯度坐標(biāo)
center: ol.proj.fromLonLat([120, 17]),
zoom: 13,
minZoom: 13,
maxZoom: 17
});
var sateliteopt = {
url: '/tiles/{z}/{x}/{y}.png'
};
var sate = new ol.layer.Group({
layers: [
new BaseMapLayer(sateliteopt)
]
});
// 添加標(biāo)注層
var markerLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: '/marker.png' // 標(biāo)注圖標(biāo)的路徑
})
})
});
// 創(chuàng)建標(biāo)注
var marker = new ol.Overlay({
element: document.getElementById('marker'),
positioning: 'center-center',
stopEvent: false,
offset: [0, -23]
});
var map = new ol.Map({
view: view,
layers: [
sate,
markerLayer // 添加標(biāo)注層到地圖
],
overlays: [marker], // 添加標(biāo)注到地圖
target: 'map'
});
// 監(jiān)聽點擊事件
map.on('click', function(event) {
// 將點擊的經(jīng)緯度轉(zhuǎn)換為地圖的像素坐標(biāo)
var feature = new ol.Feature({
geometry: new ol.geom.Point(event.coordinate)
});
// 將標(biāo)注添加到標(biāo)注層
markerLayer.getSource().addFeature(feature);
// 將標(biāo)注移動到點擊的位置
marker.setPosition(event.coordinate);
});
});
return {
mapContainer
};
}
};
</script>
<style>
.map {
height: 100%;
width: 100%;
}
</style>2.5 修改App.vue
<template>
<MapComponent/>
</template>
<script>
import MapComponent from './components/Map.vue'
export default {
name: 'App',
components: {
MapComponent
}
}
</script>
<style>
</style>2.6 啟動項目測試
三、openlayers加載瓦片地圖（npm安裝依賴版）
一般來說，引js文件這種方式不太實用，既然都用了vue3了就老老實實按規(guī)則走吧...
3.1 安裝openlayers依賴
先把package.json里加上"ol": "^7.5.2"，然后安裝ol：
npm install ol
注意：這里不知道為什么node18.12.0安裝不上ol，我就先用nvm切換到17.1.0版本安裝的ol，安裝完再切回18.12.0版本。
3.2 編寫Map.vue代碼
<template>
<div class="map" id="map" ref="mapContainer"></div>
</template>
<script>
import "ol/ol.css";
import { onMounted, ref } from 'vue';
import { Icon, Style }from "ol/style";
import Map from "ol/Map";
import Overlay from "ol/Overlay";
import View from "ol/View";
import Point from "ol/geom/Point.js";
import Feature from "ol/Feature.js";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import VectorLayer from "ol/layer/Vector";
import {fromLonLat } from "ol/proj";
import Group from "ol/layer/Group";
import VectorSource from "ol/source/Vector";
export default {
name: 'MapComponent',
setup() {
const mapContainer = ref(null);
onMounted(() => {
var BaseMapLayer = function(options) {
var layer = new TileLayer({
source: new XYZ({
url: options.url,
tilePixelRatio: 1,
minZoom:2,
maxZoom:17
})
});
return layer;
};
var view = new View({
center: fromLonLat([200, 18.1]),
zoom: 13,
minZoom: 13,
maxZoom: 17
});
var sateliteopt = {
url: 'tiles/{z}/{x}/{y}.png'
};
var sate = new Group({
layers: [
new BaseMapLayer(sateliteopt)
]
});
// 添加標(biāo)注層
var markerLayer = new VectorLayer({
source: new VectorSource(),
style: new Style({
image: new Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'marker.png' // 標(biāo)注圖標(biāo)的路徑
})
})
});
// 創(chuàng)建標(biāo)注
var marker = new Overlay({
element: document.getElementById('marker'),
positioning: 'center-center',
stopEvent: false,
offset: [0, -23]
});
var map = new Map({
view: view,
layers: [
sate,
markerLayer // 添加標(biāo)注層到地圖
],
overlays: [marker], // 添加標(biāo)注到地圖
target: 'map'
});
// 監(jiān)聽點擊事件
map.on('click', function(event) {
// 將點擊的經(jīng)緯度轉(zhuǎn)換為地圖的像素坐標(biāo)
var feature = new Feature({
geometry: new Point(event.coordinate)
});
// 將標(biāo)注添加到標(biāo)注層
markerLayer.getSource().addFeature(feature);
// 將標(biāo)注移動到點擊的位置
marker.setPosition(event.coordinate);
});
});
return {
mapContainer
};
}
};
</script>
<style>
.map {
height: 800px;
width: 2000px;
}
</style>3.3 啟動項目測試即可
到此這篇關(guān)于 Vue3 openlayers加載瓦片地圖并手動標(biāo)記坐標(biāo)點功能的文章就介紹到這了,更多相關(guān) Vue3 openlayers加載瓦片地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue改變對象或數(shù)組時的刷新機(jī)制的方法總結(jié)
這篇文章主要介紹了vue改變對象或數(shù)組時的刷新機(jī)制的方法總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了在vue3中使用import.meta.env方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章給大家分享了基于vue實現(xiàn)一個簡單的MVVM框架的相關(guān)內(nèi)容，有需要的朋友們可以參考學(xué)習(xí)下。2018-08-08
詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue使用數(shù)組splice方法失效,且總刪除最后一項的問題及解決
這篇文章主要介紹了vue使用數(shù)組splice方法失效,且總刪除最后一項的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue實現(xiàn)頁面跳轉(zhuǎn)方式及傳參方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue render函數(shù)實戰(zhàn)之實現(xiàn)tabs選項卡組件
這篇文章主要介紹了Vue render函數(shù)實戰(zhàn)之實現(xiàn)tabs選項卡組件的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了如何封裝一個隨機(jī)驗證碼的VUE組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
Vue-loader 是 Webpack 的加載模塊，它使我們可以用 Vue 文件格式編寫單文件組件。這篇文章主要介紹了Vue.js的高級面試題以及答案,需要的朋友可以參考下2020-01-01
前端配合后端實現(xiàn)Vue路由權(quán)限的方法實例
一開始我還以為vue的路由只能用在工程化的項目里面,其實不然,下面這篇文章主要給大家介紹了關(guān)于前端配合后端實現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05