文章简介
le-map 是一款面向 uni-app 和 Vue Web 项目的跨端地图插件,基于天地图与 OpenLayers 能力,提供地图展示、点线面绘制、图层管理、弹窗、点位动画、GeoJSON、热力图、海量点以及托管天地图 API 等能力,适合政企管理、巡检、园区、物业、农业、水利、设备资产上图等业务场景。
文章正文
在很多 uni-app 项目里,地图功能看似只是“展示几个点”,真正落地时却经常变复杂:H5、App、小程序端能力不一致;点位、线路、区域样式要重复适配;WebView 通信要自己封装;授权、应用绑定、平台白名单也需要单独处理。
le-map 就是为这类场景准备的一款跨端地图插件。
它面向 uni-app 和 Vue Web 项目,提供统一的地图组件和 API,让开发者可以用一套写法完成 H5、App、微信小程序等多端地图能力接入。
为什么选择 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。