Mapbox GLは半径でサークルを重複してソートします

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

mapbox-GLはそれがそれらを受け取るために、機能をレンダリングしているので、あなたも前のマップに追加するには、あなたの機能コレクションの機能を並べ替えることができます：

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

これは常に可能ではないかもしれないし、私は、マップボックスのフィーチャレンダリングの順序が設計上のものであり、常に保存されることは100％確信していませんが、あなたの例ではうまくいくようです。

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

Answer 2

私は質問を理解していれば、私はあなたはそれが自分の層だとして、各円を治療し、このように互いの上にそれらをレンダリングしたいと思う：

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/

私にしてみましょうあなたが何をしたのか分かっていますか？