Mapbox 如何在直线上显示距离标记（地图框gl）？

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

---

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

您可以为距离标签创建一个新的类型层

由于您已经能够计算其坐标，所以只需使用这些坐标创建一个源，并将其连接到具有以下字段的布局：

• 带有距离字符串的

  文本字段

  （例如，

  'text-field'：“{distance}km'

  如果在源属性中设置距离）

• 文本偏移量

  ，相对于其中心的相对偏移量。注意：单位是ems，而不是电表

示例（未测试）：

---

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

由于您已经能够计算其坐标，所以只需使用这些坐标创建一个源，并将其连接到具有以下字段的布局：

• 带有距离字符串的

  文本字段

  （例如，

  'text-field'：“{distance}km'

  如果在源属性中设置距离）

• 文本偏移量

  ，相对于其中心的相对偏移量。注意：单位是ems，而不是电表

示例（未测试）：

---

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

//距离标签对象
变量距离标签={
“类型”：“FeatureCollection”，
“功能”：[]
}
//将其添加为地图源
map.addSource（'distanceLabels'{
“类型”：“geojson”，
“数据”：距离标签
})
//添加了作为地图图层的距离标签
map.addLayer({
“id”：“距离标签”，
“类型”：“符号”，
“源”：“距离标签”，
“油漆”：{
“文本颜色”：“000000”
},
“布局”：{
“符号放置”：“点”，
“文本字体”：[“Open Sans Regular”，“Arial Unicode MS Regular”]，
“文本字段”：“{distance}\n{unit}”，
“文本锚定”：“中心”，
“文本对齐”：“居中”，
“文本大小”：13，
“图标允许重叠”：true，
“图标忽略放置”：true
}
})
//渲染标签函数
renderDistanceMarkers（）{
var unit=this.isMetric==true？'km'：'miles'
var unitShort=this.isMetric==true？'km'：'mi'
//计算线距离以确定标签的放置
var routeDistance=turp.length（route.features[0]，{units:unit}）
//四舍五入公里数（11.76公里->11公里）
routeDistance=数学楼层（routeDistance）
变量点=[]
//仅当路线长度超过1km时绘制标签
如果（RouteInstance！==0）{
//在两点的“起点”和“终点”之间画一条弧
对于（变量i=0；i

出于我的目的，我想在路线沿线每整公里显示一个距离标签（这就是为什么routeDistance会被覆盖）

//距离标签对象
变量距离标签={
“类型”：“FeatureCollection”，
“功能”：[]
}
//将其添加为地图源
map.addSource（'distanceLabels'{
“类型”：“geojson”，
“数据”：距离标签
})
//添加了作为地图图层的距离标签
map.addLayer({
“id”：“距离标签”，
“类型”：“符号”，
“源”：“距离标签”，
“油漆”：{
“文本颜色”：“000000”
},
“布局”：{
“符号放置”：“点”，
“文本字体”：[“Open Sans Regular”，“Arial Unicode MS Regular”]，
“文本字段”：“{distance}\n{unit}”，
“文本锚定”：“中心”，
“文本对齐”：“居中”，
“文本大小”：13，
“图标允许重叠”：true，
“图标忽略放置”：true
}
})
//渲染标签函数
renderDistanceMarkers（）{
var unit=this.isMetric==true？'km'：'miles'
var unitShort=this.isMetric==true？'km'：'mi'
//计算线距离以确定标签的放置
var routeDistance=turp.length（route.features[0]，{units:unit}）
//四舍五入公里数（11.76公里->11公里）
routeDistance=数学楼层（routeDistance）
变量点=[]
//仅当路线长度超过1km时绘制标签
如果（RouteInstance！==0）{
//在两点的“起点”和“终点”之间画一条弧
对于（变量i=0；i

谢谢你，MeltedPenguin，这帮了大忙！

{
  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,
  }
}

//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)

  }
},