leaflet - Grafana 文本面板在绘制传单圈时出错

问题描述

我正在尝试使用 Grafana 中的文本面板（HTML 模式）在 Leaflet Map 中绘制圆圈当我尝试放大地图并且圆圈未在缩放时调整大小时出现错误

我想知道相同的代码在独立的传单 html 页面中运行良好，但在 Grafana（v6.6.2）中出现错误

有相同的解决方案吗？提前致谢

PFB代码和错误截图供参考

<!doctype html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>

  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

</head>
<body>
<button onclick="myFunction()">Click me</button>
<br>
<p id="demo"></p>
 <div id="map" style="width: 1200px; height: 500px;"></div>

<script> 
var map = L.map('map', {
    center: [44.35,-77.6],
    zoom: 4
});

L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
  }).addTo(map);

function myFunction() 
{
    L.circle([44.35,-77.6], {radius: 500}).addTo(map);
}
 </script>
</body>
</html>

标签： leafletgrafana

leaflet - Grafana 文本面板在绘制传单圈时出错

问题描述

解决方案

推荐阅读