如何使用Openlayers 3加载谷歌离线地图

Posted 2023-04-24

参考技术A 知识地图是一种知识（既包括显性的、可编码的知识，也包括隐性知识）导航系统，并显示不同的知识存储之间重要的动态联系。它是知识管理系统的输出模块，输出的内容包括知识的来源，整合后的知识内容，知识流和知识的汇聚。它的作用是协助组织机构发掘其智力资产的价值，所有权，位置和使用方法；使组织机构内各种专家技能转化为显性知识并进而内化为组织的知识资源；鉴定并排除对知识流的限制因素；发挥机构现有的知识资产的杠杆作用。

如何将 vue3-openlayers 插件添加到 nuxt

【中文标题】如何将 vue3-openlayers 插件添加到 nuxt

【英文标题】：How to add vue3-openlayers plugin to nuxt

【发布时间】：2022-01-08 08:38:07

【问题描述】：

我在Vue3 中有以下 main.ts 文件：

import  createApp  from "vue"
import App from "./App.vue";

//How to do this in nuxt3?
import OpenLayersMap from "vue3-openlayers";
import "vue3-openlayers/dist/vue3-openlayers.css";

const app = createApp(App);

//How to do this in nuxt3?
app.use(OpenLayersMap);

app.mount("#app");

如何将 vue3-openlayers 插件添加到nuxt3？

【参考方案1】：

到auto-install a Vue plugin in Nuxt 3，在<projectDir>/plugins/ 下创建一个.js/.ts 文件（如果需要，创建目录）并使用以下样板：

// plugins/my-plugin.js
import  defineNuxtPlugin  from '#app'

export default defineNuxtPlugin(nuxtApp => 
  nuxtApp.vueApp.use(/* MyPlugin */)
)

由于vue3-openlayers依赖window，插件只能安装在客户端，所以使用.client.js扩展。

要加载vue3-openlayers 客户端，plugin 文件将如下所示：

// plugins/vue3-openlayers.client.js
import  defineNuxtPlugin  from '#app'
import OpenLayers from 'vue3-openlayers'

export default defineNuxtPlugin(nuxtApp => 
  nuxtApp.vueApp.use(OpenLayers)
)

使用以下example content from the vue3-openlayers docs 创建<projectDir>/components/MyMap.vue：

// components/MyMap.vue
<script setup>
import  ref  from 'vue'
const center = ref([40, 40])
const projection = ref('EPSG:4326')
const zoom = ref(8)
const rotation = ref(0)
</script>

<template>
  <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:400px">
    <ol-view :center="center" :rotation="rotation" :zoom="zoom"
    :projection="projection" />
    <ol-tile-layer>
        <ol-source-osm />
    </ol-tile-layer>
  </ol-map>
</template>

<style scoped>
@import 'vue3-openlayers/dist/vue3-openlayers.css';
</style>

我们只想在客户端渲染MyMap，因为插件只是客户端，所以使用<ClientOnly> component作为包装器：

// app.vue
<template>
  <ClientOnly>
    <MyMap />
    <template #fallback> Loading map... </template>
  </ClientOnly>
</template>

demo