更新记录
1.0.0(2025-02-14) 下载此版本
1、天地图图层渲染地理信息
2、支持覆盖物的创建/编辑/清除
3、支持 Web H5、移动端APP平台下运行
4、支持地理搜索
5、支持图层切换
平台兼容性
uni-app
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | × | √ | √ | √ | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| × | × | × | × | × | × | - | × | × | - | - |
其他
| 多语言 | 暗黑模式 | 宽屏模式 |
|---|---|---|
| × | × | √ |
环境:Vue2
支持运行平台:H5、移动端APP(安卓IOS兼容)
小程序平台因RanderJs限制无法使用,小程序平台建议H5发布后使用嵌入网页形式使用
使用示例
页面引入使用
<TMapEditor
:serverKey="serverKey"
height="100vh"
mapType="img_w"
:location="nowLocation"
:drawData="drawData"
@submit="submit"
/>
APP.vue 引入全局样式
/*每个页面公共css */
/* leaflet插件全局css */
@import url("https://unpkg.com/leaflet@1.9.3/dist/leaflet.css");
@import url("https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css");
/* 字体图标 可替换为自己的 */
@import url("/static/font-icon/iconfont.css");
组件参数说明
| 参数名称 | 参数说明 | 类型 | 默认值 | 是否必传 |
|---|---|---|---|---|
| serverKey | 地图服务KEY | String | - | 是 |
| mapViewKey | 地图容器KEY | String | tMapContainer | 否 |
| location | 地图中心点坐标,期望格式见下文 | Object | - | 否,建议传递 |
| drawData | 绘制覆盖物数据,期望格式见下文 | Object | - | 否 |
| mapType | 地图底图类型:vec_w(矢量图) || img_w(卫星图) | String | vec_w | 否 |
| height | 地图容器高度 | String | 85vh | 否 |
| search | 搜索栏显隐 | Boolean | true | 否 |
location参数示例:
传递默认的坐标用于地图创建时显示的位置,以及下方坐标信息栏的信息内容
| 参数名称 | 参数释义 |
|---|---|
| longitude | 经度坐标 |
| latitude | 纬度坐标 |
| label | 坐标标题 |
drawData参数示例:
用户编辑数据回显
注意:区块类型数据为三维数组,线条数据为二维数组,标记点数据为一维数组,数据格式异常会导致渲染失败
drawData = { // 绘制面 期望格式
type: 'Polygon',
mapData: [
[
[28.692387317252717, 111.40586266054531 ],
[28.692297935319605, 111.40569109067788 ],
[28.691973337131326, 111.40525680445093 ],
]
]
}
drawData = { // 绘制线 期望格式
type: 'LineString',
mapData: [
[28.692387317252717, 111.40586266054531 ],
[28.692297935319605, 111.40569109067788 ],
[28.691973337131326, 111.40525680445093 ],
]
}
drawData = { // 绘制点 期望格式
type: 'Point',
mapData: [28.692387317252717, 111.40586266054531 ]
}
更新日志
V1.0.0
1、天地图图层渲染地理信息
2、支持覆盖物的创建/编辑/清除
3、支持 Web H5、移动端APP平台下运行
4、支持地理搜索
5、支持图层切换

收藏人数:
下载插件并导入HBuilderX
下载示例项目ZIP
赞赏(0)
下载 396
赞赏 5
下载 11714972
赞赏 1818
赞赏
京公网安备:11010802035340号