mapbox-gl-js无法正确显示fill-extrusion [英] fill-extrusion not displaying correctly with mapbox-gl-js

问题描述

这是我的数据集的样子:

This is what my dataset looks like:

西雅图犯罪数据集

我要做的是根据频率列更改拉伸高度.我可以成功地将它们显示为点，但是每当使用填充-挤压时，我都在为之挣扎.您能帮我指出正确的方向吗?

What I want to do is change the extrusion height based on the frequency column. I can successfully display these as points but I'm struggling with it whenever I use fill-extrusion. Can you help point me in the right direction?

    map.addLayer({
    'id': 'total',
    'type': 'circle',
    'source': {
        type: 'vector',
        url: 'mapbox://askakdagr8.9tklrr8g'
    },
    'source-layer': 'GroupedOutput-9i6ink',
    'paint': {
        // make circles larger as the user zooms from z12 to z22
        'circle-radius': {
            'base': 1.75,
            'stops': [
                [12, 2],
                [22, 180]
            ]
        },
        'circle-color': '#ff7770'
    }
});

推荐答案

由于mapbox-gl-js当前没有拉伸圆的功能，因此您需要用多边形替换这些点，然后对圆进行插值，例如，通过功能 turf.circle :

Since the mapbox-gl-js does not currently have functionality for extruding a circle, you need to replace the points with a polygon, and interpolating the circle, for example, by a function turf.circle:

  map.on('sourcedata', function(e) {
    if (e.sourceId !== 'total') return
    if (e.isSourceLoaded !== true) return

    var data = {
      "type": "FeatureCollection",
      "features": []
    }
    e.source.data.features.forEach(function(f) {
      var object = turf.centerOfMass(f)
      var center = object.geometry.coordinates
      var radius = 10;
      var options = {
        steps: 16,
        units: 'meters',
        properties: object.properties
      };
      data.features.push(turf.circle(center, radius, options))
    })
    map.getSource('extrusion').setData(data);
  })

[ http://jsfiddle.net/zjLek40n/]

这篇关于mapbox-gl-js无法正确显示fill-extrusion的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！