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

一、创建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/{z}/{x}/{y}.png", {attribution:'&copy; <a href="">OpenStreetMap</a>contributors'}).addTo(map);}}
};
</script><style scoped>
#map-container {position: absolute;top: 60px;left: 0;/* height: 100%; */width: 100%;bottom: 0;
}
</style>
3.地图展示

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

一、创建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/{z}/{x}/{y}.png", {attribution:'&copy; <a href="">OpenStreetMap</a>contributors'}).addTo(map);}}
};
</script><style scoped>
#map-container {position: absolute;top: 60px;left: 0;/* height: 100%; */width: 100%;bottom: 0;
}
</style>
3.地图展示