le-map:面向 uni-app / Vue 的跨端天地图插件,一套 API 搞定 H5、App、小程序地图能力

2 阅读4分钟

文章简介

le-map 是一款面向 uni-app 和 Vue Web 项目的跨端地图插件,基于天地图与 OpenLayers 能力,提供地图展示、点线面绘制、图层管理、弹窗、点位动画、GeoJSON、热力图、海量点以及托管天地图 API 等能力,适合政企管理、巡检、园区、物业、农业、水利、设备资产上图等业务场景。

文章正文

在很多 uni-app 项目里,地图功能看似只是“展示几个点”,真正落地时却经常变复杂:H5、App、小程序端能力不一致;点位、线路、区域样式要重复适配;WebView 通信要自己封装;授权、应用绑定、平台白名单也需要单独处理。

le-map 就是为这类场景准备的一款跨端地图插件。

它面向 uni-app 和 Vue Web 项目,提供统一的地图组件和 API,让开发者可以用一套写法完成 H5、App、微信小程序等多端地图能力接入。

image.png

为什么选择 le-map?

1. 一套 API,覆盖多端地图场景

通过 <le-map /> 组件即可快速接入地图能力,支持:

  • H5 / Vue Web
  • uni-app App
  • 微信小程序
  • App nvue WebView 场景

业务侧不需要为不同端重复写一套地图逻辑,常用能力都可以通过统一方法调用。

2. 常用地图能力开箱即用

le-map 已支持基础地图展示和业务图层能力,包括:

  • 地图初始化
  • 设置中心点、缩放级别
  • marker 点位
  • polyline 线路
  • polygon 区域
  • 图层显示 / 隐藏 / 删除 / 清空
  • 自动适配视野 fitBounds
  • 地图点击、覆盖物点击事件
  • 内置弹窗
  • 点位呼吸、跳动动画

对于设备点位、巡检线路、区域边界、资产分布等业务页面,可以快速完成从数据到地图展示的落地。

3. 专业图层能力,适合真实业务交付

在更复杂的项目中,le-map 也提供了更完整的专业能力:

  • 文本标注 label marker
  • 点聚合 cluster
  • GeoJSON 图层
  • 热力图
  • 海量点
  • 批量更新点、线、面图层
  • 矢量 / 影像底图切换
  • TypeScript 类型声明

这些能力非常适合政企后台、智慧园区、物业管理、农业水利、设备监控、外包交付等场景。

4. 托管天地图 API,减少重复封装

除了地图展示,le-map 还提供托管天地图 API 调用封装,支持:

  • 关键词搜索
  • 周边搜索
  • 地址转坐标
  • 坐标转地址
  • 行政区查询
  • 路线规划
  • 公交线路
  • 静态地图
  • 批量地理编码 / 逆地理编码 / 搜索

业务项目只需要传入自己的天地图 tk 和 le-map 授权信息,即可通过 SDK 统一调用,减少前后端重复封装成本。

5. 授权、白名单、能力校验更清晰

le-map 支持 license 授权校验,可绑定:

  • uni-app AppID
  • H5 域名
  • Android 包名
  • iOS Bundle ID
  • 微信小程序 AppID

同时支持不同套餐能力控制,适合个人项目、小型项目、企业项目以及需要长期维护的交付型项目。

快速接入示例

<template>
  <view class="map-page">
    <le-map
      ref="mapRef"
      license-key="lem_live_xxx"
      tk="你的天地图 tk"
      app-id="__UNI__XXXXXX"
      :center="[116.39747, 39.90882]"
      :zoom="12"
      @mapLoaded="handleMapLoaded"
      @overlayClick="handleOverlayClick"
      @error="handleError"
    />
  </view>
</template>

地图加载完成后,可以直接设置点位:

const handleMapLoaded = () => {
  mapRef.value?.setMarker('device-layer', {
    points: [
      {
        id: 'device-1',
        lonlat: [116.39747, 39.90882],
        text: '设备 1',
        icon: 'https://example.com/marker.png',
        popup: {
          title: '设备 1',
          content: '在线'
        }
      }
    ]
  });
};

适合哪些项目?

le-map 特别适合这些业务场景:

  • 巡检系统
  • 设备点位展示
  • 资产上图
  • 园区管理
  • 物业管理
  • 农业、水利项目
  • 政企后台系统
  • 区域边界展示
  • 轨迹、线路、面状区域展示
  • uni-app 跨端项目地图接入

如果你的项目需要的是稳定、清晰、可快速集成的地图展示和业务图层能力,le-map 会是一个很省时间的选择。

总结

le-map 不是一个臃肿的 GIS 平台,而是一款专注于 uni-app / Vue 项目地图接入的跨端插件。

它把地图展示、点线面绘制、图层管理、事件回调、专业图层、托管天地图 API 和授权管理整合到一套清晰的使用方式里,让开发者可以更快完成地图页面交付。

如果你正在做 uni-app 地图相关项目,欢迎试试 le-map。