Question

我正在尝试使用非常接近的Mapbox GL显示圆圈，有时它们会重叠。我希望圆圈根据它们的大小（半径）重叠，从最大到最小，这样它们都可以在地图上看到。有办法吗？
我举了一个简单的例子来说明我面临的问题。可以看到半径最大的圆圈位于其他圆圈之上。

var data = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "value": 2
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-31.640625,
        31.952162238024975
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "value": 5
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-31.640625,
        31.952162238024975
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "value": 10
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-31.640625,
        31.952162238024975
      ]
    }
  }]
};

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/dark-v9',
  center: [-30, 33],
  zoom: 3
});

map.on("load", function() {

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

  map.addLayer({
    "id": "point",
    "source": "point",
    "type": "circle",
    "paint": {
      "circle-color": "#FFFF00",
      "circle-stroke-width": 1,
      "circle-stroke-color": "#000",
      "circle-radius": {
        property: 'value',
        stops: [
          [2, 10],
          [10, 30],
        ]
      }
    }
  });

})

JSFiddle中的完整示例：

https://jsfiddle.net/zorgdevalmont/5ch1aj52/3/

非常感谢。

Answer 1

如果我理解了这个问题，我认为您希望将每个圈子视为自己的图层并将它们叠加在一起，如下所示：

var data1 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "value": 2
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-31.640625,
        31.952162238024975
      ]
    }
  }]};

  var data2 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "value": 5
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-31.640625,
        31.952162238024975
      ]
    }
  }]};
  var data3 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "value": 10
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-31.640625,
        31.952162238024975
      ]
    }
  }]
};

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/dark-v9',
  center: [-30, 33],
  zoom: 3
});

map.on("load", function() {

  map.addSource('point1', {
    "type": "geojson",
    "data": data1
  });

   map.addSource('point2', {
    "type": "geojson",
    "data": data2
  });

   map.addSource('point3', {
    "type": "geojson",
    "data": data3
  });

   map.addLayer({
    "id": "point3",
    "source": "point3",
    "type": "circle",
    "paint": {
        "circle-color": "#FFFF00", 
      "circle-stroke-width":1,
      "circle-stroke-color": "#000",
      "circle-radius": {
        property: 'value',
        stops: [
          [2, 10],
          [10, 30],
        ]
      }
    }
  });

 map.addLayer({
    "id": "point2",
    "source": "point2",
    "type": "circle",
    "paint": {
        "circle-color": "#FFFF00", 
      "circle-stroke-width":1,
      "circle-stroke-color": "#000",
      "circle-radius": {
        property: 'value',
        stops: [
          [2, 10],
          [10, 30],
        ]
      }
    }
  });

  map.addLayer({
    "id": "point1",
    "source": "point1",
    "type": "circle",
    "paint": {
        "circle-color": "#FFFF00", 
      "circle-stroke-width":1,
      "circle-stroke-color": "#000",
      "circle-radius": {
        property: 'value',
        stops: [
          [2, 10],
          [10, 30],
        ]
      }
    }
  });
})

实施例： https://jsfiddle.net/5ch1aj52/6/

如果那就是你想要的，请告诉我？

Answer 2

由于mapbox-gl按照接收顺序呈现功能，您还可以在将功能集添加到地图之前对其进行排序：

data.features.sort((a,b) => b.properties.value - a.properties.value);

这可能并不总是可行的，我并不是100％确定mapbox中的要素渲染顺序是设计使用的，并且将始终保留，但它似乎适用于您的示例。

更新了JS-Fiddle：https://jsfiddle.net/5ch1aj52/7/

Mapbox GL按半径排序重叠圆圈

2 个答案: