如何在一条线上显示距离标记 (Mapbox-gl)？

Question

我想在使用 addlayer: line 绘制的路线上显示公里标记。使用@turf/along，我可以计算距离标记的坐标，但是在地图上显示它们的好方法是什么？也欢迎非草皮相关的方法。

我想在路线本身上或在特定米跨度之间的线下方显示坐标，例如每 100 米。

Answer 1

您可以为距离标签创建类型为 symbol 的新图层。

由于您已经能够计算出它的坐标，您剩下要做的就是使用这些坐标创建一个源并将其连接到具有以下字段的布局：

text-field 与距离字符串（例如 'text-field': '{distance}km' 如果您在源属性中设置距离）
text-offset 相对于其中心的相对偏移量。注意：单位是ems，不是米

示例（未测试）：

{
  id: 'distance-label',
  type: 'symbol',
  source: 'distance-labels',
  paint: {
    'text-color': '#00f'
  },
  layout: {
    'symbol-placement': 'point',
    'text-font': ['Open Sans Regular','Arial Unicode MS Regular'],
    'text-field': '{distance}km',
    'text-offset': [0, -0.6],
    'text-anchor': 'center',
    'text-justify': 'center',
    'text-size': 12,
  }
}

Answer 2

出于我的目的，我想在每整公里的路线上显示一个距离标签（这就是为什么 routeDistance 是 floored 的原因）。

//distanceLabel object
var distanceLabels = {
  "type": "FeatureCollection",
  "features": []
}

//added it as a map source
map.addSource('distanceLabels', {
  "type": "geojson",
  "data": distanceLabels
})

//added distancLabels as a map layer
map.addLayer({
  "id": "distanceLabels",
  "type": "symbol",
  "source": "distanceLabels",
  "paint": {
    'text-color': '#000000'
  },
  "layout": {
    'symbol-placement': 'point',
    'text-font': ['Open Sans Regular','Arial Unicode MS Regular'],
    'text-field': '{distance}\n{unit}',
    'text-anchor': 'center',
    'text-justify': 'center',
    'text-size': 13,
    'icon-allow-overlap': true,
    'icon-ignore-placement': true
  }
})


//render labels function
 renderDistanceMarkers() {
  var unit = this.isMetric == true ? 'kilometers' : 'miles'
  var unitShort = this.isMetric == true ? 'km' : 'mi'

  //calculate line distance to determine the placement of the labels
  var routeDistance = turf.length(route.features[0], {units: unit})

  //rounding down kilometers (11.76km -> 11km)
  routeDistance = Math.floor(routeDistance)
  var points = []

  //only draw labels if route is longer than 1km
  if(routeDistance !== 0) {
    // Draw an arc between the `origin` & `destination` of the two points

    for (var i = 0; i < routeDistance + 1; i++) {
      var segment = turf.along(route.features[0], i, {units: unit})

      if(i !== 0) { //Skip the initial point (start coordinate)
          points.push({
              "type": "Feature",
              "properties": {'unit': unitShort},
              "geometry": {
                  "type": "Point",
                  "coordinates": segment.geometry.coordinates
              }
          })
      }

    }

    distanceLabels.features = points

    //update distances for the label texts
    for(var i = 0; i < points.length; i++) {
      distanceLabels.features[i].properties.distance = i + 1 //First one would be 0
    }

    //render now labels
    map.getSource('distanceLabels').setData(distanceLabels)

  }
},

如何在一条线上显示距离标记 (Mapbox-gl)？

How can I display distance markings on a line (Mapbox-gl)?

mapbox

turfjs

mapbox-gl