【leaflet中实现区块hover突出的伪3d效果】

leaflet-extrusion一个基于 Leaflet 的 GeoJSON “挤出” 3D 可视化插件用于将普通矢量要素渲染为带顶面、底面和侧面的立体效果。功能支持Polygon和MultiPolygonGeoJSON 要素渲染顶面、底面与侧面模拟高度与阴影效果支持鼠标 hover 高亮与位移效果可自定义颜色、透明度、深度、过渡动画和 hover 行为安装引入leaflet-extrusion.js文件即可当前仓库入口文件为src/leaflet-extrusion.js。使用示例importLfromleafletimport./src/leaflet-extrusion.jsconstmapL.map(map).setView([39.9,116.4],12)constgeojson{type:FeatureCollection,features:[{type:Feature,geometry:{type:Polygon,coordinates:[[[116.4,39.9],[116.41,39.9],[116.41,39.91],[116.4,39.91],[116.4,39.9]]]},properties:{}}]}constextrusionL.geojsonExtrusion(geojson,{color:#ff6600,depth:24,hoverOffset:14,hoverDebounceMs:80,})extrusion.addTo(map)实现效果图APIL.geojsonExtrusion(geojson, options)创建一个可添加到 Leaflet 地图的L.LayerGroup用于渲染带挤出效果的 GeoJSON 要素。geojson- 支持FeatureCollection、Feature或纯几何对象。options- 可选配置对象。返回值L.LayerGroup支持的 GeoJSON 类型PolygonMultiPolygon本插件通过构建顶面、底面和侧面图层来模拟 3D 挤出效果因此当前仅对多边形几何类型进行可见渲染。options可选参数color: 顶面填充颜色默认#0afoutlineColor: 顶面描边颜色默认与color相同baseColor: 底面颜色默认为color加深版本sideColor: 侧面颜色默认为color加深版本fillOpacity: 顶面填充不透明度默认0.8hoverFillOpacity: 鼠标 hover 时顶面不透明度默认1depth: 底面相对于顶面的像素垂直偏移默认18hoverOffset: hover 时顶面像素偏移量默认12hoverDebounceMs: hover 触发防抖时间默认50weight: 顶面边线宽度默认2transitionMs: CSS 过渡时间默认180hover: 是否启用 hover 效果默认truerenderer: Leaflet 渲染器例如L.svg()默认使用overlayPane的 SVGbaseHoverDarken: hover 时底面颜色加深量默认-12baseHoverOpacityInc: hover 时底面透明度增量默认0.08sideHoverDarken: hover 时侧面颜色加深量默认-12sideHoverOpacityInc: hover 时侧面透明度增量默认0.15blurRadius: hover 时阴影模糊半径默认12实现说明插件通过以下步骤构建挤出效果解析 GeoJSON 输入支持FeatureCollection、Feature和纯几何对象。将 GeoJSON 坐标转换为 LeafletLatLng。创建顶层多边形、底层偏移多边形和侧面连接多边形。在 hover 时更新样式、颜色和位移增强立体感。