Domina la herramienta afilada para dibujar mapas eficientemente - LeafletJs

---

prefacio

Como una herramienta importante para adquirir, almacenar, analizar y administrar datos geoespaciales, GIS es más flexible para dibujar mapas con tecnología GIS que las herramientas de mapeo manuales o automáticas tradicionales. Hoy me gustaría compartir con ustedes un paquete de biblioteca de clases de JavaScript para el desarrollo de clientes GIS : leafletJs .

---

1. ¿Qué es leafletJs?

Para citar las palabras oficiales, Leaflet es una biblioteca JavaScript de mapas interactivos de código abierto y compatible con dispositivos móviles . Y tiene todas las funciones de mapas que la mayoría de los desarrolladores necesitan. Además, Leaflet puede ejecutarse de manera eficiente en plataformas móviles y de escritorio, y tiene una gran cantidad de extensiones, excelente documentación, API fáciles de usar , casos completos y código fuente legible. Dirección del documento chino: https://leafletjs.cn/reference.html

---

2. Inicio rápido

1. Instalación

leafletJs proporciona dos formas de presentación, puede elegir una según sus necesidades personales.

Método 1: importación y uso directos

<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

Método 2: instalación de npm

npm install leaflet --save
cnpm install leaflet --save

main.js importar y registrar

import Leaflet from 'leaflet'
import "leaflet/dist/leaflet.css"
Vue.use(Leaflet);

---

2. Inicio rápido

2.1 Prepare un contenedor div , que debe tener ancho y alto.

<div class="oilMap" id="oilMap"></div>

2.2 Definir una instancia de mapa en datos

data() {
    
    
  return {
    
    
    map: null,
  };
},

2.3 Inicializar instancia de mapa

mounted() {
    
    
  this.initMap(); 
},

// 地图初始化
initMap() {
    
    
  // 使用 id 为 map 的 div 容器初始化地图，同时指定地图的中心点和缩放级别
  this.map = L.map("oilMap", {
    
    
    center: [39.91, 116.91], //中心经纬度
    zoom: 8, //初始缩放大小
  });
  // 引入图层
  L.tileLayer("http://192.168.0.138/OSM_BLUE/{z}/{x}/{y}.png").addTo(
    this.map
  );
},

2.4 No olvides establecer el ancho y alto del mapa

<style lang="scss" scoped>
.oilMap {
    
    
  width: 100%;
  height: 100vh;
  z-index: 9;
  background: #00192e;
}
</style>

A partir de esto, puede obtener un mapa inicializado de la siguiente manera

---

3. Aprendizaje avanzado

1. Control de mapa

MapLos controles son principalmente herramientas que se utilizan para controlar la visualización del mapa.

1.1 Control de barra de escala

L.control.scale({
    
    
    metric: true, // 显示米
    imperial: false, // 不显示英尺
  }).addTo(this.map);

---

1.2 Desactivar doble clic para acercar

this.map = L.map("oilMap", {
    
    
  center: [39.91, 116.91], //中心经纬度
  zoom: 8, //初始缩放大小
  doubleClickZoom: false, //禁用双击放大
});

---

1.3 Si se muestra el control de zoom

this.map = L.map("oilMap", {
    
    
  center: [39.91, 116.91], //中心经纬度
  zoom: 8, //初始缩放大小
  zoomControl: true, //缩放控件是否显示
});

---

1.4 Si se muestra el control de derechos de autor

this.map = L.map("oilMap", {
    
    
  center: [39.91, 116.91], //中心经纬度
  zoom: 8, //初始缩放大小
  attributionControl: false, //版权控件是否显示
});

---

1.5 Nivel de zoom máximo/mínimo del mapa

this.map = L.map("oilMap", {
    
    
  center: [39.91, 116.91], //中心经纬度
  zoom: 8, //初始缩放大小
  minZoom: 6,//地图最小缩放层级
  maxZoom: 10,//地图最大缩放层级
});

---

2. Marca de marcador

L.MarkerSe utiliza para mostrar iconos en los que se puede hacer clic o arrastrar en el mapa.

2.1 Añadir puntos de marca de icono

// 定义图标属性
let markerIcon = L.icon({
    
    
  iconUrl:"https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png",
  iconSize: [20, 34],//图标图像的尺寸，单位是像素。
  iconAnchor: [7, 9],//图标 "tip" 的坐标（相对于其左上角）。图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。
  popupAnchor: [-3, -3],//弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开。
});
// 生成标记点
L.marker([39.91, 116.91], {
    
    icon: markerIcon,}).addTo(this.map);

Puntos de marca de icono para lograr el efecto.

---

2.2 Agregar un marcador de círculo

L.circle([40.91, 116.91], {
    
    
  color: "red", //描边颜色
  fillColor: "yellow", //填充颜色
  fillOpacity: 0.5, //填充的不透明度
  radius: 5000, //圆的半径，以米为单位
}).addTo(this.map);

Rotuladores redondos para conseguir el efecto

---

2.3 Añadir marcadores de polígonos

let latlngs = [
  [39.91, 116.91],
  [39.87, 116.11],
  [39.51, 116.51],
  [39.51, 116.81],
  [39.91, 116.91],
];
L.polygon(latlngs,{
    
    color:'rgb(51,136,255)',fillColor:'red', fillOpacity:'0.4'}).addTo(this.map);

Marcadores de polígonos para lograr el efecto.

3. Ventana emergente emergente

bindPopup("弹出内容").openPopup()Se usa para abrir ventanas emergentes en ciertas ubicaciones en el mapa.

castaña

// 定义图标属性
let markerIcon = L.icon({
    
    
  iconUrl:"https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png",
  iconSize: [20, 34],//图标图像的尺寸，单位是像素。
  iconAnchor: [7, 9],//图标 "tip" 的坐标（相对于其左上角）。图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。
  popupAnchor: [-3, -3],//弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开。
});
// 生成标记点
L.marker([39.91, 116.91], {
    
    icon: markerIcon,}).addTo(this.map).bindPopup("弹出内容").openPopup();

lograr efecto

---

4. Capas

LeafletEn , todo lo que se puede agregar a un mapa es una capa. Por lo tanto, los marcadores, círculos y polígonos sobre todo pertenecen a la capa, y también pueden entenderse como los elementos del mapa.

4.1 Borrar capas

//示例图层
let lineSet = L.polygon(latlngs,{
    
    color:'rgb(51,136,255)',fillColor:'red', fillOpacity:'0.4'}).addTo(this.map);
//清除指定layer
this.map.removeLayer(lineSet)
//清除地图上所有layer
this.map.clearLayers()

---

4.2 Juicio a nivel de mapa

this.map.on("zoom", function (e) {
    
    
  if (e.target._zoom > 8) {
    
    
    // 执行操作
  }
});

---

4.3 Zoom del mapa del monitor

this.map.on("zoom", function () {
    
    
 // 执行操作
});

---

4.4 Evento de clic vinculante

let marker = L.marker([39.91, 116.91]).addTo(this.map);
marker.on("click", function (e) {
    
    
  // 执行操作
});

---

4.5 Agregar capa GeoJson

//jsondata必须为指定格式为GeoJson格式
let GeoJsonlayer = L.geoJSON(jsondata, {
    
    
  style: {
    
    
    color: "#4e98f444",
    fillOpacity: 1,
    weight: 1,
  },
});
GeoJsonlayer.setZIndex(1);// 改变网格图层的 zIndex 
this.map.addLayer(GeoJsonlayer);// 将给定的图层添加到组中

---

4. Proyecto de combate real

Los puntos anteriores son los puntos principales del uso Leafletdel mapa . A continuación, combinaremos los puntos mencionados anteriormente con las necesidades del proyecto para realizar varias operaciones interesantes en el mapa.

archivo de paquete

// 地图公共方法封装 /utils/index
import * as L from 'leaflet'
import {
    
     Message, Notification } from 'element-ui'
export default class LMap {
    
    
    // 初始化地图
    /***
     * 【options】参数合集
     * [tileUrl]瓦片地图地址
     * [minZoom]最小级别
     * [maxZoom]最大级别
     * [zoom]初始化级别
     * [crs]坐标系
     * [center]初始化视图中心点
     * [fullscreenControl]是否显示全屏控件
     * [zoomControl]是否显示缩放控件
     * [inertia]是否开启惯性，在拖动和在某一时间段内持续朝同一方向移动建有动力的地图时，会有惯性的效果
     * [attributionControl]属性控制是否默认加载在地图上
     * [renderer]// 渲染方式 （默认使用canvas提高性能）
     * [bounds]// 地图限制拖动区域 [下，上，右，左]
     *
     *
     * ***/
    async initMap(divId, options) {
    
    
        // let url = process.env.VUE_APP_MAP_URL + '/OSM_BLUE/{z}/{x}/{y}.png'
        const {
    
    
            tileUrl,
            minZoom,
            maxZoom,
            zoom,
            crs,
            center,
            fullscreenControl,
            zoomControl,
            inertia,
            attributionControl,
            renderer,
            bounds
        } = options
        this.map = L.map(divId, {
    
    
            minZoom: minZoom ? minZoom : 8, // 地图最小缩放层级
            maxZoom: maxZoom ? maxZoom : 15, // 地图最大缩放层级,
            // crs: crs ? crs : L.CRS.EPSG3857, // 坐标系
            center: center ? center : [39.7506, 118.3423], // 地图中心
            zoom: zoom ? zoom : 8, // 地图默认缩放层级
            fullscreenControl: fullscreenControl ? fullscreenControl : false, // 是否显示全屏控件
            zoomControl: zoomControl ? zoomControl : false, // 是否显示缩放控件
            inertia: inertia ? inertia : true, // 是否开启惯性，在拖动和在某一时间段内持续朝同一方向移动建有动力的地图时，会有惯性的效果
            attributionControl: attributionControl ? attributionControl : false, // 属性控制是否默认加载在地图上
            renderer: renderer ? renderer : L.canvas() //使用canvas 渲染 提高性能
        })
        if (tileUrl) {
    
    
            // 将mapbox自定义样式添加到地图中
            // this.map.addLayer(L.tileLayer(tileUrl, { 
            //     tileSize: 256,
            //     zoomOffset: 1, 
            //     attribution: 'stamen',
            //   }))
            this.map.addLayer(L.tileLayer(tileUrl))
        } else {
    
    
            console.error('---请配置瓦片图层地址---')
        }
        // 给地图区域做限制的上下左右四部分
        if (bounds) {
    
    
            const mapBounds = bounds
            // L.latLngBounds([
            //     [40.7844, 118.2935], // 下
            //     [38.4575, 118.4979], // 上
            //     [39.782, 115.778], // 左
            //     [39.8041, 121.583] // 右
            // ])
            this.map.setMaxBounds(mapBounds)
        }
        // 渲染完成返回true
        return this.map
    }
    getMap() {
    
    
        return this.map || {
    
    }
    }
    mapArea() {
    
    }
    mapDistance() {
    
    }
}

---

4.1 Mapa de bits básico

<template>
  <div>
    <div class="zMap" id="map"></div>
    <!-- 点位详情 -->
    <div ref="detailsObj" v-if="showPup">
      <div class="dataBox">
        <div class="item">
          <div>点位名称：</div>
          <div>{
    
    {
    
     markerData.name ? markerData.name : "--" }}</div>
        </div>
        <div class="item">
          <div>车牌号：</div>
          <div> {
    
    {
    
     markerData.cph ? markerData.cph : "--" }}</div>
        </div>
        <div class="item">
          <div>排放阶段：</div>
          <div>{
    
    {
    
     markerData.pfjd ? markerData.pfjd : "--" }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import areaGeo from "@/utils/area.json"; //引入离线本地json
import LMap from "@/utils/index";//地图公共方法封装
import * as L from "leaflet";
import onlineMarker from "../assets/zaix.png";//不同状态的图片
import offlineMarker from "../assets/lix.png";//不同状态的图片
export default {
    
    
  name: "lMap",
  data() {
    
    
    return {
    
    
      map: null, //地图对象
      lmap: new LMap(), //地图公共方法封装
      labelGroup: null, //文本图层
      markerLayer: null, //marker 图层
      bondarylayer: null, //geojson 图层
      layerPup: null, //弹窗
      markerData: {
    
    }, //详情数据
      showPup: false, //详情弹框是否弹出
    };
  },
  mounted() {
    
    
    this.initMap(); //初始化地图方法
  },
  methods: {
    
    
    //初始化地图
    async initMap() {
    
    
      let _this = this;
      let {
    
     lmap } = this;
      //配置地图项
      const mapConfig = {
    
    
        tileUrl: "http://192.168.0.138/OSM_BLUE/{z}/{x}/{y}.png", //瓦片图层地址
        minZoom: 8, //允许缩放最小级别
        maxZoom: 10, //允许缩放最大级别
        zoom: 8, //初始化级别
        center: [30.536095454317287, 104.15024279778913], //中心经纬度
        bounds: L.latLngBounds([
          [30.536095454317287, 104.15024279778913], // 下
          [30.536095454317287, 104.15024279778913], // 上
          [30.536095454317287, 104.15024279778913], // 左
          [30.536095454317287, 104.15024279778913], // 右
        ]), //限制拖动的区域
      };
      this.map = await lmap.initMap("map", mapConfig);
      if (this.map) {
    
    
        this.labelGroup = new L.layerGroup(); //文本图层
        this.labelGroup.addTo(this.map);
        this.markerLayer = new L.layerGroup(); //标记
        this.markerLayer.addTo(this.map);
        this.getGeojsonByName(areaGeo, true);
        this.maptopPoint();
      } else {
    
    
        console.error("--地图加载失败!!!--");
      }
    },
    //加载geojson数据
    getGeojsonByName(data, flag) {
    
    
      let _this = this;
      this.bondarylayer = L.geoJSON(data, {
    
    
        style: {
    
    
          color: "#4e98f444",
          fillOpacity: 1,
          weight: 2,
        },
        pane: "overlayPane",
        onEachFeature: (feature, layer) => {
    
    
          if (!flag) {
    
    
            _this.addText(feature, layer);
          }
        },
      });
      this.bondarylayer.setZIndex(1);
      this.map.addLayer(this.bondarylayer);
    },
    addText(feature, layer) {
    
    
      let name = feature.properties.NAME;
      let location = layer._bounds.getCenter();
      //显示文字
      var content = `${
    
    name}`;
      // 区县名称文字
      var text = L.divIcon({
    
    
        html: "<div>" + content + "</div>",
        iconSize: [60, 20],
        iconAnchor: [0, 10],
        className: "labelStyle",
      });
      let marker = new L.marker(location, {
    
     icon: text });
      //中心点位
      this.labelGroup.addLayer(marker);
    },
    //模拟地图点位接口
    maptopPoint() {
    
    
      let dataList = [
        {
    
    
          lng: "104.882",
          lat: "30.436",
          name: "点位1",
          cph: "川A31255",
          pfjd: "国五",
          status: "0",
        },
        {
    
    
          lng: "103.652",
          lat: "30.565",
          name: "点位2",
          cph: "川C32585",
          pfjd: "国四",
          status: "1",
        },
        {
    
    
          lng: "104.352",
          lat: "31.136",
          name: "点位3",
          cph: "川X36985",
          pfjd: "国三",
          status: "0",
        },
        {
    
    
          lng: "104.452",
          lat: "30.536",
          name: "点位4",
          cph: "川D31255",
          pfjd: "国二",
          status: "1",
        },
        {
    
    
          lng: "104.202",
          lat: "30.136",
          name: "点位5",
          cph: "川E31125",
          pfjd: "国一",
          status: "1",
        },
      ];
      this.checkMarkerList(dataList);
    },
    //监测数据对marker进行渲染
    checkMarkerList(list) {
    
    
      let _this = this;
      if (!list.length) {
    
    
        return;
      }
      list.map((item) => {
    
    
        _this.addMarker(item);
      });
    },
    addMarker(item) {
    
    
      let _this = this;
      let Icon = _this.getMarkerIcon(item);
      if (Icon) {
    
    
        var marker = new L.marker(L.latLng(item.lat, item.lng), {
    
    
          icon: Icon,
        });
        //区县编码
        marker["markerInfo"] = item;
        marker.bindTooltip(item.name); //鼠标触摸显示提示信息
        marker.on("click", function (e) {
    
    
          let MarkerTarget = e.target; //获取 点击marker
          _this.showMarkerPup(MarkerTarget);
        });
        this.markerLayer.addLayer(marker);
      }
    },
    //显示marker 弹窗信息
    showMarkerPup(marker) {
    
    
      let _this = this;
      _this.markerData = marker["markerInfo"];
      let location = marker._latlng;
      _this.showPup = true;
      _this.$nextTick(() => {
    
    
        _this.layerPup = L.popup({
    
    
          className: "district-pup",
          closeButton: false,
        })
          .setLatLng(location)
          .setContent(_this.$refs.detailsObj)
          .openOn(_this.map);
      });
    },
    //获取marker图标
    getMarkerIcon(data) {
    
    
      let markerIcon, imgUrl;
      let {
    
     status } = data; //1在线 2离线

      if (status) {
    
    
        status = Number(status);
      }
      if (status == 1) {
    
    
        imgUrl = onlineMarker;
      } else {
    
    
        imgUrl = offlineMarker;
      }
      markerIcon = L.icon({
    
    
        iconUrl: imgUrl,
        iconSize: [20, 20],
        iconAnchor: [12, 12],
        popupAnchor: [-3, -3],
      });
      return markerIcon;
    },
  },
};
</script>

<style lang="scss" scoped>
.zMap {
    
    
  width: 100%;
  height: 100vh;
  z-index: 9;
}
.dataBox {
    
    
  width: 100%;
  .item {
    
    
    display: flex;
    padding: 4px 0px;
  }
}
::v-deep {
    
    
  .leaflet-popup-content-wrapper,
  .leaflet-popup-tip {
    
    
    border: none;
    background: rgba($color: #020a31, $alpha: 0.7) !important;
    border-radius: 4px;
    box-shadow: 0px 0 6px 0px #33aeff inset;
    color: rgba($color: #fff, $alpha: 0.8);
  }
  .leaflet-container a.leaflet-popup-close-button {
    
    
    color: #fff;
  }
}
</style>

lograr efecto

---

4.2 Mapa de trayectoria de conducción

<template>
  <div>
    <div class="leftRightBox">
      <!-- 左 -->
      <div class="oilMap" id="map"></div>
      <!-- 右 -->
      <div class="rightTxtBox">
        <el-card class="box-card">
          <!-- 播放轨迹 -->
          <div class="trackBox">
            <div>
              <i title="播放" v-if="playIsShow" @click="playPauseOn" class="el-icon-video-play"></i>
              <i title="暂停" v-else @click="playPauseOn" class="el-icon-video-pause"></i>
            </div>
            <div>
              <el-slider :min="0" :max="points.length - 1" @change="sliderOn" v-model="progress"></el-slider>
            </div>
          </div>
          <div class="multipleBox">
            <span>倍速：</span>
            <el-select @change="multipleOn" style="width:70px" size="mini" v-model="multipleNumber" placeholder="请选择倍速">
              <el-option v-for="item in multipleOptions" :key="item.multipleNumber" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import LMap from "@/mapUtils";
import areaGeo from "@/mapUtils/area.json";
import abnormal from "../../../../assets/overview/normal.png"; //地图图标
export default {
      
      
  data() {
      
      
    return {
      
      
      multipleOptions: [
        {
      
      
          value: 800,
          label: "1",
        },
        {
      
      
          value: 550,
          label: "1.5",
        },
        {
      
      
          value: 400,
          label: "2",
        },
      ],
      map: null,
      lmap: new LMap(), //地图公共方法封装
      labelGroup: null, //文本图层
      tipsLayerGroup: null, //tips
      bondarylayer: null, //geojson 图层
      points: [
        //模拟点位数据
        [39.898457, 116.391844],
        [39.898595, 116.377947],
        [39.898341, 116.368001],
        [39.898063, 116.357144],
        [39.899095, 116.351934],
        [39.905871, 116.35067],
        [39.922329, 116.3498],
        [39.931017, 116.349671],
        [39.939104, 116.349225],
        [39.942233, 116.34991],
        [39.947263, 116.366892],
        [39.947568, 116.387537],
        [39.947764, 116.401988],
        [39.947929, 116.410824],
        [39.947558, 116.42674],
        [39.9397, 116.427338],
        [39.932404, 116.427919],
        [39.923109, 116.428377],
        [39.907094, 116.429583],
        [39.906858, 116.41404],
        [39.906622, 116.405321],
        [39.906324, 116.394954],
        [39.906308, 116.391264],
      ],
      playIsShow: true, //播放/暂停
      multipleNumber: 1, //倍速
      progress: 0, //进度
      marker: null,
      polyline: null,
      duration: 0,
      timer: null, //定时器
      time: 800, //定时器速度
    };
  },
  mounted() {
      
      
    this.duration = this.points.length - 1;
    this.initMap();
  },
  watch: {
      
      
    progress() {
      
      
      this.updatePosition();
    },
  },
  destroyed() {
      
      
    clearTimeout(this.timer);
  },
  methods: {
      
      
    updatePosition() {
      
      
      const position = this.points[this.progress];
      this.marker.setLatLng(position);
      this.map.setView(position, 12); //放大比例
    },
    // 滑动进度
    sliderOn(e) {
      
      
      console.log(e, "滑动进度");
    },
    // 选择倍速
    multipleOn(e) {
      
      
      clearTimeout(this.timer);
      this.time = e;
      this.recursion();
    },
    // 点击播放暂停按钮
    playPauseOn() {
      
      
      if (this.progress == this.points.length - 1) {
      
      
        this.progress = 0;
      }
      this.playIsShow = !this.playIsShow;
      this.recursion();
    },
    // 递归
    recursion() {
      
      
      if (!this.playIsShow) {
      
      
        // 模拟数据变化
        this.timer = setTimeout(() => {
      
      
          this.progress++;
          if (this.progress >= this.points.length - 1) {
      
      
            this.playIsShow = true;
            this.polyline = L.polyline(this.points, {
      
       color: "red" }).addTo(
              this.map
            );
            clearTimeout(this.timer);
          }
          this.recursion();
        }, this.time);
      }
    },
    //初始化地图
    async initMap() {
      
      
      let {
      
       lmap } = this;
      //配置地图项
      const mapConfig = {
      
      
        tileUrl: window.api.teilUrl + "/OSM_BLUE/{z}/{x}/{y}.png", //瓦片图层地址
        crs: L.CRS.EPSG4326,
        minZoom: 8, //允许缩放最小级别
        maxZoom: 15, //允许缩放最大级别
        zoom: 10, //初始化级别
        center: [39.91, 116.91], //初始化中心点
      };
      this.map = await lmap.initMap("map", mapConfig);
      if (this.map) {
      
      
        this.labelGroup = new L.layerGroup(); //文本图层
        this.labelGroup.addTo(this.map);
        this.tipsLayerGroup = new L.layerGroup();
        this.tipsLayerGroup.addTo(this.map);
        this.getGeojsonByName(areaGeo, true);
      } else {
      
      
        console.error("--地图加载失败!!!--");
      }
      var icon = L.icon({
      
      
        iconUrl: abnormal,
        iconSize: [16, 13],
        iconAnchor: [8, 7],
      });
      this.marker = L.marker(this.points[0], {
      
       icon: icon }).addTo(this.map);
      this.polyline = L.polyline(this.points, {
      
       color: "red" }).addTo(this.map);
      setInterval(() => {
      
      
        this.marker.setLatLng(this.points[this.progress]);
        this.polyline.setLatLngs(this.points.slice(0, this.progress + 1));
      }, 100);
    },
    //加载geojson数据 falg 是否显示名称
    getGeojsonByName(data, flag) {
      
      
      let _this = this;
      this.bondarylayer = L.geoJSON(data, {
      
      
        style: {
      
      
          color: "#4e98f444",
          fillOpacity: 1,
          weight: 1,
        },
        pane: "overlayPane",
        onEachFeature: (feature, layer) => {
      
      
          // console.log(layer)
          if (flag) {
      
      
            _this.addText(feature, layer);
          }
        },
      });
      this.bondarylayer.setZIndex(1);
      this.map.addLayer(this.bondarylayer);
    },
    //添加市所有区县
    addText(feature, layer) {
      
      
      let name = feature.properties.name;
      // let center = feature.properties.center;
      let location = layer._bounds.getCenter(); //[center[1], center[0]]; //
      //显示文字
      var content = `${ 
        name}`;
      // 区县名称文字
      var text = L.divIcon({
      
      
        html: "<div class='labelStyle'>" + content + "</div>",
        iconSize: [60, 20],
        iconAnchor: [0, 10],
        className: "labelStyle",
      });
      let marker = new L.marker(location, {
      
       icon: text });
      //中心点位
      this.labelGroup.addLayer(marker);
    },
  },
};
</script>
<style scoped>
.oilMap {
      
      
  height: 500px;
}
</style>

---

lograr efecto

持续更新...