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

leaflet-extrusion

一个基于 Leaflet 的 GeoJSON “挤出” 3D 可视化插件，用于将普通矢量要素渲染为带顶面、底面和侧面的立体效果。

功能

• 支持Polygon和MultiPolygonGeoJSON 要素
• 渲染顶面、底面与侧面，模拟高度与阴影效果
• 支持鼠标 hover 高亮与位移效果
• 可自定义颜色、透明度、深度、过渡动画和 hover 行为

安装

引入leaflet-extrusion.js文件即可

当前仓库入口文件为src/leaflet-extrusion.js。

使用示例

importLfrom'leaflet'import'./src/leaflet-extrusion.js'constmap=L.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:{}}]}constextrusion=L.geojsonExtrusion(geojson,{color:'#ff6600',depth:24,hoverOffset:14,hoverDebounceMs:80,})extrusion.addTo(map)

实现效果图

API

L.geojsonExtrusion(geojson, options)

创建一个可添加到 Leaflet 地图的L.LayerGroup，用于渲染带挤出效果的 GeoJSON 要素。

• geojson- 支持FeatureCollection、Feature或纯几何对象。
• options- 可选配置对象。

返回值：L.LayerGroup

支持的 GeoJSON 类型

• Polygon
• MultiPolygon

本插件通过构建顶面、底面和侧面图层来模拟 3D 挤出效果，因此当前仅对多边形几何类型进行可见渲染。

options可选参数

• color: 顶面填充颜色，默认#0af
• outlineColor: 顶面描边颜色，默认与color相同
• baseColor: 底面颜色，默认为color加深版本
• sideColor: 侧面颜色，默认为color加深版本
• fillOpacity: 顶面填充不透明度，默认0.8
• hoverFillOpacity: 鼠标 hover 时顶面不透明度，默认1
• depth: 底面相对于顶面的像素垂直偏移，默认18
• hoverOffset: hover 时顶面像素偏移量，默认12
• hoverDebounceMs: hover 触发防抖时间，默认50
• weight: 顶面边线宽度，默认2
• transitionMs: CSS 过渡时间，默认180
• hover: 是否启用 hover 效果，默认true
• renderer: Leaflet 渲染器，例如L.svg()，默认使用overlayPane的 SVG
• baseHoverDarken: hover 时底面颜色加深量，默认-12
• baseHoverOpacityInc: hover 时底面透明度增量，默认0.08
• sideHoverDarken: hover 时侧面颜色加深量，默认-12
• sideHoverOpacityInc: hover 时侧面透明度增量，默认0.15
• blurRadius: hover 时阴影模糊半径，默认12

实现说明

插件通过以下步骤构建挤出效果：

1. 解析 GeoJSON 输入，支持FeatureCollection、Feature和纯几何对象。
2. 将 GeoJSON 坐标转换为 LeafletLatLng。
3. 创建顶层多边形、底层偏移多边形和侧面连接多边形。
4. 在 hover 时更新样式、颜色和位移，增强立体感。