GeoJSON

将任意 GeoJSON 渲染为填充和轮廓图层。支持数据驱动样式和悬停高亮。

MapGeoJSON 将任意 GeoJSON 渲染为填充 + 轮廓图层。必须在 Map 内部使用——通常配合blank 属性用于等值线和区域/数据地图。

基本用法

GeoJSONMap.tsx
1234567891011121314
import { Map, MapGeoJSON } from class="tk-string">"@/components/ui/map";

const WORLD_GEOJSON =
  class="tk-string">"https:class="tk-commentclass="tk-string">">//cdn.jsdelivr.net/gh/nvkelso/natural-earth-vector@v5.1.2/geojson/ne_110m_admin_0_countries.geojson";

export function GeoJSONMap() {
  return (
    <div className=class="tk-string">"h-[320px] overflow-hidden rounded-lg">
      <Map blank center={[0, 20]} zoom={1}>
        <MapGeoJSON data={WORLD_GEOJSON} />
      </Map>
    </div>
  );
}

自定义填充和轮廓

通过 fillPaint 和linePaint 自定义图层样式。传入 false 可省略对应图层：

1234567891011
<MapGeoJSON
  data={WORLD_GEOJSON}
  fillPaint={{
    class="tk-string">"fill-color": class="tk-string">"#22d3ee",
    class="tk-string">"fill-opacity": 0.3,
  }}
  linePaint={{
    class="tk-string">"line-color": class="tk-string">"#0891b2",
    class="tk-string">"line-width": 1,
  }}
/>

数据驱动样式

使用 MapLibre 表达式根据属性值设置样式：

1234567891011121314151617
<MapGeoJSON
  data={WORLD_GEOJSON}
  promoteId=class="tk-string">"name"
  fillPaint={{
    class="tk-string">"fill-color": [
      class="tk-string">"match",
      [class="tk-string">"get", class="tk-string">"continent"],
      class="tk-string">"Asia", class="tk-string">"#f59e0b",
      class="tk-string">"Europe", class="tk-string">"#22d3ee",
      class="tk-string">"Africa", class="tk-string">"#22c55e",
      class="tk-string">"North America", class="tk-string">"#3b82f6",
      class="tk-string">"South America", class="tk-string">"#a855f7",
      class="tk-string">"#64748b",
    ],
    class="tk-string">"fill-opacity": 0.5,
  }}
/>

悬停高亮

使用 fillHoverPaint 和 promoteId 实现悬停高亮：

1234567891011121314151617181920212223
<MapGeoJSON
  data={WORLD_GEOJSON}
  promoteId=class="tk-string">"name"
  interactive
  fillPaint={{
    class="tk-string">"fill-color": class="tk-string">"#1a2332",
    class="tk-string">"fill-opacity": 0.6,
  }}
  fillHoverPaint={{
    class="tk-string">"fill-color": class="tk-string">"#22d3ee",
    class="tk-string">"fill-opacity": 0.5,
  }}
  linePaint={{
    class="tk-string">"line-color": class="tk-string">"#0891b2",
    class="tk-string">"line-width": 0.5,
  }}
  onHover={(e) => {
    if (e) console.log(class="tk-string">"悬停:", e.feature.properties.name);
  }}
  onClick={(e) => {
    console.log(class="tk-string">"点击:", e.feature.properties.name);
  }}
/>

仅轮廓

传入 fillPaint: false 仅渲染轮廓：

123456789
<MapGeoJSON
  data={WORLD_GEOJSON}
  fillPaint={false}
  linePaint={{
    class="tk-string">"line-color": class="tk-string">"#22d3ee",
    class="tk-string">"line-width": 1,
    class="tk-string">"line-opacity": 0.5,
  }}
/>

类型安全的属性

使用泛型类型参数实现类型安全的属性访问：

1234567891011121314151617
interface CountryProperties {
  name: string;
  population: number;
  continent: string;
}

<MapGeoJSON<CountryProperties>
  data={WORLD_GEOJSON}
  promoteId=class="tk-string">"name"
  fillPaint={{
    class="tk-string">"fill-color": [class="tk-string">"get", class="tk-string">"continent"],
  }}
  onClick={(e) => {
    class=class="tk-string">"tk-comment">// e.feature.properties 类型为 CountryProperties
    console.log(e.feature.properties.population);
  }}
/>

属性

属性	类型	默认值	描述
`data`	`FeatureCollection \| Feature \| Geometry \| string`	—	GeoJSON 数据或获取数据的 URL
`id`	`string`	自动生成	源/图层 id 前缀
`promoteId`	`string`	—	提升为要素 id 的属性名。悬停 feature-state 必需
`fillPaint`	`FillLayerSpecification['paint'] \| false`	主题感知默认	填充图层绘制属性。传 false 省略填充
`linePaint`	`LineLayerSpecification['paint'] \| false`	主题感知默认	轮廓图层绘制属性。传 false 省略轮廓
`fillHoverPaint`	`FillLayerSpecification['paint']`	—	悬停时合并到填充图层的绘制属性。需要 promoteId
`onClick`	`(e: MapGeoJSONEvent) => void`	—	要素点击事件
`onHover`	`(e: MapGeoJSONEvent \| null) => void`	—	悬停要素变化事件
`interactive`	`boolean`	`false`	响应鼠标事件
`beforeId`	`string`	—	在此图层 id 之前插入图层

下一步

聚类

MapClusterLayer 组件