如何将Mapbox Draw绘制的图形转换为CSS或SVG格式使用

你可以参考以下两种实现思路完成转换：

前置操作：获取绘制图形的原始数据 #

首先通过Mapbox Draw内置API拿到用户绘制内容的标准GeoJSON格式数据：

const drawnFeatures = draw.getAll()
// 返回的FeatureCollection中包含所有用户绘制的图形坐标、类型信息

方案1：转换为SVG（更推荐，适配所有不规则矢量图形，无损缩放） #

SVG天生支持多边形路径绘制，只需把地理坐标（经纬度）映射为平面像素坐标即可生成可用的SVG文件/代码：

1. 用Turf的bbox方法拿到图形的经纬度边界框，计算出坐标到SVG画布的缩放比例，避免图形溢出画布
2. 遍历图形的坐标点，统一做坐标转换（注意地理坐标的纬度方向和SVG的Y轴方向相反，需要翻转Y值）
3. 把转换后的像素坐标拼接为SVG的path路径参数，生成完整SVG代码

示例代码：

import * as turf from '@turf/turf'

// 1. 取图形边界框
const [minLng, minLat, maxLng, maxLat] = turf.bbox(drawnFeatures)
// 2. 自定义SVG画布尺寸，计算缩放比例
const svgWidth = 400, svgHeight = 300
const lngRange = maxLng - minLng
const latRange = maxLat - minLat
const scale = Math.min(svgWidth / lngRange, svgHeight / latRange)
// 3. 坐标转换+拼接路径
const pathPoints = drawnFeatures.features[0].geometry.coordinates[0].map(([lng, lat]) => {
  const x = (lng - minLng) * scale
  const y = svgHeight - (lat - minLat) * scale // Y轴翻转
  return `${x} ${y}`
}).join(' ')
// 4. 生成最终SVG字符串，可直接插入页面或者保存为.svg文件使用
const svgStr = `<svg width="${svgWidth}" height="${svgHeight}" xmlns="http://www.w3.org/2000/svg">
  <path d="M ${pathPoints} Z" fill="#2ecc71" stroke="#27ae60" stroke-width="2"/>
</svg>`

方案2：转换为CSS图形（适合简单规则图形场景） #

如果是简单多边形，可以用CSS的clip-path属性实现自定义图形，同样先完成坐标转换，把值映射为百分比即可：

const clipPathPoints = drawnFeatures.features[0].geometry.coordinates[0].map(([lng, lat]) => {
  const xPercent = ((lng - minLng) / lngRange * 100).toFixed(2)
  const yPercent = ((1 - (lat - minLat) / latRange) * 100).toFixed(2)
  return `${xPercent}% ${yPercent}%`
}).join(', ')

// 最终可用的CSS代码
const cssCode = `.custom-shape {
  width: 400px;
  height: 300px;
  background: #2ecc71;
  clip-path: polygon(${clipPathPoints});
}`

如果是矩形、圆形等极规则图形，直接通过边界框算出宽高位置，生成对应的宽高、圆角、定位CSS属性即可，实现更简单。

内容的提问来源于stack exchange，提问作者Cas