Leaflet篇（1）在vue3中引用渲染

突发奇想使用自己的思路使用各种冷（不）门（是）插件在项目中使用

今天就来地图的第一篇

#Leaflet 在vue3中引用

首先当然是先上文档Documentation - Leaflet - 一个交互式地图 JavaScript 库

凡是先看文档

创建好项目之后，我们开始引入npm包

npm install leaflet

在src文件夹下的components中创建一个man.vue文件，为地图组件

把map.vue引入在app.vue中

引入成功之后浏览器界面会显示123

在map.vue中引入leaflet

需要一个容器去装这个地图所以来一个div，设置他的宽高响应式撑满整个浏览器可视框

<template>
  <div id="map">123</div>
</template>
<script lang="ts" setup>
import { onMounted } from "vue";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
</script>
<style lang="less" scoped>
#map {
  height: 100vh;
  width: 100vw;
}
</style>

开始初始化

在这里我们说明一下leaflet中的属性，在文档说明中非常全，我们这里用到什么就拓展什么

tileLayer用于在地图上加载和显示瓦片图层。 请注意，大多数tile服务器都需要属性，你可以在 Layer 下进行设置

minZoom 此图层将显示的最小缩放级别（包括最小）

maxZoom 此图层将显示的最大缩放级别（包括最大）

subdomainsString|String[]'abc'瓦片服务的子域。 可以以一个字符串（其中每个字母是一个子域名）或字符串数组的形式传递。

errorTileUrlString''显示瓦片图像的 URL，以代替加载失败的瓦片。

zoomOffsetNumber0平铺 URL 中使用的缩放数字将与此值发生偏移。

tmsBooleanfalse如果为 true，则反转瓦片的 Y 轴编号 (为 TMS 服务启用此选项)。

在这里我们只用到了这几个属性

import { onMounted } from "vue";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
onMounted(() => {
  init();
});
const init = () => {
  // 1
  // 设置地图显示区域
  // "map"为div的id,将地图渲染在这个容器里
  // setView的值为中心点和缩放级别（数值越大，地图越近）
  const map = L.map("map").setView([34.4262106, 107.2284119], 12);
  // 添加瓦片层到地图
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    // 最大最小缩放
    maxZoom: 20,
    attribution: "© OpenStreetMap",
  }).addTo(map);
};

接下来使用绘制图形属性

  // 绘制图形
  L.marker([51.5, -0.09]).addTo(map); //标记
  L.circle([51.508, -0.11], {
    color: "red",
    fillColor: "#f03",
    fillOpacity: 0.5,
    radius: 500000,
  }).addTo(map); //圆
  L.polygon([
    [51.509, -0.08],
    [41.503, -0.06],
    [51.51, -10.047],
  ]).addTo(map); //三角

弹框

const init = () => {
  const map = L.map("map").setView([34.4262106, 107.2284119], 4);
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    // 最大最小缩放
    maxZoom: 20,
    attribution: "© OpenStreetMap",
  }).addTo(map);
  const marker = L.marker([51.5, -0.09]).addTo(map);
  const circle = L.circle([51.508, -0.11], {
    color: "red",
    fillColor: "#f03",
    fillOpacity: 0.5,
    radius: 500000,
  }).addTo(map);
  const polygon = L.polygon([
    [51.509, -0.08],
    [41.503, -0.06],
    [51.51, -10.047],
  ]).addTo(map);
  marker.bindPopup("<b>Hello world!</b><br>I am a popup.");
  circle.bindPopup("I am a circle.");
  polygon.bindPopup("I am a polygon.");
  var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);
};

添加一个点击事件

接下来附上全部代码

<template>
  <div id="map">123</div>
</template>
<script lang="ts" setup>
import { onMounted } from "vue";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
onMounted(() => {
  init();
});
const init = () => {
  const map = L.map("map").setView([34.4262106, 107.2284119], 4);
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    // 最大最小缩放
    maxZoom: 20,
    attribution: "© OpenStreetMap",
  }).addTo(map);
  const marker = L.marker([51.5, -0.09]).addTo(map);
  const circle = L.circle([51.508, -0.11], {
    color: "red",
    fillColor: "#f03",
    fillOpacity: 0.5,
    radius: 500000,
  }).addTo(map);
  const polygon = L.polygon([
    [51.509, -0.08],
    [41.503, -0.06],
    [51.51, -10.047],
  ]).addTo(map);
  marker.bindPopup("<b>Hello world!</b><br>I am a popup.");
  circle.bindPopup("I am a circle.");
  polygon.bindPopup("I am a polygon.");
  var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);
    // 添加一个点击事件
  function onMapClick(e:any) {
    popup
      .setLatLng(e.latlng)
      .setContent("You clicked the map at " + e.latlng.toString())
      .openOn(map);
  }

  map.on("click", onMapClick);
};
</script>
<style lang="less" scoped>
#map {
  height: 100vh;
  width: 100vw;
}
</style>