Vue3 openlayers加载瓦片地图并手动标记坐标点功能
作者：我向往自由
这篇文章主要介绍了 Vue3 openlayers加载瓦片地图并手动标记坐标点功能,我们这里用vue/cli创建,我用的node版本是18.12.1,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
一、创建Vue3项目
注：不用创建项目的可以直接跳过这块。
我们这里用vue/cli创建，我用的node版本是18.12.1。
创建前可以先配置下镜像源：npm config set registry https://registry.npmmirror.com
按下面的步骤创建即可：
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上 vue --version ## 安装或者升级你的@vue/cli npm install -g @vue/cli ## 执行创建命令 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，创建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({
// 这两个参数是你地图地点的中心点经纬度坐标
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' // 标注图标的路径
})
})
});
// 创建标注
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'
});
// 监听点击事件
map.on('click', function(event) {
// 将点击的经纬度转换为地图的像素坐标
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了就老老实实按规则走吧...
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' // 标注图标的路径
})
})
});
// 创建标注
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'
});
// 监听点击事件
map.on('click', function(event) {
// 将点击的经纬度转换为地图的像素坐标
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加载瓦片地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！