需求:在地图上选点绘制,形成路径,最终输出经纬度/高度集合。
效果图:右键结束选点,选点之后添加路径配置信息。
代码:
<template>
<div class="draw-path-wrap">
<div class="path-list">
<div
class="path-item"
v-for="(item, index) in pathList.data"
:key="index"
@click="drawPathByData(item)"
>
<div>{
{ item.name }}</div>
</div>
</div>
<div class="create-path-btn" @click="drawPath">
<el-icon><Plus /></el-icon>
</div>
</div>
<el-dialog
v-model="dialogVisible"
title="路径配置"
width="500"
:close-on-press-escape="false"
:close-on-click-modal="false"
:show-close="false"
>
<el-form
ref="pathFormRef"
:model="pathForm"
label-width="auto"
:rules="rules"
>
<el-form-item label="路径名称" prop="name">
<el-input v-model="pathForm.name" placeholder="请输入路径名称" />
</el-form-item>
<el-form-item label="路径高度" prop="height">
<el-input v-model="pathForm.height" placeholder="请输入路径高度" />
</el-form-item>
</el-form>
<template #footer