diff --git a/src/MarkerCluster/demo.tsx b/src/MarkerCluster/demo.tsx new file mode 100644 index 0000000..41a72f5 --- /dev/null +++ b/src/MarkerCluster/demo.tsx @@ -0,0 +1,78 @@ +/** + * compact: true + * transform: true + * defaultShowCode: true + */ +/** + * @desc 点聚合组件 demo + */ +import React, { useCallback, useRef } from 'react'; +import { Button } from 'tdesign-react'; +import { MarkerCluster, BaseMap } from 'tlbs-map-react'; + +/** 数据 */ +const geometries = [ + { + position: { lat: 39.953416, lng: 116.480945 }, + }, + { + position: { lat: 39.984104, lng: 116.407503 }, + }, + { + position: { lat: 39.908802, lng: 116.497502 }, + }, + { + position: { lat: 40.040417, lng: 116.373514 }, + }, + { + position: { lat: 39.953416, lng: 116.380945 }, + }, + { + position: { lat: 39.984104, lng: 116.307503 }, + }, + { + position: { lat: 39.908802, lng: 116.397502 }, + }, + { + position: { lat: 40.040417, lng: 116.273514 }, + }, +]; + +export default () => { + const markerClusterRef: any = useRef(null); + + /** 打印图层实例 */ + const printInstance = useCallback(() => { + console.log('🚀🚀🚀 打印图层实例', markerClusterRef.current); + }, []); + + /** + * 图层点击事件处理器 + * @param event + */ + const clickHandler = useCallback((event: TMap.MapEvent) => { + console.log('🚀🚀🚀 图层点击事件', event); + }, []); + + return ( +
+
+ +
+ + + +
+ ); +}; diff --git a/src/MarkerCluster/index.md b/src/MarkerCluster/index.md new file mode 100644 index 0000000..d38da39 --- /dev/null +++ b/src/MarkerCluster/index.md @@ -0,0 +1,31 @@ +# 点聚合 MarkerCluster + +**1. 组件示例** + + +:::info{title=提示} +点击地图下方最右侧图标 `` 可展开代码 +::: + +**2. 组件 Props** + +| 属性 | 类型 | 说明 | 可选性 | 默认值 | +| :---------- | :------------------------------------------------------------------------------------------------------------------------------------ | :---------------------------- | :----- | :--------- | +| id | string | 图层 id，若没有会自动分配一个 | 可选 | | +| geometries | [PointGeometry[]](https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker#6) | 点聚合数据数组 | 可选 | [] | +| **options** | [Omit](https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocCluster#2) | 点聚合配置参数(官网) | 可选 | 官网默认值 | + +**MarkerClusterOptions** +| 属性名称 | 类型 | 说明 | +| :--------- | :-------------------- | :------------------------------ | +| id | String | 图层 id，若没有会自动分配一个。 | +| map | Map | 显示点聚合图层的底图。 | +| zIndex | Number | 图层绘制顺序。 | +| geometries | PointGeometry[] | 点聚合数据数组。 | +| enableDefaultStyle | Boolean | 是否启用默认的聚合样式。 | +| minimumClusterSize | Number | 形成聚合簇的最小个数，默认为 2。 | +| zoomOnClick | Boolean | 点击已经聚合的标记点时是否实现聚合分离，默认为 true。 | +| gridSize | Number | 聚合算法的可聚合距离，即距离小于该值的点会聚合至一起，默认为 60，以像素为单位，指的是地图 pitch 为 0 时的屏幕像素大小。 | +| averageCenter | Boolean | 每个聚和簇的中心是否应该是聚类中所有标记的平均值，默认为 false。 | +| maxZoom | Number | 采用聚合策略的最大缩放级别，若地图缩放级别大于该值，则不进行聚合。默认为 20。 | +| collisionOptions |[CollisionOptions](https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocCluster#4) | 图层碰撞配置参数。 | diff --git a/src/MarkerCluster/index.tsx b/src/MarkerCluster/index.tsx new file mode 100644 index 0000000..f19ad23 --- /dev/null +++ b/src/MarkerCluster/index.tsx @@ -0,0 +1,82 @@ +/** + * @desc 点聚合组件 + */ +import React, { useContext, useEffect, useImperativeHandle, useState } from 'react'; +import { MapContext, useEventListener } from 'tlbs-map-react'; +import { CustomPointGeometry } from 'tlbs-map-react/interfaces'; + +/** + * 生成几何信息数组 + * @param geos 几何信息数组 + */ +const getGeometries = (geos: CustomPointGeometry[]) => geos.map((item) => { + const { position, ...rest } = item; + return { + ...rest, + position: new TMap.LatLng(item.position.lat, item.position.lng), + }; +}); + +interface MarkerClusterProps { + /** + * 图层id，若没有会自动分配一个 + */ + id?: string; + /** + * 点聚合数据数组 + */ + geometries?: CustomPointGeometry[] + /** + * GL API 参数 + */ + options?: Omit; + [key: string]: any; +} + +const MarkerClusterComponent: React.FC = React.forwardRef((props, ref) => { + const { + id, + geometries = [], + options = {}, + } = props as MarkerClusterProps; + + const map = useContext(MapContext); // 获取地图实例 + const [instance, setInstance] = useState(); // 存储点聚合图层实例 + + /** 初始化点聚合图层 */ + const initMarkerCluster = () => { + if (!map) return; + + const markerClusterInstance = new TMap.MarkerCluster({ + ...options, + map, + id, + geometries: getGeometries(geometries), + }); + setInstance(markerClusterInstance); + }; + + // @hook 初始化点聚合图层 + useEffect(() => { + if (!instance) initMarkerCluster(); + + return () => { + instance?.setMap(null); + }; + }, [map, instance]); + + // @hook 绑定事件 + useEventListener(instance, props); + + // @hook 给父组件暴露实例 + useImperativeHandle(ref, () => instance, [instance]); + + // @hook 监听几何信息改变 + useEffect(() => { + instance?.setGeometries(getGeometries(geometries)); + }, [geometries]); + + return null; +}); + +export default MarkerClusterComponent; diff --git a/src/MultiCircle/demo.tsx b/src/MultiCircle/demo.tsx index a063a71..fe012c5 100644 --- a/src/MultiCircle/demo.tsx +++ b/src/MultiCircle/demo.tsx @@ -1,44 +1,60 @@ - +/** + * compact: true + * transform: true + * defaultShowCode: true + */ +/** + * @desc 圆形组件 demo + */ import React, { useCallback, useRef, useState } from 'react'; -import { MultiCircle, BaseMap } from 'tlbs-map-react'; import { Button } from 'tdesign-react'; +import { MultiCircle, BaseMap } from 'tlbs-map-react'; /** 样式 */ const styles = { - circleStyle1: { - color: 'rgba(41,91,255,0.16)', + circle1: { + color: 'rgba(255, 73, 0, 0.2)', + borderColor: '#FF4900', showBorder: true, - borderColor: 'rgba(41,91,255,1)', - borderWidth: 2, }, - circleStyle2: { - color: 'rgba(41,91,255, 0.6)', + circle2: { + color: 'rgba(255, 206, 0, 0.2)', + borderColor: '#FC0', showBorder: true, - borderColor: 'rgba(41,91,255,1)', - borderWidth: 2, }, }; /** 数据 */ -const geometriesData1 = [{ - styleId: 'circleStyle1', - center: { lat: 40.0404, lng: 116.2735 }, - radius: 100, -}]; -const geometriesData2 = [{ - styleId: 'circleStyle2', - center: { lat: 40.0415, lng: 116.2763 }, - radius: 100, -}]; - +const geometriesData1 = [ + { + styleId: 'circle1', + center: { lat: 40.0404, lng: 116.2735 }, + radius: 100, + }, +]; +const geometriesData2 = [ + { + styleId: 'circle2', + center: { lat: 40.0415, lng: 116.2763 }, + radius: 80, + }, +]; export default () => { - const layerRef: any = useRef(null); // 图层实例 + const circleRef: any = useRef(null); + const [geometries, setGeometries] = useState(geometriesData1); - const [geometries, setGeometries] = useState(geometriesData1); /** 打印图层实例 */ const printInstance = useCallback(() => { - console.log('🚀🚀🚀 打印图层实例', layerRef.current); + console.log('🚀🚀🚀 打印图层实例', circleRef.current); + }, []); + + /** + * 图层点击事件处理器 + * @param event + */ + const clickHandler = useCallback((event: TMap.MapEvent) => { + console.log('🚀🚀🚀 图层点击事件', event); }, []); return ( @@ -48,24 +64,23 @@ export default () => { 打印图层实例 diff --git a/src/MultiCircle/index.tsx b/src/MultiCircle/index.tsx index 27761ec..6c0a404 100644 --- a/src/MultiCircle/index.tsx +++ b/src/MultiCircle/index.tsx @@ -1,57 +1,78 @@ - -import React, { useContext, useEffect, useImperativeHandle, useState, type FC } from 'react'; +/** + * @desc 圆形组件 + */ +import React, { useContext, useEffect, useImperativeHandle, useState } from 'react'; import { MapContext, useEventListener } from 'tlbs-map-react'; +import { CustomCircleGeometry } from 'tlbs-map-react/interfaces'; import { getStyle } from 'tlbs-map-react/utils'; -export function getGeometries(geometries: TMap.CircleGeometry[]): TMap.CircleGeometry[] { - return geometries.map((item: TMap.CircleGeometry) => ({ - ...item, - center: new TMap.LatLng(item.center.lat, item.center.lng), - })); -} +/** + * 生成几何信息数组 + * @param geos 几何信息数组 + */ +const getGeometries = (geos: CustomCircleGeometry[]) => geos.map((item) => { + const { center, ...rest } = item; + return { + ...rest, + center: new TMap.LatLng(center.lat, center.lng), + }; +}); interface MultiCircleProps { + /** + * 是否显示圆形组件 + */ + visible?: boolean; /** * 图层id，若没有会自动分配一个 */ id?: string; - styles?: { [key: string]: TMap.CircleStyleOptions }; - gemeitries?: TMap.CircleGeometry[]; - options?: Omit; + /** + * 圆形相关样式 + */ + styles?: TMap.MultiCircleStyleHash; + /** + * 圆形数据数组 + */ + geometries?: CustomCircleGeometry[] + /** + * GL API 参数 + */ + options?: Omit; [key: string]: any; } -const MultiCircleComponent: FC = React.forwardRef((props, ref) => { - const map = useContext(MapContext); // 获取地图实例 - const [instance, setInstance] = useState(); // 存储圆形图层实例 - +const MultiCircleComponent: React.FC = React.forwardRef((props, ref) => { const { + visible = true, id, styles = {}, geometries = [], options = {}, - }: MultiCircleProps = props as MultiCircleProps; + } = props as MultiCircleProps; + + const map = useContext(MapContext); // 获取地图实例 + const [instance, setInstance] = useState(); // 存储圆形图层实例 - /** 初始化图层 */ + /** 初始化圆形图层 */ const initMultiCircle = () => { if (!map) return; - // 图层初始化代码 + const multiCircleInstance = new TMap.MultiCircle({ + ...options, id, map, styles: getStyle('circle', styles), geometries: getGeometries(geometries), - ...options, }); setInstance(multiCircleInstance); }; - // @hook 初始化图层 + // @hook 初始化圆形图层 useEffect(() => { if (!instance) initMultiCircle(); return () => { - // 图层销毁 instance?.setMap(null); }; }, [map, instance]); @@ -72,6 +93,11 @@ const MultiCircleComponent: FC = React.forwardRef((props, ref) instance?.setGeometries(getGeometries(geometries)); }, [geometries]); + // @hook 监听图层可见性改变 + useEffect(() => { + instance?.setVisible(visible); + }, [visible, instance]); + return null; }); diff --git a/src/MultiEllipse/demo.tsx b/src/MultiEllipse/demo.tsx new file mode 100644 index 0000000..56779f0 --- /dev/null +++ b/src/MultiEllipse/demo.tsx @@ -0,0 +1,90 @@ +/** + * compact: true + * transform: true + * defaultShowCode: true + */ +/** + * @desc 椭圆组件 demo + */ +import React, { useCallback, useRef, useState } from 'react'; +import { Button } from 'tdesign-react'; +import { MultiEllipse, BaseMap } from 'tlbs-map-react'; + +/** 样式 */ +const styles = { + ellipse1: { + color: 'rgba(255, 73, 0, 0.2)', + borderColor: '#FF4900', + showBorder: true, + }, + ellipse2: { + color: 'rgba(255, 206, 0, 0.2)', + borderColor: '#FC0', + showBorder: true, + }, +}; + +/** 数据 */ +const geometriesData1 = [ + { + styleId: 'ellipse1', + center: { lat: 40.0404, lng: 116.2735 }, + majorRadius: 100, + minorRadius: 80, + }, +]; +const geometriesData2 = [ + { + styleId: 'ellipse2', + center: { lat: 40.0415, lng: 116.2763 }, + majorRadius: 80, + minorRadius: 100, + }, +]; + +export default () => { + const ellipseRef: any = useRef(null); + const [geometries, setGeometries] = useState(geometriesData1); + + /** 打印图层实例 */ + const printInstance = useCallback(() => { + console.log('🚀🚀🚀 打印图层实例', ellipseRef.current); + }, []); + + /** + * 图层点击事件处理器 + * @param event + */ + const clickHandler = useCallback((event: TMap.MapEvent) => { + console.log('🚀🚀🚀 图层点击事件', event); + }, []); + + return ( +
+
+ + + +
+ + + +
+ ); +}; diff --git a/src/MultiEllipse/index.md b/src/MultiEllipse/index.md new file mode 100644 index 0000000..a2635dd --- /dev/null +++ b/src/MultiEllipse/index.md @@ -0,0 +1,26 @@ +# 椭圆 MultiEllipse + +**1. 组件示例** + + +:::info{title=提示} +点击地图下方最右侧图标 `` 可展开代码 +::: + +**2. 组件 Props** + +| 属性 | 类型 | 说明 | 可选性 | 默认值 | +| :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------- | :----- | :--------- | +| id | string | 图层 id，若没有会自动分配一个 | 可选 | | +| styles | [MultiEllipseStyleHash](https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector#MultiEllipseStyleHash) | 椭圆相关样式 | 可选 | {} | +| geometries | [EllipseGeometry[]](https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector#EllipseGeometry) | 椭圆数据数组 | 可选 | [] | +| **options** | [Omit](https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector#MultiEllipseOptions) | 椭圆配置参数(官网) | 可选 | 官网默认值 | + +**MultiEllipseOptions** +| 属性名称 | 类型 | 说明 | +| :--------- | :-------------------- | :------------------------------ | +| id | String | 图层 id，若没有会自动分配一个。 | +| map | Map | 显示椭圆图层的底图。 | +| zIndex | Number | 图层绘制顺序。 | +| styles | MultiEllipseStyleHash | 椭圆的相关样式。 | +| geometries | PolygonGeometry[] | 椭圆数据数组。 | diff --git a/src/MultiEllipse/index.tsx b/src/MultiEllipse/index.tsx new file mode 100644 index 0000000..da08849 --- /dev/null +++ b/src/MultiEllipse/index.tsx @@ -0,0 +1,108 @@ +/** + * @desc 椭圆组件 + */ +import React, { useContext, useEffect, useImperativeHandle, useState } from 'react'; +import { MapContext, useEventListener } from 'tlbs-map-react'; +import { CustomEllipseGeometry } from 'tlbs-map-react/interfaces'; +import { getStyle } from 'tlbs-map-react/utils'; + +/** + * 生成几何信息数组 + * @param geos 几何信息数组 + */ +const getGeometries = (geos: CustomEllipseGeometry[]) => geos.map((item) => { + const { center, ...rest } = item; + return { + ...rest, + center: new TMap.LatLng(center.lat, center.lng), + }; +}); + +interface MultiEllipseProps { + /** + * 是否显示椭圆组件 + */ + visible?: boolean; + /** + * 图层id，若没有会自动分配一个 + */ + id?: string; + /** + * 椭圆相关样式 + */ + styles?: TMap.MultiEllipseStyleHash; + /** + * 椭圆数据数组 + */ + geometries?: CustomEllipseGeometry[] + /** + * GL API 参数 + */ + options?: Omit; + [key: string]: any; +} + +const MultiEllipseComponent: React.FC = React.forwardRef((props, ref) => { + const { + visible = true, + id, + styles = {}, + geometries = [], + options = {}, + } = props as MultiEllipseProps; + + const map = useContext(MapContext); // 获取地图实例 + const [instance, setInstance] = useState(); // 存储椭圆图层实例 + + /** 初始化椭圆图层 */ + const initMultiEllipse = () => { + if (!map) return; + + const multiEllipseInstance = new TMap.MultiEllipse({ + ...options, + id, + map, + styles: getStyle('ellipse', styles), + geometries: getGeometries(geometries), + }); + setInstance(multiEllipseInstance); + }; + + // @hook 初始化椭圆图层 + useEffect(() => { + if (!instance) initMultiEllipse(); + + return () => { + // NOTE tmap-gl-types 库中 MultiEllipse 类定义错误，没有 extends GeometryOverlay + // @ts-ignore + instance?.setMap(null); + }; + }, [map, instance]); + + // @hook 绑定事件 + useEventListener(instance, props); + + // @hook 给父组件暴露实例 + useImperativeHandle(ref, () => instance, [instance]); + + // @hook 监听样式改变 + useEffect(() => { + instance?.setStyles(getStyle('ellipse', styles)); + }, [styles]); + + // @hook 监听几何信息改变 + useEffect(() => { + instance?.setGeometries(getGeometries(geometries)); + }, [geometries]); + + // @hook 监听图层可见性改变 + useEffect(() => { + // NOTE tmap-gl-types 库中 MultiEllipse 类定义错误，没有 extends GeometryOverlay + // @ts-ignore + instance?.setVisible(visible); + }, [visible, instance]); + + return null; +}); + +export default MultiEllipseComponent; diff --git a/src/MultiRectangle/demo.tsx b/src/MultiRectangle/demo.tsx new file mode 100644 index 0000000..fa23a4b --- /dev/null +++ b/src/MultiRectangle/demo.tsx @@ -0,0 +1,90 @@ +/** + * compact: true + * transform: true + * defaultShowCode: true + */ +/** + * @desc 矩形组件 demo + */ +import React, { useCallback, useRef, useState } from 'react'; +import { Button } from 'tdesign-react'; +import { MultiRectangle, BaseMap } from 'tlbs-map-react'; + +/** 样式 */ +const styles = { + rectangle1: { + color: 'rgba(255, 73, 0, 0.2)', + borderColor: '#FF4900', + showBorder: true, + }, + rectangle2: { + color: 'rgba(255, 206, 0, 0.2)', + borderColor: '#FC0', + showBorder: true, + }, +}; + +/** 数据 */ +const geometriesData1 = [ + { + styleId: 'rectangle1', + center: { lat: 40.0404, lng: 116.2735 }, + width: 100, + height: 200, + }, +]; +const geometriesData2 = [ + { + styleId: 'rectangle2', + center: { lat: 40.0415, lng: 116.2763 }, + width: 200, + height: 100, + }, +]; + +export default () => { + const rectangleRef: any = useRef(null); + const [geometries, setGeometries] = useState(geometriesData1); + + /** 打印图层实例 */ + const printInstance = useCallback(() => { + console.log('🚀🚀🚀 打印图层实例', rectangleRef.current); + }, []); + + /** + * 图层点击事件处理器 + * @param event + */ + const clickHandler = useCallback((event: TMap.MapEvent) => { + console.log('🚀🚀🚀 图层点击事件', event); + }, []); + + return ( +
+
+ + + +
+ + + +
+ ); +}; diff --git a/src/MultiRectangle/index.md b/src/MultiRectangle/index.md new file mode 100644 index 0000000..3682072 --- /dev/null +++ b/src/MultiRectangle/index.md @@ -0,0 +1,26 @@ +# 矩形 MultiRectangle + +**1. 组件示例** + + +:::info{title=提示} +点击地图下方最右侧图标 `` 可展开代码 +::: + +**2. 组件 Props** + +| 属性 | 类型 | 说明 | 可选性 | 默认值 | +| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------------------- | :----- | :--------- | +| id | string | 图层 id，若没有会自动分配一个 | 可选 | | +| styles | [MultiRectangleStyleHash](https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector#MultiRectangleStyleHash) | 矩形相关样式 | 可选 | {} | +| geometries | [RectangleGeometry[]](https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector#RectangleGeometry) | 矩形数据数组 | 可选 | [] | +| **options** | [Omit](https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector#MultiRectangleOptions) | 矩形配置参数(官网) | 可选 | 官网默认值 | + +**MultiRectangleOptions** +| 属性名称 | 类型 | 说明 | +| :--------- | :-------------------- | :------------------------------ | +| id | String | 图层 id，若没有会自动分配一个。 | +| map | Map | 显示矩形图层的底图。 | +| zIndex | Number | 图层绘制顺序。 | +| styles | MultiRectangleStyleHash | 矩形的相关样式。 | +| geometries | PolygonGeometry[] | 矩形数据数组。 | diff --git a/src/MultiRectangle/index.tsx b/src/MultiRectangle/index.tsx new file mode 100644 index 0000000..d1d7b0e --- /dev/null +++ b/src/MultiRectangle/index.tsx @@ -0,0 +1,104 @@ +/** + * @desc 矩形组件 + */ +import React, { useContext, useEffect, useImperativeHandle, useState } from 'react'; +import { MapContext, useEventListener } from 'tlbs-map-react'; +import { CustomRectangleGeometry } from 'tlbs-map-react/interfaces'; +import { getStyle } from 'tlbs-map-react/utils'; + +/** + * 生成几何信息数组 + * @param geos 几何信息数组 + */ +const getGeometries = (geos: CustomRectangleGeometry[]) => geos.map((item) => { + const { center, ...rest } = item; + return { + ...rest, + center: new TMap.LatLng(center.lat, center.lng), + }; +}); + +interface MultiRectangleProps { + /** + * 是否显示矩形组件 + */ + visible?: boolean; + /** + * 图层id，若没有会自动分配一个 + */ + id?: string; + /** + * 矩形相关样式 + */ + styles?: TMap.MultiRectangleStyleHash; + /** + * 矩形数据数组 + */ + geometries?: CustomRectangleGeometry[] + /** + * GL API 参数 + */ + options?: Omit; + [key: string]: any; +} + +const MultiRectangleComponent: React.FC = React.forwardRef((props, ref) => { + const { + visible = true, + id, + styles = {}, + geometries = [], + options = {}, + } = props as MultiRectangleProps; + + const map = useContext(MapContext); // 获取地图实例 + const [instance, setInstance] = useState(); // 存储矩形图层实例 + + /** 初始化矩形图层 */ + const initMultiRectangle = () => { + if (!map) return; + + const multiRectangleInstance = new TMap.MultiRectangle({ + ...options, + id, + map, + styles: getStyle('rectangle', styles), + geometries: getGeometries(geometries), + }); + setInstance(multiRectangleInstance); + }; + + // @hook 初始化矩形图层 + useEffect(() => { + if (!instance) initMultiRectangle(); + + return () => { + instance?.setMap(null); + }; + }, [map, instance]); + + // @hook 绑定事件 + useEventListener(instance, props); + + // @hook 给父组件暴露实例 + useImperativeHandle(ref, () => instance, [instance]); + + // @hook 监听样式改变 + useEffect(() => { + instance?.setStyles(getStyle('rectangle', styles)); + }, [styles]); + + // @hook 监听几何信息改变 + useEffect(() => { + instance?.setGeometries(getGeometries(geometries)); + }, [geometries]); + + // @hook 监听图层可见性改变 + useEffect(() => { + instance?.setVisible(visible); + }, [visible, instance]); + + return null; +}); + +export default MultiRectangleComponent; diff --git a/src/index.ts b/src/index.ts index f65f4db..638fd84 100644 --- a/src/index.ts +++ b/src/index.ts @@ -13,3 +13,6 @@ export { default as MultiMarker } from './MultiMarker'; export { default as MultiPolygon } from './MultiPolygon'; export { default as MultiPolyline } from './MultiPolyline'; export { default as MultiCircle } from './MultiCircle'; +export { default as MarkerCluster } from './MarkerCluster'; +export { default as MultiRectangle } from './MultiRectangle'; +export { default as MultiEllipse } from './MultiEllipse'; diff --git a/src/interfaces.ts b/src/interfaces.ts index 691b106..6f8b386 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -19,7 +19,7 @@ export interface CustomMapOptions extends Omit { position: TMap.LatLngData; } @@ -44,6 +44,21 @@ export interface CustomPolygonGeometry extends Omit { + center: TMap.LatLngData; +} + +/* ------------------------- Circle ------------------------- */ +export interface CustomCircleGeometry extends Omit { + center: TMap.LatLngData; +} + +/* ------------------------- Ellipse ------------------------- */ +export interface CustomEllipseGeometry extends Omit { + center: TMap.LatLngData; +} + /* ------------------------- Arc ------------------------- */ export interface CustomArcLine extends Omit { from: TMap.LatLngData; diff --git a/src/utils.ts b/src/utils.ts index b5d3ba5..48bec0d 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -50,7 +50,9 @@ export const getStyle = ( | TMap.MultiLabelStyleHash | TMap.MultiPolylineStyleHash | TMap.MultiPolygonStyleHash - | TMap.MultiCircleStyleHash, + | TMap.MultiCircleStyleHash + | TMap.MultiRectangleStyleHash + | TMap.MultiEllipseStyleHash, ) => { const styles: any = {}; @@ -66,10 +68,20 @@ export const getStyle = ( styles[item] = new TMap.PolylineStyle(stylesObj[item]); break; case 'polygon': - styles[item] = new TMap.PolygonStyle(stylesObj[item]); + if ((stylesObj[item] as TMap.MultiPolygonStyleHash).extrudeHeight) { + styles[item] = new TMap.ExtrudablePolygonStyle(stylesObj[item]); + } else { + styles[item] = new TMap.PolygonStyle(stylesObj[item]); + } break; case 'circle': styles[item] = new TMap.CircleStyle(stylesObj[item]); + case 'rectangle': + styles[item] = new TMap.RectangleStyle(stylesObj[item]); + break; + case 'ellipse': + styles[item] = new TMap.EllipseStyle(stylesObj[item]); + break; default: break; }