14.在 Vue 3 中使用 OpenLayers 自定义地图版权信息

最终效果

通过本文教程，您将实现以下功能：

在地图中自定义版权信息。
加载 OpenStreetMap 图层并设置版权声明的显示内容。
使用 Vue 3 的 Composition API 构建现代化的 WebGIS 应用。

准备工作

1. 安装依赖

确保您的项目已经安装了 Vue 3 和 OpenLayers：

npm install vue@next npm install ol

实现步骤

1. 创建自定义地图组件

以下是完整的 CustomAttributionMap.vue 代码：

<!--* @Author: 彭麒* @Date: 2024/12/7* @Email: 1062470959@qq.com* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->
<template><button class="back-button" @click="goBack">返回</button><div class="container"><div class="w-full flex justify-center flex-wrap"><div class="font-bold text-[24px]">在Vue3中使用OpenLayers自定义修改版权信息</div></div><div id="vue-openlayers"></div></div>
</template><script setup>
import "ol/ol.css";
import {ref, onMounted} from "vue";
import {Map, View} from "ol";
import Tile from "ol/layer/Tile";
import {OSM} from "ol/source";
import router from "@/router";
const goBack = () => {router.push('/OpenLayers');
};
const map = ref(null);// 初始化地图
const initMap = () => {// 自定义版权信息let attributions ='<a href="" target="_blank">&copy; 个性化版权信息</a> ' +'<a href="https://blog.csdn.net/Miller777_?type=blog" target="_blank">&copy; 吉檀迦利博客</a>';// 创建地图实例map.value = new Map({target: "vue-openlayers",layers: [new Tile({source: new OSM({attributions: attributions, // 自定义版权信息}),}),],view: new View({projection: "EPSG:4326",center: [114.064839, 22.548857], // 地图中心点（深圳）zoom: 4, // 缩放级别}),});
};// 在组件挂载后初始化地图
onMounted(() => {initMap();
});</script><style scoped>
.container {width: 840px;height: 520px;margin: 0 auto;border: 1px solid #42B983;
}#vue-openlayers {width: 800px;height: 400px;margin: 0 auto;border: 1px solid #42B983;
}
</style>

2. 在主入口文件加载组件

确保在项目主文件中正确挂载组件：

main.js：

import { createApp } from "vue"; 
import App from "./App.vue"; 
createApp(App).mount("#app");

App.vue：

<template> <CustomAttributionMap /> 
</template> 
<script> 
import CustomAttributionMap from "./components/CustomAttributionMap.vue"; 
export default { components: { CustomAttributionMap, }, 
}; 
</script>