地图 Map

基于 GeoJSON Feature 数据渲染区域地图，支持填充/描边两种模式、区域选中、高亮与标签。

效果

在线预览

在线模拟尺寸:

数据格式

data 需要传入 GeoJSON 的 features 数组（每一项为 Feature）。

• 区域名称读取：feature.properties.name
• 标签位置读取：优先 feature.properties.centroid，其次 feature.properties.center
• label.formatter 中的 {value} 读取：feature.properties.value

加载 GeoJSON

const geoFeatures = ref<UTSJSONObject[]>([] as UTSJSONObject[])

uni.request({
  url: 'https://geo.datav.aliyun.com/areas_v3/bound/420100_full.json',
  method: 'GET',
  success: (res) => {
    if (res.statusCode != 200) return
    let body = res.data as any | null
    if (typeof body == 'string') body = JSON.parseObject(body as string)
    if (body == null) return
    const obj = body as UTSJSONObject
    const features = obj.get('features')
    if (features == null) return
    const arr = features as UTSJSONObject[]
    for (let i = 0; i < arr.length; i++) {
      const props = arr[i].get('properties') as UTSJSONObject
      if (props != null) props.set('value', Math.round(Math.random() * 9000 + 1000))
    }
    geoFeatures.value = arr
  }
})

基本用法

{
  data: geoFeatures,
  series: [{
    type: 'map',
    mapMode: 'fill',
    mapActiveColor: '#3b82f6',
    mapStrokeColor: '#cbd5e1',
    mapStrokeWidth: 1,
    label: { show: true, fontSize: 8, color: '#6b7280', formatter: '{name}\n{value}亿' }
  }],
  padding: { left: 8, right: 8, top: 8, bottom: 8 },
  legend: { show: false }
}

填充与描边模式

series: [{
  type: 'map',
  mapMode: 'stroke' // 'fill'(默认) | 'stroke'
}]

交互事件

点击地图区域会触发图表的 click 事件，event.title 为区域名称（properties.name）。

系列配置项

属性	类型	默认值	说明
type	string	-	固定 'map'
mapMode	string	'fill'	地图模式：'fill' 填充 / 'stroke' 线轮廓
mapFillColor	string	自动	区域填充色（fill 模式）
mapStrokeColor	string	自动	区域描边色
mapActiveColor	string	自动	选中区域填充/描边色
mapStrokeWidth	number	自动	描边宽度
label	ChartLabelOptions	-	区域标签配置（show/fontSize/color/formatter）

标签格式化

label.formatter 支持占位：

• {name}：区域名称（properties.name）
• {value}：区域数值（properties.value）