PROSAGA码农传奇-时空索引-在Leaflet中更改缩放级别时的工具提示移动

在Leaflet中更改缩放级别时的工具提示移动

作者: 我头上有犄角
发布时间: 2024-12-20 08:18:16 (28天前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    解决此问题的唯一方法是创建一个指向每行末尾的新点图层（Marker）。然后将工具提示分配给点。像这样的东西：
  </p>
   <pre>
    <code>
      $.ajax({
dataType: "json",
url: "...",
success: function (earthquake) {
    PointLayer= L.geoJSON(earthquake, {
        style: function (feature) {
            return {
                color: '#000',
                opacity: 1
            };
        },
        pointToLayer: function (feature, latlong) {
            return L.circle(latlong, 0);
        },
        onEachFeature: function (feature, layer) {
            layer.bindTooltip(layer.feature.properties.PanelName, { offset: L.point(0, 0), direction: 'bottom', permanent: true, className: 'AAAA', direction:'left' }).openTooltip();
        }
    }).addTo(map);

</code>
  </pre>
  <P>
    请注意，您应该指定一个HTML类（即AAAA）来更改工具提示格式（删除背景颜色，....）。另外要删除工具提示方向的小三角形，您应该添加一个新的CSS语句，如下所示：
  </p>
   <pre>
    <code>
      .AAAA {
box-shadow:none;
border:none;
background-color:transparent;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    border: none !important;
}

</code>
  </pre>
</DIV>