Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

控制多边形圆形等的内部颜色,边框颜色等,都不是响应式 #324

Open
indredK opened this issue Aug 3, 2023 · 3 comments

Comments

@indredK
Copy link

indredK commented Aug 3, 2023

<Polygon
visiable={item.enabled}
key={item.geofenceId + "Polygon"}
path={item.geometry.coordinates}
fillColor={getColor(item)}
strokeColor={getColor(item)}
extData={{ status: "ready", id: item.geofenceId }}
onClick={(e: any) => {
setID(item.geofenceId);
setcontent(item);
(winRef.current as any)?.infoWindow.open(mapRef.current.map, [
e.lnglat.getLng?.(),
e.lnglat.getLat?.(),
]);
}}
/>
必须手动去改fillColor、strokeColor才能让地图上的形状变颜色

@jaywcjlove
Copy link
Member

useSettingProperties<AMap.Polygon, UsePolygon>(polygon!, props, ['Path', 'Options', 'Map', 'ExtData', 'Draggable']);

@indredK 我看了一下,控制颜色边框都是通过 options 控制的

<Polyline
   options={{}}
/>

@jaywcjlove
Copy link
Member

interface PolylineOptions {
/**
* polyline 路径,支持 lineString 和 MultiLineString
*/
path?: Array<LngLat> | Array<Array<LngLat>>;
/**
* 多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时,通过该属性使级别较高的多边形覆盖物在上层显示
* @default 10 默认值
*/
zIndex?: number;
/**
* 是否将覆盖物的鼠标或touch等事件冒泡到地图上(自v1.3 新增)
* @default false 默认值
*/
bubble?: boolean;
/**
* 指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持 `cur/ani/ico` 格式,Opera 不支持自定义 `cursor`
*/
cursor?: string;
/**
* 线条颜色,使用16进制颜色代码赋值。默认值为 `#00D3FC`
* @default "#00D3FC" 默认值
*/
strokeColor?: string;
/**
* 轮廓线透明度,取值范围 [0,1] ,0表示完全透明,1表示不透明。默认为0.5
* @default 0.5 默认值
*/
strokeOpacity?: number;
/**
* 轮廓线宽度
* @default 2 默认值
*/
strokeWeight?: number;
/**
* 是否显示描边,默认 `false`
* @default false 默认值
*/
isOutline?: boolean;
/**
* 描边的宽度,默认为 `1`
* @default 1 默认值
*/
borderWeight?: number;
/**
* @default '#00B2D5' 默认值
*/
outlineColor?: string;
/**
* 设置多边形是否可拖拽移动,默认为 `false`
* @default false 默认值
*/
draggable?: boolean;
/**
* 用户自定义属性,支持 `JavaScript API` 任意数据类型,如 `Polygon` 的 `id` 等
*/
extData?: any;
/**
* 轮廓线样式,实线:solid,虚线:dashed
* @default 'solid' 默认值
*/
strokeStyle?: 'solid' | 'dashed';
/**
* 勾勒形状轮廓的虚线和间隙的样式,此属性在 strokeStyle 为 dashed 时有效, 此属性在 `ie9+` 浏览器有效
* > **取值**
* - 实线: [0,0,0]
* - 虚线: [10,10],[10,10] 表示10个像素的实线和10个像素的空白(如此反复)组成的虚线
* - 点画线: [10,2,10],[10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实线和10个像素的空白 (如此反复)组成的虚线
*/
strokeDasharray?: Array<number>;
/**
* 折线拐点的绘制样式,默认值为 `miter` 尖角,其他可选值:`round` 圆角、`bevel` 斜角
* @default 'miter' 默认值
*/
lineJoin?: 'miter' | 'round' | 'bevel';
/**
* 折线两端线帽的绘制样式,默认值为 `butt` 无头,其他可选值:`round` 圆头、`square` 方头
* @default 'butt' 默认值
*/
lineCap?: 'butt' | 'round' | 'square';
/**
* 是否绘制成大地线,默认false
* @default false 默认值
*/
geodesic?: boolean;
/**
* 是否延路径显示白色方向箭头,默认false。建议折线宽度大于6时使用
* @default false 默认值
*/
showDir?: boolean;

直接通过 props 去控制属性有点多,还没有想出好的方式处理,通过 props 处理,是使用的 地图API setOptions 去更新的

@jaywcjlove
Copy link
Member

@indredK 升级到 v5.0.9 解决了问题

github-actions bot pushed a commit that referenced this issue Aug 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants