在多边形后面显示标记

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');

然后你将它添加到它自己的图层中。我将其命名为 lasso:

  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 layer 高于 stations layer:

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

在多边形后面显示标记

Show markers behind polygons

javascript

mapbox-gl

mapbox-gl-js