javascript - 显示多边形后面的标记

Question

我已经创建了圆形(类型为多边形，坐标由 this formula 计算 - 仍然不确定这是否是渲染圆形的最佳方式...)

还有一些代表城市的标记。 我更喜欢标记，因为它们是 html 元素，我可以设置它们的样式。

圆圈作为选择城市的半径。

我的问题是，如何将这些标记放置在圆圈后面？圆圈是 Canvas 的一部分，标记是单独的 div，因此没有任何 z-index 帮助。

或者我应该以某种方式将这些标记创建为 Canvas 中的点？

正在寻找this behaviour ，仅在mapboxgl中。

Answer 1

这是一个示例:https://jsfiddle.net/kmandov/vzc0o86g/

您可以使用turf-circle使用指定的半径和单位创建圆。 Turf-circle 生成一个可以添加到其自己的图层的 geojson 对象。

var center = {
  "type": "Feature",
  "properties": {
    "marker-color": "#0f0"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [-77.1117, 38.8739]
  }
};

var lasso = turf.circle(center, 5, 20, 'kilometers');

然后将其添加到自己的图层中。我将其称为套索:

  map.addSource('lasso', {
    'type': 'geojson',
    'data': lasso
  });

  map.addLayer({
    'id': 'lasso',
    'type': 'fill',
    'source': 'lasso',
    'paint': {
      'fill-color': '#f1f075',
      'fill-opacity': 0.8
    }
  });  

然后，通过指定上面的图层 ( example ) 添加包含车站的图层。这将确保lasso层位于stations层之上:

  map.addLayer({
    'id': 'stations',
    'type': 'circle',
    'source': 'stations',
    'paint': {
      'circle-color': '#feb24c',
      'circle-opacity': 1,
      'circle-radius': 5
    }
  }, 'lasso'); // lasso is the layer above