Vue工程搭建Leaflet项目第一弹：地图展示

GIS之路

已于 2022-09-03 16:19:34 修改

阅读量1.1k

点赞数

分类专栏： Leaflet API WebGIS 文章标签： vue.js javascript

于 2022-01-16 15:49:57 首次发布

本文链接：https://blog.csdn.net/qq_45015198/article/details/122514650

版权

WebGIS 同时被 2 个专栏收录

8 篇文章 4 订阅

订阅专栏

Leaflet API

7 篇文章 5 订阅

订阅专栏

一、创建Vue项目

1. 控制台运行命令:

vue create leaflet-app

2. 选择项目配置

? Please pick a preset: Manually select features

F:\ProgramFile\WebGIS>vue create leaflet-app -----项目名
Vue CLI v4.5.15
? Please pick a preset: ---- 选则Vue版本
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features ---- 这里我选择自主选择

? Check the features needed for your project: (Press to select, to toggle all, to invert selection)

() Choose Vue version
() Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

二、下载Leaflet依赖

运行命令：

npm i leaflet --save

三、地图展示

1. 在main.js文件中引入leaflet和leaflet.css文件

// 引入Leaflet
import 'leaflet'
import 'leaflet/dist/leaflet.css'

2. 创建地图组件

<template>
  <div id="map-container"></div>
</template>
<script>
import L from "leaflet";
export default {
  name: "Map",
  components: {},
  created() {},
  mounted() {
    // 必须在组件挂载之后初始化地图，不然会报错 
    this.initMap();
  },
  methods: {
    initMap() {
      const map = L.map("map-container", {
        crs: L.CRS.EPSG3857,
        center: [24.886566,102.830513],
        zoom: 11
      });
      console.log("map:", map);
      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>

<style scoped>
#map-container {
  position: absolute;
  top: 60px;
  left: 0;
  /* height: 100%; */
  width: 100%;
  bottom: 0;
}
</style>