Vue3openlayers加载瓦片地图并手动标记坐标点功能，
目录
-
一、创建Vue3项目
-
二、openlayers加载瓦片地图（引js文件版）
-
2.1 将以下的文件复制到public下
-
2.2 index.html引入ol脚本
-
2.3 删除项目自带的HelloWorld.vue，创建Map.vue
-
2.4 编码Map.vue
-
2.5 修改App.vue
-
2.6 启动项目测试
-
三、openlayers加载瓦片地图（npm安装依赖版）
-
3.1 安装openlayers依赖
-
3.2 编写Map.vue代码
-
3.3 启动项目测试即可
一、创建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加载瓦片地图内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！
您可能感兴趣的文章:
-
Vue使用openlayers加载天地图
-
Vue+OpenLayers 创建地图并显示鼠标所在经纬度(完整代码)
-
vue使用openlayers创建地图
-
vue使用天地图、openlayers实现多个底图叠加显示效果
-
vue利用openlayers加载天地图和高德地图
-
vue-openlayers实现地图坐标弹框效果
-
Vue+Openlayers实现实时坐标点展示
评论已被关闭
