画多边形的边序号

58 阅读1分钟
const edges = data.polygon.geom.coordinates[0][0];
   let features = [];
   //! db
   const offsetDistance = -0.03; // 定义外平行线的偏移距离,可根据实际地图比例尺等情况调整合适的值

   for (let i = 0; i < edges.length - 1; i++) {
     // !  kimi
     const line = turf.lineString([edges[i], edges[i + 1]]);
     const offsetLine = turf.lineOffset(line, -0.02, { units: 'kilometers' });
     // 找到偏移线上的中点
     const midPoint = turf.midpoint(
       turf.point(offsetLine.geometry.coordinates[0]),
       turf.point(offsetLine.geometry.coordinates[1]),
     );
     //!db
     // const point1 = turf.point(edges[i]);
     // const point2 = turf.point(edges[i + 1]);
     // const bearing = turf.bearing(point1, point2);
     // console.log(bearing);
     // const offsetPoint1 = turf.destination(point1, offsetDistance, bearing + 90); // 向左(或根据多边形方向确定的外方向)偏移一定距离
     // const offsetPoint2 = turf.destination(point2, offsetDistance, bearing + 90);
     // const midPoint = turf.midpoint(offsetPoint1, offsetPoint2);
     features.push({
       type: 'Feature',
       geometry: {
         type: 'Point',
         coordinates: midPoint.geometry.coordinates,
       },
       properties: {
         order: i + 1,
       },
     });
   }
    {polyEdgeData && (
          <Source id="polyEdgeSymbol" type="geojson" data={polyEdgeData}>
            <Layer {...polyEdgeSymbolLayer}></Layer>
          </Source>
        )}
export const polyEdgeSymbolLayer: LayerSpecification = {
  minzoom: 15,
  id: 'polyEdgeSymbol',
  source: 'polyEdgeSymbol',
  type: 'symbol',
  layout: {
    'icon-image': 'square',
    'icon-size': 0.3,
    'text-field': ['get', 'order'],
    'text-size': 14,
    'icon-anchor': 'center',
  },
  paint: {
    'icon-color': 'rgba(0, 0, 0, 0.5)',
    'text-color': '#fff',
  },
};