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

在 WebGIS 开发中，默认的地图服务通常会带有版权信息，但有时候我们需要根据项目需求自定义版权信息或添加额外的版权声明。在本文中，我们将基于 Vue 3 的 Composition API 和 OpenLayers，完成自定义地图版权信息的实现。

---

最终效果

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

1. 在地图中自定义版权信息。
2. 加载 OpenStreetMap 图层并设置版权声明的显示内容。
3. 使用 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>

---

效果截图

以下是代码运行后的效果截图：

地图加载并显示自定义版权信息

---

开发注意事项

1. OpenLayers 版本兼容性

   本文基于 OpenLayers 最新版本开发，请确保安装的 ol 版本为 6.0+。

2. 版权信息的合法性

   如果您需要修改默认版权信息，请确保符合地图服务的使用条款（例如 OpenStreetMap 的使用规则）。

3. 扩展自定义功能

   除了自定义版权信息，您还可以修改其他控件或添加新的交互功能。

---

总结

通过本文教程，您学会了在 Vue 3 中使用 OpenLayers 自定义地图版权信息的基本方法。这种方式不仅可以满足项目的个性化需求，还能帮助提升地图展示的专业性。

如果您在使用中遇到问题，欢迎在评论区留言。

更多 Vue 和 OpenLayers 相关内容，请持续关注我的博客！

---

点赞、收藏、关注是对我最大的支持！ 😊