第二部分：打造一个基础地图组件

前端

2024-01-10 20:29:56

1. 整理项目文件夹

1.1 整理项目目录

在第一部分中，我们已经创建好了项目文件夹结构，现在我们需要对它进行一些整理，以便于后续的开发。

将src文件夹下的components文件夹重命名为map-components。
将src文件夹下的views文件夹重命名为pages。
将src文件夹下的App.vue文件重命名为AppMap.vue。

1.2 准备构造地图文件夹

在src文件夹下创建一个名为map的文件夹，用以存放与地图组件相关的文件。

2. 开始打造地图组件

2.1 安装leaflet插件

在项目根目录下运行以下命令安装leaflet插件：

npm install leaflet --save

2.2 开始准备着手开发

在src/map文件夹下创建一个名为BaseMap.vue的文件，用以编写基础地图组件。

<template>
  <div id="map"></div>
</template>

<script>
import L from 'leaflet';

export default {
  name: 'BaseMap',
  mounted() {
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  }
};
</script>

在上面的代码中，我们首先导入了leaflet库，然后创建了一个名为BaseMap的Vue组件。在mounted生命周期钩子中，我们创建了一个Leaflet地图实例，并将其添加到#map元素中。

3. 开始开发地图组件

3.1 编写地图组件的模版->

在BaseMap.vue文件中，我们将编写地图组件的模版。

<template>
  <div id="map"></div>
</template>

3.2 编写地图组件的逻辑->

在BaseMap.vue文件中，我们将编写地图组件的逻辑。

<script>
import L from 'leaflet';

export default {
  name: 'BaseMap',
  mounted() {
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  }
};
</script>

3.3 注册地图组件->

在src/AppMap.vue文件中，我们将注册地图组件。

<template>
  <BaseMap />
</template>

<script>
import BaseMap from './map/BaseMap.vue';

export default {
  name: 'AppMap',
  components: {
    BaseMap
  }
};
</script>