在本教程中jjj43天天影视，您将学习何如创建一个 Vue.js 组件来使用 MapLibre GL JS 渲染舆图。咱们将一齐制作一个浅显的全屏舆图应用圭臬，看成何如将MapTiler舆图与Vue.js和MapLibre GL .js JS一齐使用的示例。

在本教程适度时，您将大略在指定位置创建带有标识的全屏舆图。您的最终舆图将如下所示：

户外

图片

脱手

完资本教程的最低条目。

Vue的一些训戒.js关于本教程，您不需要太多使用 Vue.js 的训戒，但您应该熟习基本主张和责任经过。

MapTiler API key.您的MapTiler帐户看望密钥位于您的MapTiler云帐户页面上或免费赢得API密钥。

MapLibre GL JS.用于构建 Web 舆图的 JavaScript 库。在本教程中，您将学习何如装配它。

Node.js 和 npm。在土产货运行 Vue.js 应用圭臬是必需的。节点.js

Vue CLI。你需要装配 Vue CLI。要装配 Vue CLI，请翻开末端窗口并运行以下大喊：

npm install -g @vue/cli

砰砰��

复制

创建应用

在此门径中jjj43天天影视，咱们将学习何如创建 Vue.js 应用圭臬。

要创建一个新的 Vue.js 形式，请在大喊行中运行：

vue create my-vue-map

砰砰��

复制

该大喊会教唆您输入关联要包含在开动应用圭臬中的功能的信息。汲取该选项。vue createDefault (Vue 3) ([Vue 3] babel， eslint)

图片

使用箭头键并按 Enter 或 Return 键汲取一个选项。Vue CLI 装配必要的 Vue.js npm 包和其他依赖项，并创建一个新的责任区和一个浅显的接待应用圭臬，准备运行。关联更多信息，请参阅创建形式。

导航到新创建的形式文献夹my-vue-map

cd my-vue-map

砰砰��

复制

在新创建的形式文献夹中，运行以启动土产货环境。您会发现您的应用圭臬在地址上运行。npm run servehttp://localhost:8080/

当今，您应该在浏览器中看到该应用圭臬。

图片

装配和建造

要装配 MapLibre GL 库，请导航到您的形式文献夹并运行以下大喊：

npm i maplibre-gl

砰砰��

复制

导航到该文献夹并删除文献的总共骨子。在文献中写入以下行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>

.HTML

复制

当今，您应该在浏览器中看到“这是我的舆图应用圭臬”。

导航到文献夹并删除 de 文献src/componentsHelloWorld.vue

创建导航栏组件

在此门径中，咱们将创建一个浅显的标题导航栏组件。

创建一个在文献夹内调用的新文献并编写以下行：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>

.HTML

复制

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>

HTML

Copy

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>

HTML

Copy

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.maptiler.com" class="watermark"><img
        src="https://api.maptiler.com/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.maptiler.com/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>

HTML

Copy

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

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

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

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

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>

HTML

Copy

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>

HTML

Copy

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>

HTML

Copy

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';

JavaScript

Copy

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');

JavaScript

Copy

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';

JavaScript

Copy

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);

JavaScript

Copy

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.maptiler.com" class="watermark"><img
        src="https://api.maptiler.com/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.maptiler.com/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>

HTML

Copy

图片

要下载的完好意思代码

咱们愚弄本教程的效果创建了一个模板，该模板将看成构建明天应用圭臬的基础。您不错在 Vue.js 的 MapLibre 模板中

图片

看望模板存储库。在线演示：

您不错在 https://labs.maptiler.com/vue-template-maplibre-gl-js/

论断

祝愿！您也曾使用 Vue.js 完成了浅显的全屏舆图应用圭臬，在东京皇宫上用标识浮现东京。您不错在 MapLibre API 参收用为您的舆图探索关联 MapLibre GL JS 的更多信息。

灵验的流畅

MapTiler - JavaScript Maps API

Vue.js

NPM - MapLibre GL

MapLibre official web

MapTiler Cloud - Customizejjj43天天影视

本站仅提供存储工作，总共骨子均由用户发布，如发现存害或侵权骨子，请点击举报。