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

leaflet-extrusion

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

功能

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

安装

引入 leaflet-extrusion.js 文件即可

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

使用示例

import L from 'leaflet'
import './src/leaflet-extrusion.js'

const map = L.map('map').setView([39.9, 116.4], 12)

const geojson = {
  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: {}
    }
  ]
}

const extrusion = 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 坐标转换为 Leaflet LatLng。
3. 创建顶层多边形、底层偏移多边形和侧面连接多边形。
4. 在 hover 时更新样式、颜色和位移，增强立体感。