如何在 vue-leaflet 中的多边形内添加文本？

Question

我想在地图的多边形特征中心添加文本。我被提到 this issue. 并且我编写了这样的代码。

<template>
  <l-map style="height: 350px" :zoom="zoom" :center="center">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-polygon :lat-lngs="polygon.latlngs" :color="polygon.color">
      <l-marker
        :lat-lngs="polygonCenter(polygon.latlngs)"
        :icon="polyGonText"
      ></l-marker>
    </l-polygon>
  </l-map>
</template>

<script>
import { LMap, LTileLayer, LPolygon, LMarker } from "vue2-leaflet";
import L from "leaflet";

export default {
  components: {
    LMap,
    LTileLayer,
    LPolygon,
    LMarker,
  },
  data() {
    return {
      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: [47.31322, -1.319482],
      polygon: {
        latlngs: [
          [47.2263299, -1.6222],
          [47.21024000000001, -1.6270065],
          [47.1969447, -1.6136169],
          [47.18527929999999, -1.6143036],
          [47.1794457, -1.6098404],
          [47.1775788, -1.5985107],
          [47.1676598, -1.5753365],
          [47.1593731, -1.5521622],
          [47.1593731, -1.5319061],
          [47.1722111, -1.5143967],
          [47.1960115, -1.4841843],
          [47.2095404, -1.4848709],
          [47.2291277, -1.4683914],
          [47.2533687, -1.5116501],
          [47.2577961, -1.5531921],
          [47.26828069, -1.5621185],
          [47.2657179, -1.589241],
          [47.2589612, -1.6204834],
          [47.237287, -1.6266632],
          [47.2263299, -1.6222],
        ],
        color: "green",
      },
    };
  },
  methods: {
    polygonCenter(latlngs) {
      return L.polygon(latlngs).getBounds().getCenter();
    },
    polyGonText() {
      return L.divIcon({ html: "No.1" });
    },
  },
  mounted: function () {
    this.polygon
      .bindTooltip("My Text", { permanent: true, direction: "center" })
      .openTooltip();
  },
};
</script>

<style>
</style>

my sample code link

我的代码参考了 vue-leaflet site，只需添加方法来获取多边形“latLang”的中心并设置 html 对象。但是 html text(No.1) 没有显示在多边形上。如何将文本添加到多边形中？有人帮我吗？

Answer 1

您可以使用工具提示将文本附加到多边形，如下所示：

polygon.bindTooltip("My Text",
    {permanent: true, direction:"center"}
).openTooltip()

编辑：

我查看了您的代码，您将 bindTooltip() 和 openTooltop() 函数附加到对象，这是不正确的. 您需要做的是将这些函数附加到 Leaflet mapObject.

这是您需要更新的代码：

//template
<l-polygon ref="poly" :lat-lngs="polygon.latlngs" :color="polygon.color">
//mounted
mounted: function () {
   this.$nextTick(() => {
        const poly = this.$refs.poly.mapObject;
        poly.bindTooltip("My Text", { permanent: true, direction: "center" }).openTooltip();
});

而且你真的应该使用纯leaflet库，如果你学会一次你就可以到处使用它，不管是react，vue还是纯js。

如何在 vue-leaflet 中的多边形内添加文本？

How to add text inside polygon in vue-leaflet?

javascript

leaflet

vue.js