当前位置:首页 > 技术 > 正文内容

使用高德地图LabelsLayer实现高性能海量点标注

访客 技术 2026年6月14日 1

当需要在地图上展示大量标记(如超过500个)时,传统的 Marker 标注方式容易导致页面卡顿、响应迟缓。为解决这一问题,推荐采用高德地图的 LabelsLayer 图层结合 LabelMarker 实现高效渲染。该方案适用于万级标注场景,具备出色的性能表现。

定义添加LabelMarker的方法

首先封装一个通用函数,用于向指定图层添加带图标文本的标注:

function TMapFrame.CreateLabelMarker(
  ALayer: TCCuniGUIAMap.TLabelsLayer;
  ALng, ALat: Double;
  ATitle: string
): TCCuniGUIAMap.TLabelMarker;
begin
  Result := ALayer.LabelMarkers.Add;

  with Result.Options do
  begin
    // 设置图标资源路径
    Icon.Image := '/assets/pin_32x32.png';

    // 定义图标显示尺寸
    with Icon.Size do
    begin
      Width  := 32;
      Height := 32;
    end;

    // 设置标注名称与自定义参数
    Name := ATitle;
    CustomParams.Values['label'] := ATitle;

    // 指定经纬度位置
    with Position do
    begin
      Lng := ALng;
      Lat := ALat;
    end;
  end;
end;

初始化标签图层(LabelsLayer)

在地图初始化完成后创建独立的标注图层,便于后续统一管理显示/隐藏和清空操作。此过程应在 OnMapReady 事件中执行,确保地图对象已就绪:

procedure TMapFrame.CCuniGUIAMap1MapReady(Sender: TObject);
var
  NewLayer: TCCuniGUIAMap.TLabelsLayer;
begin
  // 创建新的标签图层
  NewLayer := CCuniGUIAMap1.LabelsLayers.Add;

  with NewLayer.Options do
  begin
    // 设置缩放级别可见范围
    Zooms.Min := 3;
    Zooms.Max := 20;

    // 设置图层层级,避免被其他覆盖
    ZIndex := 2;

    // 关闭碰撞检测以提升渲染效率
    Collision := False;
    AllowCollision := False;
  end;

  // 将图层挂载至地图实例
  NewLayer.AddToMap;
end;

批量绘制标注数据

通过遍历数据集循环调用 CreateLabelMarker 方法,在图层上生成多个标注。注意:所有标注添加完毕后必须显式调用 AddLabelMarkersToLayer 才能生效。

procedure TMapFrame.RenderMassLabels;
var
  DataLayer: TCCuniGUIAMap.TLabelsLayer;
  Marker: TCCuniGUIAMap.TLabelMarker;
begin
  // 获取第一个标签图层
  DataLayer := CCuniGUIAMap1.LabelsLayers[0];
  DataLayer.Clear; // 清除已有标注

  // 假设 q 是已打开的数据集
  q.First;
  while not q.Eof do
  begin
    CreateLabelMarker(
      DataLayer,
      q.FieldByName('Longitude').AsFloat,
      q.FieldByName('Latitude').AsFloat,
      q.FieldByName('SiteName').AsString
    );
    q.Next;
  end;

  // 提交标注至图层进行渲染
  DataLayer.AddLabelMarkersToLayer;

  // 自动调整视野以包含所有标注
  CCuniGUIAMap1.SetFitView;

  // 显示图层内容
  DataLayer.Show;
end;

上述实现可在极短时间内完成上万个标注的加载与显示,实测性能优异,界面流畅无卡顿。适合用于物流网点、设备监控、门店分布等大数据量地理可视化场景。

相关文章

Linux crontab 详解

1) crontab 是什么cron 是 Linux 的定时任务守护进程;crontab 是用来编辑/查看“按时间周期执行命令”的表(cron table)。常见两类:用户 crontab:每个用户一份(crontab -e 编辑)系统级 crontab / cron.d:可指定执行用户(/etc/crontab、/etc/cron.d/*)2) crontab 时间...

富文本里可以允许的 HTML 属性

一、所有标签默认允许的安全属性(极少)class        (可选)id           (通常建议禁用)title️ 注意:id 容易被滥用做锚点注入,很多系统直接禁用class 允许的话最好只允许固定前缀(如 editor-*)二、a 标签允许属性<a href="" t...

Mac 安装 Node.js 指南

方法一:通过官网安装包(最简单,适合初学者)如果你只是想快速安装并开始使用,这是最直接的方法。访问 Node.js 官网。页面会显示两个版本:LTS (Recommended For Most Users):长期支持版,最稳定。建议选这个。Current:最新特性版,包含最新功能但可能不够稳定。下载 .pkg 安装包并运行。按照安装向导点击“下一步”即可完成。方法二:使用 Homebrew 安装(...

Dom\HTML_NO_DEFAULT_NS 的副作用:自动加闭合标签

在使用Dom\HTMLDocument时,Dom\HTML_NO_DEFAULT_NS 将禁止在解析过程中设置元素的命名空间, 此设置是为了与DOMDocument向后兼容而存在的。当使用它时,已知的一个副作用就是:自动加闭合标签例如 </img> 为什么会这样?当你使用:Dom\HTML_NO_DEFAULT_NS文档会变成 无命名空间模式,此时内部更接近 XML...

Laravel 事件和监听器创建

在 Laravel 中,使用 Artisan 命令创建 Events(事件) 和 Listeners(监听器) 是非常高效的。你可以通过以下几种方式来实现:1. 手动创建单个 Event如果你只想创建一个事件类,可以使用 make:event 命令:Bashphp artisan make:event UserRegistered执行后,文件将生成在 app/Even...

自定义域名解析神器 dnsmasq

什么是 dnsmasq?dnsmasq 是一个轻量级、功能强大的网络服务工具,专为小型和中等规模网络设计。它是一个综合的网络基础设施解决方案[1]。dnsmasq 能做什么?功能说明应用场景DNS 转发与缓存将 DNS 查询转发到上游服务器(ISP、Google DNS 等),并在本地缓存结果加快 DNS 查询速度,减少外部 DNS 流量本地 DNS解析本地网络设备的主机名,无需编辑&n...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。