Coord Picker

坐标拾取工具。

特性

- 坐标拾取、绘制点位 (双向绑定坐标)
- 拖拉拽绘制折线 (双向绑定坐标)
- 拖拉拽绘制矩形、内嵌贴图的矩形 (双向绑定坐标)
- 拖拉拽绘制多边形 (双向绑定坐标)
- 覆盖物支持只读模式 & 编辑模式
- 支持限定覆盖物的数量上限、下限
- POI 搜索、搜索关键字自动补全
- 根据传参情况智能初始化至合适的位置

安装

``shell
npm i coord-picker
`

$3

- vue@2
- element-ui

$3

`vue



`

$3

`ts
import CoordPicker from 'coord-picker'

Vue.use(CoordPicker, {
// 全局配置
})
`

$3

> ⚠ 暂不支持 (ElementUI 未提供 ESM 导出)

$3

`html

`

属性

> 这里仅列出基础参数，覆盖物的参数请在相关章节查看

| 名称 | 说明 | 类型 | 默认值 |
| ----------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |
| show[.sync] | 开关 | boolean | false |
| mapType | 地图显示模式 ,可以选中在弹窗中显示还是直接显示面板关 | string | dialog -> 弹窗， panel -> 面板 |
| loadOptions | AMapLoader.load 的参数 ，其中 loadOptions.key 必传 | object | |
| mapOptions[.sync] | AMap.Map 的参数 2 | object | |
| city | 初始行政区 | string | |
| lng[.sync] | 经度 | string / number |
| lat[.sync] | 纬度 | string / number |
| precision | 坐标精度（保留几位小数） | number | 6 |
| address[.sync] | 地址 | string |
| addressComponent | 地址成分 | object / (addressComponent: AddressComponent) => string | |
| rangeLimit | 限制绘制内容范围 | function / object | undefined |
| polylineStyle | 线条样式 | object / object | object |
| labelMarkerStyle | 线条label样式 | object / object | object |

> ⚠ 在打开 coord-picker 之前，请确保所有参数已传入，为避免与用户的操作发生冲突，组件内部不会监听参数后续的变化。

$3

高德 Web 服务 API 的同名参数。

可选值：指定城市的中文 (如北京)、指定城市的中文全拼 (beijing)、citycode (010)、adcode (110000)，不支持县级市。当指定城市查询内容为空时，会进行全国范围内的地址转换检索。

adcode 信息可参考城市编码表获取。

长度超过 6 位数？

组件内部做了处理，如果你传入的 city 超过 6 位数，也会以仅保留前 6 位的形式支持。

$3

获取的 address 默认是包含省市区的完整地址，你可以用以下两种方式来自定义地址成分：

- object

`json
{
"province": true, // address 中是否包含省
"city": true, // address 中是否包含市
"district": true // address 中是否包含区县
}
`

- function

`ts
;({ province, city, district }) => ${province} - ${city} - ${district}
`

$3

为什么支持双向绑定？

- mapOptions 包含可能发生变化的属性，如缩放比例 zoom

绘制点位

$3

| 名称 | 说明 | 类型 | 默认值 |
| ------------- | ------------ | --------------------------- | ------ |
| marker[.sync] | 点位列表 | object[] | |
| markerCount | 点位数量限制 | number / [number?, number?] | 1 |

#### markerCount

类型

- number：数量上限
- [number?, number?]：[数量下限，数量上限]

值

- markerCount > 0：开启编辑点位功能
- markerCount === 0：依据 marker 参数渲染点位 (只读)

#### marker

`json
[
// 点位1
{
"lng": "",
"lat": "",
"address": "",
"name": ""
},
// 点位2
{
"lng": "",
"lat": "",
"address": "",
"name": ""
}
]
`

绘制折线

$3

| 名称 | 说明 | 类型 | 默认值 |
| --------------- | ------------ | --------------------------- | ------ |
| polyline[.sync] | 折线列表 | object[] | |
| polylineCount | 折线数量限制 | number / [number?, number?] | 0 |

#### polylineCount

类型

- number：数量上限
- [number?, number?]：[数量下限，数量上限]

值

- polylineCount > 0：开启编辑折线功能
- polylineCount === 0：依据 polyline 参数渲染折线 (只读)

#### polyline

`json
[
// 折线1
{
// 自定义每条折线的样式
"polylineStyle": { "strokeColor": "#00B2D5" },
"path": [
{ "lng": "106.627636", "lat": "26.692251" },
{ "lng": "106.604633", "lat": "26.647459" },
{ "lng": "106.682224", "lat": "26.658505" }
]
},
// 折线2
{
"polylineStyle": { "strokeColor": "#0000FF" },
"path": [
{ "lng": "106.707973", "lat": "26.676606" },
{ "lng": "106.688404", "lat": "26.628739" },
{ "lng": "106.748486", "lat": "26.678447" }
]
}
]
`

绘制矩形

$3

| 名称 | 说明 | 类型 | 默认值 |
| ---------------- | -------------------- | --------------------------- | ------ |
| rectangle[.sync] | 矩形 | object[] | |
| rectangleCount | 矩形数量限制 | number / [number?, number?] | 0 |
| rectangleImage | 嵌在矩形内的贴图链接 | string / string[] | |

#### rectangleCount

类型

- number：数量上限
- [number?, number?]：[数量下限，数量上限]

值

- rectangleCount > 0：开启编辑矩形功能
- rectangleCount === 0：依据 rectangle 参数渲染矩形 (只读)

#### rectangle

`json
[
// 矩形1
{
"image": "贴图链接",
"southwest": { "lng": "经度", "lat": "纬度" }, // 西南角坐标（兼容东南角）
"northeast": { "lng": "经度", "lat": "纬度" } // 东北角坐标（兼容西北角）
},
// 矩形2
{
"image": "贴图链接",
"southwest": { "lng": "经度", "lat": "纬度" }, // 西南角坐标（兼容东南角）
"northeast": { "lng": "经度", "lat": "纬度" } // 东北角坐标（兼容西北角）
}
]
`

绘制多边形

$3

| 名称 | 说明 | 类型 | 默认值 |
| -------------- | -------------- | --------------------------- | ------ |
| polygon[.sync] | 多边形列表 | object[] | |
| polygonCount | 多边形数量限制 | number / [number?, number?] | 0 |

#### polygonCount

类型

- number：数量上限
- [number?, number?]：[数量下限，数量上限]

值

- polygonCount > 0：开启编辑多边形功能
- polygonCount === 0：依据 polygon 参数渲染多边形 (只读)

#### polygon

`json
[
// 多边形1
{
"path": [
{ "lng": "106.44294", "lat": "26.644338" },
{ "lng": "106.431267", "lat": "26.504937" },
{ "lng": "106.569282", "lat": "26.585405" }
]
},
// 多边形2
{
"path": [
{ "lng": "106.623527", "lat": "26.52767" },
{ "lng": "106.602241", "lat": "26.415188" },
{ "lng": "106.721031", "lat": "26.472979" }
]
}
]
`

$3

限制点位和其他内容的绘制范围，超出范围弹窗提测,可以传入函数自定义处理或者传入对象配置

#### 传入函数 function

函数需要为 Promise 风格，函数参数为 points ，验证的点位数组，验证通过时返回 Promise.resolve()， 验证未通过时返回 Promise.reject()。

$3

`json
{
"southwest": { "lng": "经度", "lat": "纬度" }, // 西南角坐标（兼容东南角）
"northeast": { "lng": "经度", "lat": "纬度" }, // 东北角坐标（兼容西北角）
"prompt": "" // 验证未通过时的提醒（可选）， 默认为（绘制内容超出限制范围）
}
`

事件

| 名称 | 说明 | 回调参数 |
| ------- | ---------------------------------------------------------------------------------------------------- | -------- |
| load | 高德地图加载完成时，即 AMapLoader.load().then | AMap |
| error | 调用高德 API 报错时，含 AMapLoader.load().catch | 同高德 |
| confirm | 点击确认按钮时 | |
| cancel | 点击取消按钮时 | |
| ... | el-dialog` 的事件 | |

坐标系统

高德、腾讯地图通用的 GCJ-02

坐标值数据类型

number 和 string 都能接收，但返回时，由于 JS 的 number 类型存在精度丢失问题，故返回 string

高德 JS-API 版本

1.4.15

> 2.0 存在诸多问题，性能也不如 1.x，等待后续更新

命名

为什么不使用全称 longitude 和 latitude？

- 高德自己的 API 也没有完全统一，有的用简称有的用全称，coord-picker 为方便起见统一使用简称 lng 和 lat
- 如果命名 / 格式与你所需不一致，可考虑二次封装

升级日志

$3

feat: 支持配置每条折线的样式

$3

fix: 兼容v2.0版本API

$3

fix: 解决 markerCount 失效问题
feat: 支持配置 polylineStyle、labelMarkerStyle

$3

支持直接 mapType 参数，可直接显示地图面板，而不用嵌入弹窗中，支持同页面同时显示多个地图面板