我想在 map 中的多边形要素的中心添加文本。 我被提到了 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:
'© <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>
我的代码引用vue-leaflet site ,只需添加方法来获取多边形“latLang”的中心并设置 html 对象。 但 html 文本(No.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。
关于javascript - 如何在vue-leaflet中的多边形内添加文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70951568/