Vue3 openlayers加載瓦片地圖并手動標記坐標點功能
更新時間：2024年04月30日 15:20:01 作者：我向往自由
這篇文章主要介紹了 Vue3 openlayers加載瓦片地圖并手動標記坐標點功能,我們這里用vue/cli創(chuàng)建,我用的node版本是18.12.1,本文結合示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
一、創(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 將以下的文件復制到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)緯度坐標
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)
]
});
// 添加標注層
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' // 標注圖標的路徑
})
})
});
// 創(chuàng)建標注
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 // 添加標注層到地圖
],
overlays: [marker], // 添加標注到地圖
target: 'map'
});
// 監(jiān)聽點擊事件
map.on('click', function(event) {
// 將點擊的經(jīng)緯度轉換為地圖的像素坐標
var feature = new ol.Feature({
geometry: new ol.geom.Point(event.coordinate)
});
// 將標注添加到標注層
markerLayer.getSource().addFeature(feature);
// 將標注移動到點擊的位置
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)
]
});
// 添加標注層
var markerLayer = new VectorLayer({
source: new VectorSource(),
style: new Style({
image: new Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'marker.png' // 標注圖標的路徑
})
})
});
// 創(chuàng)建標注
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 // 添加標注層到地圖
],
overlays: [marker], // 添加標注到地圖
target: 'map'
});
// 監(jiān)聽點擊事件
map.on('click', function(event) {
// 將點擊的經(jīng)緯度轉換為地圖的像素坐標
var feature = new Feature({
geometry: new Point(event.coordinate)
});
// 將標注添加到標注層
markerLayer.getSource().addFeature(feature);
// 將標注移動到點擊的位置
marker.setPosition(event.coordinate);
});
});
return {
mapContainer
};
}
};
</script>
<style>
.map {
height: 800px;
width: 2000px;
}
</style>3.3 啟動項目測試即可
到此這篇關于 Vue3 openlayers加載瓦片地圖并手動標記坐標點功能的文章就介紹到這了,更多相關 Vue3 openlayers加載瓦片地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue+Element-ui前端實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
Vue3+vite實現(xiàn)使用svg可改變顏色的全過程
Vue3 + Vite 使用 SVG 的方法主要是為了引入和利用圖標庫、自定義組件以及通過插件簡化項目構建過程,這篇文章給大家介紹了Vue3+vite實現(xiàn)使用svg可改變顏色的全過程,需要的朋友可以參考下2024-07-07
Vue執(zhí)行方法,方法獲取data值,設置data值,方法傳值操作
這篇文章主要介紹了Vue執(zhí)行方法,方法獲取data值,設置data值,方法傳值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了一文詳解Vue?的雙端?diff?算法，diff?算法是渲染器中最復雜的部分，也是面試的熱點問題。今天我們就通過?Vue?的?diff?算法來探究下diff?算法吧2022-06-06
這篇文章主要為大家詳細介紹了vue+Echart實現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
element表格數(shù)據(jù)部分模糊的實現(xiàn)代碼
這篇文章給大家介紹了element表格數(shù)據(jù)模糊的實現(xiàn)代碼,文中有詳細的效果展示和實現(xiàn)代碼供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了快速修改antd?vue單個組件的默認樣式方式，具有很好的參考價值，希望對大家有所幫助。2022-08-08
Vue和SpringBoot之間傳遞時間的方法實現(xiàn)
本文主要介紹了Vue和SpringBoot之間傳遞時間的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
vue+element使用動態(tài)加載路由方式實現(xiàn)三級菜單頁面顯示的操作
這篇文章主要介紹了vue+element使用動態(tài)加載路由方式實現(xiàn)三級菜單頁面顯示的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了Vue AST源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07