如何在特定坐标处在 MapBox 上显示文本？

Question

我目前在我的 React 项目中使用 MapBox GL JS。

我想知道如何在交互结束后在特定坐标处显示一些文本。我从函数 getMinCoords()

获取位置坐标

我现在的代码如下

stop() {
    let nextState = this.state;
    if (nextState !== INTERACTION_STATES.completed) {
      nextState = INTERACTION_STATES.abort;
    }
    
    if (this.vertices.length > 2) {
      this.annotation.geometries = [{
        type: 'Polygon',
        coordinates: this.getPolygonCoordinates(),
        properties: {
          annotationType: 'polygon',
        },
      }];
    } else {
      this.annotation.geometries = [];
    }

    console.log(this.getMinCoords());
    this.mapViewer.off('click', this.onClickCallback);
    this.asset.dataUpdated();
    this.setState(nextState);
    this.flushState();
    
  }

处理注解的函数如下：

this.geometries.forEach((geometry) => {
      switch (geometry.type) {
        case 'Point':
        case 'LineString':
        case 'Polygon': {
          const styleProps = AssetStyle.getStyles(geometry, styles);
          const feature = GeoJSONUtil.featureFromGeometry(geometry, this.properties);
          if (this.properties.annotationType === 'label') {
            styleProps.textAnchor = 'center';
          }
          feature.properties = { ...feature.properties, ...styleProps };
          features.push(feature);
          break;
        }

在刷新状态之前，我想显示getMinCoords返回的坐标处的区域。我有另一个函数 getArea()，它 returns 区域。我只需要在地图上显示它

Answer 1

您可以在使用空源实例化地图后创建一个空层，如下所示：

代码片段：

        //Empty Source
        const textGeoJsonSource = {
            type: 'geojson',
            data: featureCollection //Initially this is empty
        };

        //Text Layer with textGeoJsonSource
        const sectionTextLayer: mapboxgl.Layer = {
            "id": "sectionTextLayer",
            "type": "symbol",
            "source": textGeoJsonSource,
            "paint": {
                "text-color": textColor, //Color of your choice
                "text-halo-blur": textHaloBlur,
                "text-halo-color": textHaloColor,
                "text-halo-width": textHaloWidth,
                "text-opacity": textOpacity
            },
            "layout": {
                "text-field": ['get', 't'], //This will get "t" property from your geojson
                "text-font": textFontFamily,
                "text-rotation-alignment": "auto",
                "text-allow-overlap": true,
                "text-anchor": "top"
            }
        };
        this.mapInstance.addLayer(sectionTextLayer);

然后在获得坐标后将“textGeoJsonSource”的源设置为以下（如您的情况下的 getMinCoords）：

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [ //Pass your coordinates here
                    5.823,
                    -6.67
                ]
            },
            "properties": {
                "t": "18C" //Text you want to display on Map
            }
        }
     ]
}

请注意以下几点：

您的要素集合需要点坐标才能在地图上显示该点上的文本。如果你有一个多边形，首先获取该多边形的质心，你可以使用 turf： http://turfjs.org/docs/#centroid

有用的链接：Centering text label in mapbox-gl-js?

如何在特定坐标处在 MapBox 上显示文本？

How to display text on MapBox at specific coordinates?

geojson

mapbox

reactjs

mapbox-gl-js