Vue3 openlayers加載瓦片地圖并手動(dòng)標(biāo)記坐標(biāo)點(diǎn)功能
更新時(shí)間：2024年04月30日 15:20:01 作者：我向往自由
這篇文章主要介紹了 Vue3 openlayers加載瓦片地圖并手動(dòng)標(biāo)記坐標(biāo)點(diǎn)功能,我們這里用vue/cli創(chuàng)建,我用的node版本是18.12.1,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
一、創(chuàng)建Vue3項(xiàng)目
注：不用創(chuàng)建項(xiàng)目的可以直接跳過(guò)這塊。
我們這里用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 ## 安裝或者升級(jí)你的@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 ## 啟動(dòng) cd vue_test npm run serve
二、openlayers加載瓦片地圖（引js文件版）
2.1 將以下的文件復(fù)制到public下
2.2 index.html引入ol腳本
2.3 刪除項(xiàng)目自帶的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({
// 這兩個(gè)參數(shù)是你地圖地點(diǎn)的中心點(diǎn)經(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)聽(tīng)點(diǎn)擊事件
map.on('click', function(event) {
// 將點(diǎn)擊的經(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)注移動(dòng)到點(diǎn)擊的位置
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 啟動(dòng)項(xiàng)目測(cè)試
三、openlayers加載瓦片地圖（npm安裝依賴(lài)版）
一般來(lái)說(shuō)，引js文件這種方式不太實(shí)用，既然都用了vue3了就老老實(shí)實(shí)按規(guī)則走吧...
3.1 安裝openlayers依賴(lài)
先把package.json里加上"ol": "^7.5.2"，然后安裝ol：
npm install ol
注意：這里不知道為什么node18.12.0安裝不上ol，我就先用nvm切換到17.1.0版本安裝的ol，安裝完再切回18.12.0版本。
3.2 編寫(xiě)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)聽(tīng)點(diǎn)擊事件
map.on('click', function(event) {
// 將點(diǎn)擊的經(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)注移動(dòng)到點(diǎn)擊的位置
marker.setPosition(event.coordinate);
});
});
return {
mapContainer
};
}
};
</script>
<style>
.map {
height: 800px;
width: 2000px;
}
</style>3.3 啟動(dòng)項(xiàng)目測(cè)試即可
到此這篇關(guān)于 Vue3 openlayers加載瓦片地圖并手動(dòng)標(biāo)記坐標(biāo)點(diǎn)功能的文章就介紹到這了,更多相關(guān) Vue3 openlayers加載瓦片地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+Element-ui前端實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue+Element-ui前端實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過(guò)程
Vue3 + Vite 使用 SVG 的方法主要是為了引入和利用圖標(biāo)庫(kù)、自定義組件以及通過(guò)插件簡(jiǎn)化項(xiàng)目構(gòu)建過(guò)程,這篇文章給大家介紹了Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過(guò)程,需要的朋友可以參考下2024-07-07
Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作
這篇文章主要介紹了Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了一文詳解Vue?的雙端?diff?算法，diff?算法是渲染器中最復(fù)雜的部分，也是面試的熱點(diǎn)問(wèn)題。今天我們就通過(guò)?Vue?的?diff?算法來(lái)探究下diff?算法吧2022-06-06
這篇文章主要為大家詳細(xì)介紹了vue+Echart實(shí)現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
element表格數(shù)據(jù)部分模糊的實(shí)現(xiàn)代碼
這篇文章給大家介紹了element表格數(shù)據(jù)模糊的實(shí)現(xiàn)代碼,文中有詳細(xì)的效果展示和實(shí)現(xiàn)代碼供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01
快速修改antd?vue單個(gè)組件的默認(rèn)樣式
這篇文章主要介紹了快速修改antd?vue單個(gè)組件的默認(rèn)樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-08-08
Vue和SpringBoot之間傳遞時(shí)間的方法實(shí)現(xiàn)
本文主要介紹了Vue和SpringBoot之間傳遞時(shí)間的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue+element使用動(dòng)態(tài)加載路由方式實(shí)現(xiàn)三級(jí)菜單頁(yè)面顯示的操作
這篇文章主要介紹了vue+element使用動(dòng)態(tài)加載路由方式實(shí)現(xiàn)三級(jí)菜單頁(yè)面顯示的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了Vue AST源碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07