基础知识系列（三）：Vue3设置全局变量和地图挂载全局

1.设置全局变量的方法一

在main.js即入口文件中

const app = createApp(App);
app.config.globalProperties.$map = "map";
app.mount('#app')

在App.vue即组件文件中

import {getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance();
console.log(proxy.$map)

2.设置全局变量的方法二

在main.js中

const app = createApp(App);
app.provide("$http", "http")

在App.vue中

import {inject} from 'vue'
const $http = inject("$http");
console.log($http)

3.地图挂载全局的方法一

在main.js中

const app = createApp(App)
export const $prototype = app.config.globalProperties
app.mount('#app')

在OpenMap.vue中

import { onMounted } from "vue";
import { gaode_vector } from "../libs/gaode";
import { $prototype } from "../main";
onMounted(() => {
  const map = new ol.Map({
    target: "map",
    layers: [gaode_vector],
    view: new ol.View({
      center: [114.3, 30.5],
      zoom: 4,
      projection: "EPSG:4326",
    }),
  });
  $prototype.$map = map;
});

在OpenControl.vue中

import { onMounted, getCurrentInstance } from "vue";
onMounted(() => {
  const { proxy } = getCurrentInstance();
  console.log(proxy.$map);
});

在App.vue中

<template>
  <div>
    <open-map></open-map>
    <open-control></open-control>
  </div>
</template>

<script setup>
import OpenMap from './components/OpenMap.vue'
import OpenControl from './components/OpenControl.vue'
</script>

<style lang="scss" scoped>
</style>

4.地图挂载全局的方法二

在main.js中

export const app = createApp(App)

在OpenMap.vue中

import { onMounted } from "vue";
import { gaode_vector } from "../libs/gaode";
import {app} from '../main'
onMounted(() => {
  const map = new ol.Map({
    target: "map",
    layers: [gaode_vector],
    view: new ol.View({
      center: [114.3, 30.5],
      zoom: 4,
      projection: "EPSG:4326",
    }),
  });
  app.provide('$map',map)
});

在OpenControl.vue中

import { onMounted, inject } from "vue";
onMounted(() => {
  const $map = inject("$map")
  console.log($map.getLayers());
});

在App.vue中

<template>
  <div>
    <open-map></open-map>
    <open-control></open-control>
  </div>
</template>

<script setup>
import OpenMap from './components/OpenMap.vue'
import OpenControl from './components/OpenControl.vue'
</script>

<style lang="scss" scoped>
</style>

PS：

1.删包：git bash终端 rm -rf node_modules Linux命令

2.API：接口；SDK：软件开发包

3.将OL_SDK和libs（Libraries 的缩写）文件夹放在src文件夹下