在本教程中，您將學(xué)習(xí)如何創(chuàng)建一個(gè) Vue.js 組件來(lái)使用 MapLibre GL JS 渲染地圖。我們將一起制作一個(gè)簡(jiǎn)單的全屏地圖應(yīng)用程序，作為如何將MapTiler地圖與Vue.js和MapLibre GL .js JS一起使用的示例。

在本教程結(jié)束時(shí)，您將能夠在指定位置創(chuàng)建帶有標(biāo)記的全屏地圖。您的最終地圖將如下所示：

開(kāi)始

完成本教程的最低要求。

• Vue的一些經(jīng)驗(yàn).js對(duì)于本教程，您不需要太多使用 Vue.js 的經(jīng)驗(yàn)，但您應(yīng)該熟悉基本概念和工作流程。

• MapTiler API key.您的MapTiler帳戶訪問(wèn)密鑰位于您的MapTiler云帳戶頁(yè)面上或免費(fèi)獲取API密鑰。

• MapLibre GL JS.用于構(gòu)建 Web 地圖的 JavaScript 庫(kù)。在本教程中，您將學(xué)習(xí)如何安裝它。

• Node.js 和 npm。在本地運(yùn)行 Vue.js 應(yīng)用程序是必需的。節(jié)點(diǎn).js

• Vue CLI。你需要安裝 Vue CLI。要安裝 Vue CLI，請(qǐng)打開(kāi)終端窗口并運(yùn)行以下命令：

npm install -g @vue/cli

創(chuàng)建應(yīng)用

在此步驟中，我們將學(xué)習(xí)如何創(chuàng)建 Vue.js 應(yīng)用程序。

要?jiǎng)?chuàng)建一個(gè)新的 Vue.js 項(xiàng)目，請(qǐng)?jiān)诿钚兄羞\(yùn)行：

vue create my-vue-map

該命令會(huì)提示您輸入有關(guān)要包含在初始應(yīng)用程序中的功能的信息。選擇該選項(xiàng)。vue createDefault (Vue 3) ([Vue 3] babel, eslint)

使用箭頭鍵并按 Enter 或 Return 鍵選擇一個(gè)選項(xiàng)。Vue CLI 安裝必要的 Vue.js npm 包和其他依賴項(xiàng)，并創(chuàng)建一個(gè)新的工作區(qū)和一個(gè)簡(jiǎn)單的歡迎應(yīng)用程序，準(zhǔn)備運(yùn)行。有關(guān)更多信息，請(qǐng)參閱創(chuàng)建項(xiàng)目。

導(dǎo)航到新創(chuàng)建的項(xiàng)目文件夾my-vue-map

cd my-vue-map

在新創(chuàng)建的項(xiàng)目文件夾中，運(yùn)行以啟動(dòng)本地環(huán)境。您會(huì)發(fā)現(xiàn)您的應(yīng)用程序在地址上運(yùn)行。npm run servehttp://localhost:8080/

現(xiàn)在，您應(yīng)該在瀏覽器中看到該應(yīng)用程序。

安裝和設(shè)置

要安裝 MapLibre GL 庫(kù)，請(qǐng)導(dǎo)航到您的項(xiàng)目文件夾并運(yùn)行以下命令：

npm i maplibre-gl

導(dǎo)航到該文件夾并刪除文件的所有內(nèi)容。在文件中寫(xiě)入以下行srcApp.vueApp.vue

<template>
  <div class="app">
    This is my map App  </div></template><script>export default {
  name: 'App',
  components: {
  }}</script><style>body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;}.app {
  text-align: center;}</style>

現(xiàn)在，您應(yīng)該在瀏覽器中看到“這是我的地圖應(yīng)用程序”。

導(dǎo)航到文件夾并刪除 de 文件src/componentsHelloWorld.vue

創(chuàng)建導(dǎo)航欄組件

在此步驟中，我們將創(chuàng)建一個(gè)簡(jiǎn)單的標(biāo)題導(dǎo)航欄組件。

創(chuàng)建一個(gè)在文件夾內(nèi)調(diào)用的新文件并編寫(xiě)以下行：Navbar.vuecomponents

<template>
  <div class="heading">
    <h1>This is my map App</h1>
  </div></template><script>export default {
  name: 'Navbar'}</script><style scoped>.heading {
  margin: 0;
  padding: 0px;
  background-color: black;
  color: white;}.heading > h1 {
  padding: 20px;
  margin: 0;}</style>

Finally, to display the we need to import the Navbar component and add it to our main component template section .NavbarApp.vue

Import the navbar component into script blockApp.vue

<script>
  import Navbar from './components/Navbar.vue';

  export default {
    name: 'App',
    components: {
      Navbar    }
  }</script>

Replace the text This is my map Appwith . Your file should look like this:<Navbar />App.vue

<template>
  <div class="app">
    <Navbar />
  </div></template><script>import Navbar from './components/Navbar.vue';export default {
  name: 'App',
  components: {
    Navbar  }}</script><style>body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;}.app {
  text-align: center;}</style>

Now you should see the black navbar at the top of your browser.

Create a map component

In this step, we will create a simple map component.

Create a new file called inside the folder and write these lines:Map.vuecomponents

<template>
  <div class="map-wrap">
    <a href="https://www." class="watermark"><img
        src="https://api./resources/logo.svg" alt="MapTiler logo"/></a>
    <div class="map" ref="mapContainer"></div>
  </div></template><script>import { Map } from 'maplibre-gl';import { shallowRef, onMounted, onUnmounted, markRaw } from 'vue';export default {
  name: "Map",
  setup () {
    const mapContainer = shallowRef(null);
    const map = shallowRef(null);

    onMounted(() => {
      const apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

      const initialState = { lng: 139.753, lat: 35.6844, zoom: 14 };

      map.value = markRaw(new Map({
        container: mapContainer.value,
        style: `https://api./maps/streets-v2/style.json?key=${apiKey}`,
        center: [initialState.lng, initialState.lat],
        zoom: initialState.zoom      }));

    }),
    onUnmounted(() => {
      map.value?.remove();
    })

    return {
      map, mapContainer    };
  }};</script><style scoped>@import '~maplibre-gl/dist/maplibre-gl.css';.map-wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - 77px); /* calculate height of the screen minus the heading */}.map {
  position: absolute;
  width: 100%;
  height: 100%;}.watermark {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 999;}</style>

We use on the map itself and on the wrap around the map for more possibilities in future styling.position: absoluteposition: relative

Here you will need to replace with your actual MapTiler API key.YOUR_MAPTILER_API_KEY_HERE

1. The option sets the DOM element in which the map will be rendered. We will assign the ref expected by our component to an HTML element, which will act as a container. Keep in mind that the reference to can only be used after the execution of the hook.containermapContainermapContaineronMounted

2. The option defines what style is the map going to use.style

3. The and options set the starting position of the map.centerzoom

4. The function does the cleanup that should occur when the instance is destroyed.onUnmounted

Render a map

Finally, to display the we need to import the Map component and add it to our main component .MapApp.vue

Import the map component into script blockApp.vue

<script>import Navbar from './components/Navbar.vue';import Map from './components/Map.vue';export default {
  name: 'App',
  components: {
    Navbar,
    Map  }}</script>

Add the just below the Navbar in the template section. The template block should look like this<Map />

<template>
  <div class="app">
    <Navbar />
    <Map />
  </div></template>

With everything done up until now, you should be able see your beautiful map in your browser.

Your file should look like this:App.vue

<template>
  <div class="app">
    <Navbar />
    <Map />
  </div></template><script>import Navbar from './components/Navbar.vue';import Map from './components/Map.vue';export default {
  name: 'App',
  components: {
    Navbar,
    Map  }}</script><style>body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;}.app {
  text-align: center;}</style>

Basic additional options

The last topic of this tutorial will be adding basic objects to your map. For more detailed information you can visit the MapLibre documentation.

Map Controls

We will navigate back to our file and add map navigation controls to our map.Map.vue

Add the next to the Map object import from MapLibre GL.NavigationControl

import { Map, NavigationControl } from 'maplibre-gl';

On line 30 (just after the initialization of the map) of the file, add the following line:Map.vue

map.value.addControl(new NavigationControl(), 'top-right');

new NavigationControl()will create new controls object which we add to current map using the function in the position.addControl()'top-right'

Map marker

Another basic thing to add to your map could be a marker of some location.

Add the next to the Map object import from MapLibre GL.Marker

import { Map, NavigationControl, Marker } from 'maplibre-gl';

In the following line where we declare the navigation control, we add these lines:

new Marker({color: "#FF0000"})
  .setLngLat([139.7525,35.6846])
  .addTo(map);

We create a new marker using the function. We added the color option to make it red, then set Lng/Lat of the marker using function, and finally added it to the current map using function.Marker.setLngLat().addTo()

We are finished with our basic map objects, your file should look like this:Map.vue

<template>
  <div class="map-wrap">
    <a href="https://www." class="watermark"><img
        src="https://api./resources/logo.svg" alt="MapTiler logo"/></a>
    <div class="map" ref="mapContainer"></div>
  </div></template><script>import { Map, NavigationControl, Marker } from 'maplibre-gl';import { shallowRef, onMounted, onUnmounted, markRaw } from 'vue';export default {
  name: "Map",
  setup () {
    const mapContainer = shallowRef(null);
    const map = shallowRef(null);

    onMounted(() => {
      const apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

      const initialState = { lng: 139.753, lat: 35.6844, zoom: 14 };

      map.value = markRaw(new Map({
        container: mapContainer.value,
        style: `https://api./maps/streets-v2/style.json?key=${apiKey}`,
        center: [initialState.lng, initialState.lat],
        zoom: initialState.zoom      }));
      map.value.addControl(new NavigationControl(), 'top-right');
      new Marker({color: "#FF0000"})
        .setLngLat([139.7525,35.6846])
        .addTo(map.value);
    }),
    onUnmounted(() => {
      map.value?.remove();
    })

    return {
      map, mapContainer    };
  }};</script><style scoped>@import '~maplibre-gl/dist/maplibre-gl.css';.map-wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - 77px); /* calculate height of the screen minus the heading */}.map {
  position: absolute;
  width: 100%;
  height: 100%;}.watermark {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 999;}</style>

要下載的完整代碼

我們利用本教程的結(jié)果創(chuàng)建了一個(gè)模板，該模板將作為構(gòu)建未來(lái)應(yīng)用程序的基礎(chǔ)。您可以在 Vue.js 的 MapLibre 模板中訪問(wèn)模板存儲(chǔ)庫(kù)。

在線演示：

您可以在 https://labs./vue-template-maplibre-gl-js/

結(jié)論

祝賀！您已經(jīng)使用 Vue.js 完成了簡(jiǎn)單的全屏地圖應(yīng)用程序，在東京皇宮上用標(biāo)記顯示東京。您可以在 MapLibre API 參考中為您的地圖探索有關(guān) MapLibre GL JS 的更多信息。

有用的鏈接

MapTiler - JavaScript Maps API

Vue.js

NPM - MapLibre GL

MapLibre official web

MapTiler Cloud - Customize