feat: 完善 prism 组件及其文档

docs/zh/overlay/prism.md

@@ -1,6 +1,6 @@
 # Prism 3d棱柱
 
-在地图上绘制简单的多边形
+通过该组件可在地图上绘制3d棱柱，可以基于位置经纬度，高度，顶面和侧面的颜色、透明度等属性来绘制不规则的棱柱体。
 
 ```ts
 import { Prism } from 'vue3-baidu-map-gl'
@@ -19,54 +19,104 @@ import { Prism } from 'vue3-baidu-map-gl'
   >
     <Prism
       isBoundary
+      :path="point"  
       :autoCenter='false'
-      @initd="handleInitd"
-      topFillColor='#5679ea'
-      :topFillOpacity='0.5'
-      sideFillColor='#5679ea'
+      :topFillOpacity='topFillOpacity'
       :sideFillOpacity='0.9'
       :altitude='5000'
-      :path="point" 
+      sideFillColor='#5679ea'
+      topFillColor='#5679ea'
+      @initd="handleInitd"
+      @mouseover="handleMouseover"
+      @mouseout="handleMouseout"
     />
   </Map>
 </div>
 
 <script setup lang="ts">
   import { ref, watch } from 'vue'
   import { useAreaBoundary } from '../../../packages/index.ts'
+  const topFillOpacity = ref<number>(0.5)
   const area = ref<string>('北京市')
-
   const { isLoading, boundaries: point, get } = useAreaBoundary()  
 
   function handleInitd(){
     get(area.value)
   }
+
+  function handleMouseover(){
+    topFillOpacity.value = 1
+  }
+
+  function handleMouseout(){
+    topFillOpacity.value = 0.5
+  }
 </script>
 
+:::details 点击查看代码
+```html
+<Map
+  :zoom="10"
+  :tilt='50'
+  enableScrollWheelZoom
+  mapStyleId='980161f3645989feac25a0da15da4178'
+>
+  <Prism
+    isBoundary
+    :path="point"  
+    :autoCenter='false'
+    :topFillOpacity='topFillOpacity'
+    :sideFillOpacity='0.9'
+    :altitude='5000'
+    sideFillColor='#5679ea'
+    topFillColor='#5679ea'
+    @initd="handleInitd"
+    @mouseover="handleMouseover"
+    @mouseout="handleMouseout"
+  />
+</Map>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue'
+  import { Map, Prism, useAreaBoundary } from 'vue3-baidu-map-gl'
+  const topFillOpacity = ref<number>(0.5)
+  const area = ref<string>('北京市')
+  const { isLoading, boundaries: point, get } = useAreaBoundary()  
+
+  function handleInitd(){
+    get(area.value)
+  }
+
+  function handleMouseover(){
+    topFillOpacity.value = 1
+  }
+
+  function handleMouseout(){
+    topFillOpacity.value = 0.5
+  }
+</script>
+```
+:::
 
 ## 静态组件 Props
 
-| 参数           | 说明                                                       | 类型       | 默认值   |
-| -------------- | ---------------------------------------------------------- | ---------- | -------- |
-| clip           | 是否进行跨经度 180 度裁剪，绘制跨精度 180 时为了优化效果， | `boolean ` | `true `  |
-| geodesic       | 是否开启大地线模式，true 时，两点连线将以大地线的形式。    | `boolean ` | `false ` |
-| isBoundary     | 是否是行政区域的边界多边形                                 | `boolean ` | `false ` |
-| autoCenter     | 是否自动根据多边形居中地图                                 | `boolean ` | `true`   |
-| enableClicking | 是否响应点击事件                                           | `boolean ` | `true `  |
+| 参数           | 说明                       | 类型       | 默认值   |
+| -------------- | -------------------------- | ---------- | -------- |
+| isBoundary     | 是否是行政区域的边界多边形 | `boolean ` | `false ` |
+| autoCenter     | 是否自动根据多边形居中地图 | `boolean ` | `true`   |
+| enableClicking | 是否响应点击事件           | `boolean ` | `true `  |
 
 ## 动态组件 Props
 
-| 参数            | 说明                                        | 类型                             | 可选值                    | 默认值     |
-| --------------- | ------------------------------------------- | -------------------------------- | ------------------------- | ---------- |
-| path            | 多边形的坐标数组                            | ` { lng: number, lat: number}[]` |                           | `required` |
-| strokeColor     | 描边的颜色，同 CSS 颜色                     | `string`                         |                           | `#000000`  |
-| strokeWeight    | 描边的宽度，单位为像素                      | `string `                        |                           | `2 `       |
-| strokeOpacity   | 描边的透明度，范围 0-1                      | `number `                        |                           | `1 `       |
-| strokeStyle     | 描边的样式，为实线、虚线、或者点状线        | `string `                        | `solid / dashed / dotted` |            |
-| fillColor       | 面填充颜色，同 CSS 颜色                     | `string `                        |                           | `#fff`     |
-| fillOpacity     | 面填充的透明度，范围 0-1                    | `number `                        | `0-1`                     | `0.3 `     |
-| enableMassClear | 是否在调用 `map.clearOverlays` 清除此覆盖物 | `boolean`                        |                           | ` true`    |
-| enableEditing   | 开启可编辑模式                              | `boolean `                       |                           | `false `   |
+| 参数            | 说明                                        | 类型                            | 可选值 | 默认值     |
+| --------------- | ------------------------------------------- | ------------------------------- | ------ | ---------- |
+| path            | 多边形的坐标数组                            | `{ lng: number, lat: number}[]` |        | `required` |
+| altitude        | 3d棱柱高度                                  | `number`                        |        | `required` |
+| topFillColor    | 顶面填充颜色                                | `string `                       |        | `#fff`     |
+| topFillOpacity  | 顶面填充颜色透明度                          | `number`                        | `0-1`  |            |
+| sideFillColor   | 侧面填充颜色                                | `string`                        |        |            |
+| sideFillOpacity | 侧面填充颜色透明度                          | `number`                        | `0-1`  | `#fff`     |
+| enableMassClear | 是否在调用 `map.clearOverlays` 清除此覆盖物 | `boolean`                       |        | ` true`    |
 
 ## 组件事件
 

packages/components/map/index.vue

@@ -373,7 +373,6 @@
 	 * 设置缩放级别
 	 */
 	function setZoom(zoom: number): void {
-		console.log('zoom', zoom)
 		map!.setZoom(zoom)
 	}
 	// 设置地图类型

packages/components/overlay/prism/index.vue

@@ -17,7 +17,7 @@
 	export type NonEmptyArray<T> = [T, ...T[]]
 	export interface PrismProps {
 		/**
-		 * 折线的节点坐标数组
+		 * 棱柱的节点坐标数组
 		 */
 		path: NonEmptyArray<PrismPath> | NonEmptyArray<string>
 		/**
@@ -34,7 +34,7 @@
 		 */
 		topFillColor?: string
 		/**
-		 * @default #fff
+		 * @default 0.5
 		 * 顶面填充颜色透明度，取值范围0-1
 		 */
 		topFillOpacity?: number
@@ -43,6 +43,7 @@
 		 */
 		sideFillColor?: string
 		/**
+     * @default 0.8
 		 * 侧面填充颜色透明度，取值范围0-1
 		 */
 		sideFillOpacity?: number
@@ -110,25 +111,36 @@
 			const pathPoints = isBoundary ? (path as string[]) : pathPointsToMapPoints(path as PrismPath[])
 			if (!pathPoints) return
 			prism = new BMapGL.Prism(pathPoints, altitude, {
-        topFillColor,
+				topFillColor,
 				topFillOpacity,
 				sideFillColor,
 				sideFillOpacity,
-				enableMassClear,
-      })
+				enableMassClear
+			})
 			map.addOverlay(prism)
 			bindEvents(props, vueEmits, prism)
 			syncMapCenter()
 			watch(() => props.enableMassClear, setMassClear)
+			watch(() => props.topFillColor, setTopFillColor)
+			watch(() => props.topFillOpacity, setTopFillOpacity)
+			watch(() => props.sideFillColor, setSideFillColor)
+			watch(() => props.sideFillOpacity, setSideFillOpacity)
+			watch(() => props.altitude, setAltitude)
 		}
 		init()
 		// 监听值变化, 初始为空时不会初始化, 不为空值时初始化
-		watch(() => props.path, prism ? () => {
-      cal()
-      init()
-    } : init, {
-			deep: true
-		})
+		watch(
+			() => props.path,
+			prism
+				? () => {
+						cal()
+						init()
+				  }
+				: init,
+			{
+				deep: true
+			}
+		)
 		ready(map)
 		return cal
 	})
@@ -155,6 +167,22 @@
 	function setMassClear(enableMassClear?: boolean): void {
 		enableMassClear ? prism!.enableMassClear() : prism!.disableMassClear()
 	}
+
+	function setTopFillColor(color: string) {
+		prism.setTopFillColor(color)
+	}
+	function setTopFillOpacity(opacity: number) {
+		prism.setTopFillOpacity(opacity)
+	}
+	function setSideFillColor(color: string) {
+		prism.setSideFillColor(color)
+	}
+	function setSideFillOpacity(opacity: number) {
+		prism.setSideFillOpacity(opacity)
+	}
+	function setAltitude(altitude: number) {
+		prism.setAltitude(altitude)
+	}
 </script>
 <script lang="ts">
 	export default {

types/overlay.d.ts

@@ -189,6 +189,11 @@ declare namespace BMapGL {
 	}
 	class Prism extends Overlay {
 		constructor(point: Point[] | string[], altitude: number, opts?: PrismOptions)
+		setTopFillColor: (color: string) => void
+		setTopFillOpacity: (opacity: number) => void
+		setSideFillColor: (color: string) => void
+		setSideFillOpacity: (opacity: number) => void
+		setAltitude: (altitude: number) => void
 	}
 
 	interface SymbolOptions {