leaflet在vue中的简单使用

1 安装

npm install leaflet

2 引入

import * as L from "leaflet";
import "leaflet/dist/leaflet.css";

3 初始化

<template>
  <div class="full">
    <div id="map" ref="map"></div>
  </div>
</template>

const map1 = ref({});
onMounted(() => {
  const map = L.map("map").setView([22.794258, 113.533339], 12);
  map1.value = map;
  L.tileLayer(
    "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
    {
      maxZoom: 12,
      attribution: "© OpenStreetMap",
    }
  ).addTo(map);

  rootLayerGroup.value = L.featureGroup().addTo(map); // 添加根图层（方便管理其他图层）

});

初始化后加入一些样式也就有了地图了

接下来介绍个画线和放置图标的方法吧

4 放置图标展示文字

  L.marker([22.794258, 113.533339])
    .addTo(map1.value)
    .bindPopup("A pretty CSS3 popup.<br> Easily customizable.")
    .openPopup();

5 画线

// 构造数据
  let leftStr = 113.710945;
  let rightStr = 22.263388;
  const latAndLon = [];
  for (let i = 0; i <= 10; i++) {
    let templeft = leftStr + i;
    let tempright = rightStr + i;
    latAndLon.push([tempright, templeft]);
  }
  L.marker([22.794258, 113.533339])
    .addTo(map1.value)
    .bindPopup("A pretty CSS3 popup.<br> Easily customizable.")
    .openPopup();
// 画线
L.polyline(latAndLon).addTo(layer);

简单的搭建和使用就大概这些了 其他的可以到他的官网去学习 leafletjs.cn/index.html