更新记录

1.0.5（2025-12-28）

修改bug

1.0.4（2025-12-28）

修改bug

1.0.3（2025-12-28）

新增简介

平台兼容性

uni-app(4.41)

uni-app x(4.41)

ch-map_line 地图线路组件

组件简介

ch-map_line 是一个基于 Leaflet 的地图线路绘制组件，支持在地图上显示起点、终点、途经点以及线路连接，同时提供了编辑模式用于添加途经点。

组件功能

• 基于 Leaflet 渲染地图
• 支持天地图影像底图和矢量注记层
• 显示起点、终点和途经点标记
• 绘制连接各点的线路
• 编辑模式下支持添加途经点
• 响应式更新，支持动态修改点坐标
• 自动计算并居中显示地图视图

依赖说明

• Vue 3
• Leaflet
• leaflet.css

组件属性

组件事件

使用示例

基本使用

<template>
  <ch-map_line
    :start-point="startPoint"
    :end-point="endPoint"
    :waypoints="waypoints"
  />
</template>

<script setup>
import { ref } from 'vue'

const startPoint = ref({
  lat: 31.2304,
  lng: 121.4737,
  name: '上海'
})

const endPoint = ref({
  lat: 39.9042,
  lng: 116.4074,
  name: '北京'
})

const waypoints = ref([
  {
    lat: 32.0603,
    lng: 118.7969,
    name: '南京'
  },
  {
    lat: 34.7466,
    lng: 113.6254,
    name: '郑州'
  }
])
</script>

编辑模式

<template>
  <ch-map_line
    :start-point="startPoint"
    :end-point="endPoint"
    :waypoints="waypoints"
    :is-edit="true"
    @waypoints-selected="handleWaypointsSelected"
  />
</template>

<script setup>
import { ref } from 'vue'

const startPoint = ref({
  lat: 31.2304,
  lng: 121.4737,
  name: '上海'
})

const endPoint = ref({
  lat: 39.9042,
  lng: 116.4074,
  name: '北京'
})

const waypoints = ref([])

const handleWaypointsSelected = (newWaypoints) => {
  console.log('选择的途经点:', newWaypoints)
  waypoints.value = newWaypoints
}
</script>

文件结构

ch-map_line/
├── components/
│   └── ch-map_line/
│       └── ch-map_line.uvue  # 地图线路组件
├── static/
│   └── ch-map/              # 静态资源
│       ├── start.png        # 起点图标
│       ├── end.png          # 终点图标
│       ├── circle.png       # 途经点图标
│       └── marker-icon.png  # 编辑模式标记图标
├── utssdk/                  # UTS SDK 相关文件
├── changelog.md            # 更新日志
├── package.json            # 包配置
└── readme.md               # 组件文档

编辑模式说明

在编辑模式下：

1. 点击地图可以移动当前标记点
2. 双击地图可以添加途经点
3. 点击"确认添加"按钮可以提交当前选择的途经点

注意事项

1. 请确保提供有效的天地图 API 密钥
2. 组件需要加载以下静态资源：
   • /static/ch-map/start.png (起点图标，尺寸: 50x50)
   • /static/ch-map/end.png (终点图标，尺寸: 50x50)
   • /static/ch-map/circle.png (途经点图标，尺寸: 20x20)
   • /static/ch-map/marker-icon.png (编辑模式标记图标，尺寸: 18x30)
3. 地图容器需要设置合适的高度和宽度
4. 编辑模式下：
   • 单击地图可移动当前标记点
   • 双击地图可添加途经点
   • 点击"确认添加"按钮提交当前选择的途经点
5. 组件依赖 Leaflet 库，需要确保已正确安装
6. 地图初始视图会自动计算并居中显示在起点和终点的中间位置
7. 线路样式：蓝色(#1381ffff)，宽度3px，透明度0.8

更新日志

• v1.0.0：
  • 初始版本
  • 支持显示起点、终点和途经点
  • 支持线路绘制
  • 支持编辑模式添加途经点

开发文档

UTS 语法 UTS API插件 UTS uni-app兼容模式组件 UTS 标准模式组件 Hello UTS