grafana 结合高德地图能碰撞出什么火花

ECStack

已于 2024-08-02 17:16:11 修改

阅读量344

点赞数 7

文章标签： javascript

于 2024-08-02 17:01:19 首次发布

本文链接：https://blog.csdn.net/github_39648474/article/details/140874891

版权

grafana 结合高德地图能碰撞出什么火花🔥

概要

把高德地图嵌入到grafana的panel面板里，实现功能融合，并且支持读取数据库数据实现实时展示。
` 提示：grafana，高德地图

举个栗子🌰

下面是我们研发的grafana-heartmap-panel 效果图，结合高德热力图效果展示；该插件支持高德地图key ，安全秘钥，高德地图样式，点聚合网格大小动态配置，所见即所得；即时生效
在这里插入图片描述

别逼逼，看代码

const { gmapKey , securityJsCode , clusterGrid, markerIcon, mapStyle } = options;
  // panel是否为编辑状态
  // let isEditStatus= $('[aria-label="Panel editor content"]').length > 0 ?true : false;
  // @ts-ignore
  window._AMapSecurityConfig = {
    securityJsCode: securityJsCode || "883413987f4afe876741536e630fa147",
  };
  const loadAMap = () => {
    AMapLoader.load({
      key: gmapKey || 'd405928d86dea6ab2cdc3d9bd443035c', 
      version: "2.0", 
      plugins: [],  // 加载插件, 两种方式都可以
    })
    .then((AMap: any) => {
      refreshMap(AMap)
    })
    .catch((e) => {
      console.error("加载高德地图脚本失败")
      console.error(e);
    })
  };

 const setMarkerCluster=(AMap: any)=>{
    const clusterData=points.map((item: any) =>{
      return {
        lnglat: [item.longitude, item.latitude],
      }
    })
    mapInstanceRef.current.plugin(["AMap.MarkerCluster"], function () {
      new AMap.MarkerCluster(mapInstanceRef.current,clusterData, {
        gridSize: clusterGrid || 60,
      });
    })
  }