Skip to content

Commit

Permalink
feat: bezierCurve支持visible属性
Browse files Browse the repository at this point in the history
  • Loading branch information
@yue1123
yue1123 committed Jun 19, 2023
1 parent 1657bcf commit b3037e5
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 22 deletions.
35 changes: 18 additions & 17 deletions docs/zh-CN/components/overlay/bezierCurve.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,28 @@ overlay/bezierCurve

## 动态组件 Props

| 属性 | 说明 | 类型 | 可选值 | 默认值 |
| --------------- | ------------------------------------------- | --------------------------------- | ------------------------- | ---------- |
| path | 贝塞尔曲线的坐标数组 | `{ lng: number, lat: number}[]` | - | `required` |
| controlPoints | 贝塞尔曲线控制点的坐标数组 | `{ lng: number, lat: number}[][]` | - | `required` |
| strokeColor | 描边的颜色，同 CSS 颜色 | `string` | - | `#000000` |
| strokeWeight | 描边的宽度，单位为像素 | `string` | - | `2` |
| strokeOpacity | 描边的透明度，范围 `0-1` | ` number` | - | ` 1` |
| strokeStyle | 描边的样式，为实线、虚线、或者点状线 | `string` | `solid / dashed / dotted` | - |
| enableMassClear | 是否在调用 `map.clearOverlays` 清除此覆盖物 | `boolean` | - | `true ` |
| 属性 | 说明 | 类型 | 可选值 | 默认值 | 版本 |
| --------------- | ------------------------------------------- | --------------------------------- | ------------------------- | ---------- | ---------------------------------- |
| path | 贝塞尔曲线的坐标数组 | `{ lng: number, lat: number}[]` | - | `required` | - |
| controlPoints | 贝塞尔曲线控制点的坐标数组 | `{ lng: number, lat: number}[][]` | - | `required` | - |
| strokeColor | 描边的颜色，同 CSS 颜色 | `string` | - | `#000000` | - |
| strokeWeight | 描边的宽度，单位为像素 | `string` | - | `2` | - |
| strokeOpacity | 描边的透明度，范围 `0-1` | ` number` | - | ` 1` | - |
| strokeStyle | 描边的样式，为实线、虚线、或者点状线 | `string` | `solid / dashed / dotted` | - | - |
| enableMassClear | 是否在调用 `map.clearOverlays` 清除此覆盖物 | `boolean` | - | `true ` | - |
| visible | 是否显示 | `boolean` | - | `true` | <Badge type="tip" text="^2.1.4" /> |

## 组件事件

| 事件名 | 说明 | 类型 |
| ---------- | ------------------------------------------------------------------------------ | --------------------------- |
| initd | 组件初始化后，调用的方法，返回一个地图实例 | `{ map, BmapGL, instance }` |
| unload | 组件卸载时会调用此方法 | - |
| click | 鼠标左键单击事件的回调函数。 当双击时，产生的事件序列为： click click dblclick | ((e: Event) => void) |
| dblclick | 鼠标左键双击事件的回调函数 | ((e: Event) => void) |
| mousedown | 鼠标左键在该覆盖物上按下的回调函数 | ((e: Event) => void) |
| mouseup | 鼠标左键在该覆盖物上抬起的回调函数 | ((e: Event) => void) |
| mouseout | 鼠标指针移出该覆盖物事件的回调函数 | ((e: Event) => void) |
| mouseover | 鼠标指针移入该覆盖物事件的回调函数 | ((e: Event) => void) |
| remove | 该覆盖物被移除的回调函数 | ((e: Event) => void) |
| lineupdate | 覆盖物被编辑后的回调函数 | ((e: Event) => void) |
| click | 鼠标左键单击事件的回调函数。 当双击时，产生的事件序列为： click click dblclick | `((e: Event) => void)` |
| dblclick | 鼠标左键双击事件的回调函数 | `((e: Event) => void)` |
| mousedown | 鼠标左键在该覆盖物上按下的回调函数 | `((e: Event) => void)` |
| mouseup | 鼠标左键在该覆盖物上抬起的回调函数 | `((e: Event) => void)` |
| mouseout | 鼠标指针移出该覆盖物事件的回调函数 | `((e: Event) => void)` |
| mouseover | 鼠标指针移入该覆盖物事件的回调函数 | `((e: Event) => void)` |
| remove | 该覆盖物被移除的回调函数 | `((e: Event) => void)` |
| lineupdate | 覆盖物被编辑后的回调函数 | `((e: Event) => void)` |
21 changes: 16 additions & 5 deletions packages/components/overlay/bezierCurve/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@
* 是否在调用map.clearOverlays清除此覆盖物，默认为true
*/
enableMassClear?: boolean
/**
* 是否可见
*/
visible?: boolean
onClick?: Callback
onDblclick?: Callback
onMousedown?: Callback
Expand All @@ -61,7 +65,8 @@
strokeWeight: 2,
strokeOpacity: 1,
strokeStyle: 'solid',
enableMassClear: true
enableMassClear: true,
visible: true
})
const vueEmits = defineEmits([
'initd',
Expand All @@ -86,7 +91,8 @@
return __DEV__ && warn('BezierCurve path props is required or not empty array')
if (!props.controlPoints || !(props.controlPoints && props.controlPoints.length))
return __DEV__ && warn('BezierCurve controlPoints props is required or not empty array')
const { path, controlPoints, strokeColor, strokeWeight, strokeOpacity, strokeStyle, enableMassClear } = props
const { path, controlPoints, strokeColor, strokeWeight, strokeOpacity, strokeStyle, enableMassClear, visible } =
props
const pathPoints = pathPointsToMapPoints(path)
const _controlPoints = controlPoints.map((points) => {
return pathPointsToMapPoints(points)
Expand All @@ -104,7 +110,7 @@
error(e.message || 'Init bezierCurve overlay error, make sure path and controlPoints data is correct!')
}
map.addOverlay(bezierCurve)
visible && map.addOverlay(bezierCurve)
ready(map, bezierCurve)
bindEvents(props, vueEmits, bezierCurve)
}
Expand Down Expand Up @@ -134,11 +140,17 @@
watch(() => props.strokeWeight, setStrokeWeight)
watch(() => props.strokeStyle, setStrokeStyle)
watch(() => props.enableMassClear, setMassClear)
watch(
() => props.visible,
(n) => {
map[n ? 'addOverlay' : 'removeOverlay'](bezierCurve)
}
)
return cal
})
provide('getOverlayInstance', () => bezierCurve)
defineOptions({ name: 'BBezierCurve' })
function setPath(path: Point[]) {
bezierCurve.setPath(pathPointsToMapPoints(path))
Expand All @@ -162,5 +174,4 @@
function setMassClear(enableMassClear: boolean): void {
enableMassClear ? bezierCurve!.enableMassClear() : bezierCurve!.disableMassClear()
}
defineOptions({ name: 'BBezierCurve' })
</script>

0 comments on commit b3037e5

Please sign in to comment.