Skip to content

Commit 958b8f3

Browse files
peidongGuopeidongGuo
authored
fix(polyline): polyline controlable props (#290)
* feat:修复 LabelMarker，以便兼容高德地图JS API v1.4.xxx。 * fix:修复细节 * feat:添加Polyline-Editor Poly-Editor组件项目，修改PolyLine、Polygon、PolygonEditor组件内容 * feat:添加MouseTool组件项目,以便支持 MouseTool 插件功能。 * fix:修复polyline、polygon 样式属性不可控的问题 * fix:修复文档细节
1 parent 75c54d4 commit 958b8f3

File tree

4 files changed

+162
-26
lines changed

4 files changed

+162
-26
lines changed

‎packages/polygon/README.md

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,107 @@ const Example = () => {
6969
);
7070
}
7171

72+
const Mount = () => (
73+
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
74+
<Example />
75+
</APILoader>
76+
);
77+
78+
export default Mount;
79+
```
80+
81+
### 受控组件
82+
83+
```jsx mdx:preview
84+
import ReactDOM from 'react-dom';
85+
import React, { useState, useRef } from 'react';
86+
import { Map, APILoader, Polygon, ToolBarControl } from '@uiw/react-amap';
87+
88+
const path1 = [
89+
[116.368904,39.913423],
90+
[116.382122,39.901176],
91+
[116.387271,39.912501],
92+
[116.398258,39.904600]
93+
];
94+
95+
const path2 = [
96+
[116.403322, 39.920255],
97+
[116.410703, 39.897555],
98+
[116.410803, 39.897655],
99+
[116.402292, 39.892353],
100+
[116.389846, 39.891365]
101+
];
102+
103+
const path3 = [
104+
[116.413322, 39.920255],
105+
[116.420703, 39.897555],
106+
[116.412292, 39.892353],
107+
[116.399846, 39.891365]
108+
];
109+
110+
const options1={
111+
zIndex:2,
112+
cursor:"text",
113+
strokeWeight:2,
114+
strokeOpacity:1,
115+
strokeColor:"red",
116+
fillColor:"blue",
117+
fillOpacity:0.5,
118+
};
119+
120+
const options2={
121+
zIndex:4,
122+
cursor:"move",
123+
strokeWeight:1,
124+
strokeOpacity:0.5,
125+
strokeColor:"blue",
126+
fillColor:"green",
127+
fillOpacity:1,
128+
};
129+
130+
const Example = () => {
131+
const [show, setShow] = useState(true);
132+
const [paths, setPaths] = useState(path1);
133+
const [options,setOptions]=useState(options1);
134+
return (
135+
<>
136+
<button onClick={() => setShow(!show)}>
137+
{show ? '关闭' : '开启'}
138+
</button>
139+
{show && (
140+
<>
141+
<button onClick={() => setPaths(paths.length === 4 ? path2 : path1)}>
142+
切换路径
143+
</button>
144+
<button onClick={() => setOptions(options.strokeColor === "blue" ? options1 : options2)}>
145+
切换样式
146+
</button>
147+
</>
148+
)}
149+
<div style={{ width: '100%', height: '600px' }}>
150+
<Map zoom={14} center={[116.400274, 39.905812]}>
151+
<Polygon
152+
key="1"
153+
visiable={show}
154+
strokeOpacity={1}
155+
path={paths}
156+
options={options}
157+
/>
158+
<Polygon
159+
key="2"
160+
zIndex={3}
161+
visiable={true}
162+
strokeColor={"yellow"}
163+
strokeOpacity={1}
164+
strokeWeight={4}
165+
path={path3}
166+
/>
167+
</Map>
168+
</div>
169+
</>
170+
);
171+
}
172+
72173
const Mount = () => (
73174
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
74175
<Example />
@@ -82,10 +183,15 @@ export default Mount;
82183

83184
[更多参数设置](https://github.com/uiwjs/react-amap/blob/8a8c31afdff68e04097c2b140e9a58200b269aee/src/types/overlay.d.ts#L832-L865)
84185

186+
[V1.x.xx API](https://lbs.amap.com/api/javascript-api/reference/overlay#polygon)
187+
188+
[V2.x.xx API](https://lbs.amap.com/api/jsapi-v2/documentation#polygon)
189+
85190
| 参数 | 说明 | 类型 | 默认值 |
86191
|--------- |-------- |--------- |-------- |
87192
| visiable | 覆盖物是否可见。 | `boolean` | - |
88193
| path | 多边形轮廓线的节点坐标数组，当为“环”多边形时（多边形区域在多边形内显示为“岛”），path为二维数组，数组元素为多边形轮廓线的节点坐标数组, “环”多边形时，要求数组第一个元素为外多边形，其余为“岛”多边形，外多边形需包含“岛”多边形，否则程序不作处理 | `Array<LngLat>` / `Array<Array<LngLat>>` | - |
194+
| options | 多边形属性（样式风格，包括组成多边形轮廓线的节点、轮廓线样式等）。 | `PolygonOptions` | - |
89195

90196
### 事件
91197

‎packages/polygon/src/usePolygon.tsx

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,7 @@ export const usePolygon = (props = {} as UsePolygon) => {
2929
}, [map]);
3030

3131
useVisiable(polygon!, visiable);
32-
useSettingProperties<AMap.Polygon, UsePolygon>(polygon!, props, [
33-
'Path',
34-
'ZIndex',
35-
'Cursor',
36-
'StrokeColor',
37-
'StrokeOpacity',
38-
'StrokeWeight',
39-
'FillColor',
40-
'FillOpacity',
41-
'StrokeStyle',
42-
'StrokeDasharray',
43-
'Map',
44-
'ExtData',
45-
'Draggable',
46-
]);
32+
useSettingProperties<AMap.Polygon, UsePolygon>(polygon!, props, ['Path', 'Options', 'Map', 'ExtData', 'Draggable']);
4733
useEventProperties<AMap.Polygon, UsePolygon>(polygon!, props, [
4834
'onClick',
4935
'onDblClick',

‎packages/polyline/README.md

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,26 +115,74 @@ const path2 = [
115115
[90.34669, 43.749086],
116116
[87.61792, 43.793308],
117117
];
118-
118+
const path3 = [
119+
[120.098109,31.212311],
120+
[117.518308,31.969555],
121+
[116.329812,31.823006],
122+
[113.363503,30.68583],
123+
[114.861589,28.969429],
124+
[111.937253,28.158361],
125+
];
126+
const options1={
127+
zIndex:2,
128+
cursor:"text",
129+
isOutline:false,
130+
strokeWeight:2,
131+
strokeOpacity:1,
132+
strokeColor:"red",
133+
lineJoin:"bevel",
134+
lineCap:"round",
135+
};
136+
137+
const options2={
138+
zIndex:4,
139+
cursor:"move",
140+
isOutline:true,
141+
outlineColor:"green",
142+
borderWeight:2,
143+
strokeWeight:1,
144+
strokeOpacity:0.5,
145+
strokeColor:"blue",
146+
lineJoin:"round",
147+
lineCap:"square"
148+
149+
};
119150
const Example = () => {
120151
const [show, setShow] = useState(true);
121152
const [paths, setPaths] = useState(path1);
153+
const [options,setOptions]=useState(options1);
122154
return (
123155
<>
124156
<button onClick={() => setShow(!show)}>
125157
{show ? '关闭' : '开启'}
126158
</button>
127159
{show && (
160+
<>
128161
<button onClick={() => setPaths(paths.length === 6 ? path2 : path1)}>
129162
切换路线
130163
</button>
164+
<button onClick={() => setOptions(options.strokeColor === "blue" ? options1 : options2)}>
165+
切换样式
166+
</button>
167+
</>
131168
)}
132169
<div style={{ width: '100%', height: '300px' }}>
133170
<Map zoom={3}>
134171
<Polyline
172+
key="1"
135173
visiable={show}
136174
strokeOpacity={1}
137175
path={paths}
176+
options={options}
177+
/>
178+
<Polyline
179+
key="2"
180+
zIndex={3}
181+
visiable={true}
182+
strokeColor={"yellow"}
183+
strokeOpacity={1}
184+
strokeWeight={4}
185+
path={path3}
138186
/>
139187
</Map>
140188
</div>
@@ -155,10 +203,15 @@ export default Mount;
155203

156204
[更多参数设置](https://github.com/uiwjs/react-amap/blob/268303d/src/types/overlay.d.ts#L275-L370)
157205

206+
[V1.x.xx API](https://lbs.amap.com/api/javascript-api/reference/overlay#polyline)
207+
208+
[V2.x.xx API](https://lbs.amap.com/api/jsapi-v2/documentation#polyline)
209+
158210
| 参数 | 说明 | 类型 | 默认值 |
159211
| ----- | ----- | ----- | ----- |
160212
| visiable | 覆盖物是否可见。 | `boolean` | - |
161213
| path | 路径，支持 lineString 和 MultiLineString。 | `Array<LngLat>` / `Array<Array<LngLat>>` | - |
214+
| options | 折线属性（包括路径的节点、线样式、是否绘制大地线等）。 | `PolylineOptions` | - |
162215

163216
### 事件
164217

‎packages/polyline/src/usePolyline.tsx

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,7 @@ export function usePolyline(props = {} as UsePolyline) {
3131
useVisiable(polyline!, visiable);
3232
useSettingProperties<AMap.Polyline, UsePolyline>(polyline!, props, [
3333
'Path',
34-
'ZIndex',
35-
'Cursor',
36-
'StrokeColor',
37-
'StrokeOpacity',
38-
'StrokeWeight',
39-
'IsOutline',
40-
'BorderWeight',
41-
'OutlineColor',
42-
'StrokeStyle',
43-
'StrokeDasharray',
34+
'Options',
4435
'Map',
4536
'ExtData',
4637
'Draggable',

0 commit comments

Comments
 (0)