Javascript 基于本地geojson文件的mapbox三维拉伸_Javascript_Maps_Mapbox_Mapbox Gl Js_Turfjs

Javascript 基于本地geojson文件的mapbox三维拉伸

javascript maps mapbox

Javascript 基于本地geojson文件的mapbox三维拉伸,javascript,maps,mapbox,mapbox-gl-js,turfjs,Javascript,Maps,Mapbox,Mapbox Gl Js,Turfjs,我在网上看到过这个示例，它提供了代码，但根本没有提供代码我非常希望实现同样的目标。我有一个geojson文件，带有某种属性，我想映射到建筑物的高度。你知道怎么可能吗：在已基于我的数据生成的圆上进行三维拉伸。上的代码未提供，因此我在此起诉了该代码代码如下所示： <html> <head> <meta charset='utf-8' /> <title>Display buildings in 3D</title>

我在网上看到过这个示例，它提供了代码，但根本没有提供代码

我非常希望实现同样的目标。我有一个geojson文件，带有某种属性，我想映射到建筑物的高度。你知道怎么可能吗

：在已基于我的数据生成的圆上进行三维拉伸。上的代码未提供，因此我在此起诉了该代码

代码如下所示：

<html>
<head>
    <meta charset='utf-8' />
    <title>Display buildings in 3D</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script> 
    <style>
        body {
          margin: 0;
          padding: 0;
        }

        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicXVlMzIxNiIsImEiOiJjaWhxZmMxMDUwMDBzdXhsdWh0ZDkyMzVqIn0.sz3lHuX9erctIPE2ya6eCw';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [8.538961, 47.372476],
  zoom: 16,
  pitch: 40,
  hash: true
});

var url = 'http://127.0.0.1:62940/test2.json';

mapboxgl.accessToken = 'pk.eyJ1IjoicXVlMzIxNiIsImEiOiJjaWhxZmMxMDUwMDBzdXhsdWh0ZDkyMzVqIn0.sz3lHuX9erctIPE2ya6eCw';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [8.538961, 47.372476],
  zoom: 16,
  pitch: 40,
  hash: true
});

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

  map.addLayer({
    'id': 'extrusion',
    'type': 'fill-extrusion',
    "source": {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": []
      }
    },
    'paint': {
      'fill-extrusion-color': '#00f',
      'fill-extrusion-height': ['get', 'frequency'],
      'fill-extrusion-base': 0,
      'fill-extrusion-opacity': 0.9
    }
  });

  map.addLayer({
    "id": "total",
    'type': 'circle',
    'paint': {
      'circle-radius': {
        'base': 1.75,
        'stops': [
          [12, 2],
          [22, 180]
        ]
      },
      'circle-color': '#ff7770'
    },
    "source": {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [8.538961, 47.372476]
            },
            "properties": {
              "frequency": 100
            }
          },
          {
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [8.539961, 47.372476]
            },
            "properties": {
              "frequency": 44
            }
          }
        ]
      }
    }
  });


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


</script>

这是我的代码：

<html>
<head>
    <meta charset='utf-8' />
    <title>Display buildings in 3D</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script> 
    <style>
        body {
          margin: 0;
          padding: 0;
        }

        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicXVlMzIxNiIsImEiOiJjaWhxZmMxMDUwMDBzdXhsdWh0ZDkyMzVqIn0.sz3lHuX9erctIPE2ya6eCw';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [8.538961, 47.372476],
  zoom: 16,
  pitch: 40,
  hash: true
});

var url = 'http://127.0.0.1:62940/test2.json';

mapboxgl.accessToken = 'pk.eyJ1IjoicXVlMzIxNiIsImEiOiJjaWhxZmMxMDUwMDBzdXhsdWh0ZDkyMzVqIn0.sz3lHuX9erctIPE2ya6eCw';

var url = 'http://127.0.0.1:62940/test2.json';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [8.538961, 47.372476],
  zoom: 16,
  pitch: 40,
  hash: true
});

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

  map.addLayer({
    'id': 'extrusion',
    'type': 'fill-extrusion',
    "source": {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": []
      }
    },
    'paint': {
      'fill-extrusion-color': '#00f',
      'fill-extrusion-height': ['get', 'frequency'],
      'fill-extrusion-base': 0,
      'fill-extrusion-opacity': 0.9
    }
  }); 

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

  map.addLayer({
    "id": "total",
    'type': 'circle',
    'paint': {
      'circle-radius': {
        'base': 1.75,
        'stops': [
          [12, 2],
          [22, 180]
        ]
      },
      'circle-color': '#ff7770'
    },
    "source": "data",
    /*"source": {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [8.538961, 47.372476]
            },
            "properties": {
              "frequency": 100
            }
          },
          {
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [8.539961, 47.372476]
            },
            "properties": {
              "frequency": 44
            }
          }
        ]
      }
    }*/
  });


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


</script>


三维显示建筑物
身体{
保证金：0；
填充：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
}
mapboxgl.accessToken='pk.eyj1ijoicxvlmzixniisimeijjawhxzmmmduwmdbzdxhsdwh0zdkymzvqin0.sz3lHuX9erctIPE2ya6eCw'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/light-v9',
中间：[8.538961,47.372476]，
缩放：16，
投球：40分，
哈希：对
});
var url='1〕http://127.0.0.1:62940/test2.json';
mapboxgl.accessToken='pk.eyj1ijoicxvlmzixniisimeijjawhxzmmmduwmdbzdxhsdwh0zdkymzvqin0.sz3lHuX9erctIPE2ya6eCw'；
var url='1〕http://127.0.0.1:62940/test2.json';
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/light-v9',
中间：[8.538961,47.372476]，
缩放：16，
投球：40分，
哈希：对
});
map.on（'load'，function（））{
map.addLayer({
'id'：'extraction'，
“类型”：“填充拉伸”，
“来源”：{
“类型”：“geojson”，
“数据”：{
“类型”：“FeatureCollection”，
“功能”：[]
}
},
“油漆”：{
“填充拉伸颜色”：“00f”，
“填充拉伸高度”：[“获取”，“频率”]，
“填充拉伸基准”：0，
“填充拉伸不透明度”：0.9
}
}); 
map.addSource（“数据”{
键入：“geojson”，
数据：url，
});
map.addLayer({
“id”：“总计”，
“类型”：“圆”，
“油漆”：{
“圆半径”：{
“基数”：1.75，
“停止”：[
[12, 2],
[22, 180]
]
},
“圆形颜色”：“ff7770”
},
“来源”：“数据”，
/*“来源”：{
“类型”：“geojson”，
“数据”：{
“类型”：“FeatureCollection”，
“特点”：[{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[8.538961，47.372476]
},
“财产”：{
“频率”：100
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[8.539961，47.372476]
},
“财产”：{
“频率”：44
}
}
]
}
}*/
});
map.on（'sourcedata'，函数（e）{
如果（如sourceId！=='total'）返回
如果（例如IsSourceloated！==true）返回
风险值数据={
“类型”：“FeatureCollection”，
“功能”：[]
}
e、 source.data.features.forEach（函数（f）{
var对象=草皮中心质量（f）
var center=object.geometry.coordinates
var半径=10；
变量选项={
步骤：16，
单位：米，
属性：object.properties
};
数据。特征。推（草皮。圆（中心，半径，选项））
})
map.getSource（'extraction'）.setData（data）；
})
});

我想在使用turf处理数据的回调中有一些我不理解的地方，但我不知道是什么，我也没有找到很多mapbox示例来帮助文档

以下是预期输出：

这是我的输出：

感谢您的帮助。

由于您添加了远程geojson文件，您需要更改检查以及获取和处理数据的方式：

  map.on('sourcedata', function(e) {

    // if (e.sourceId !== 'total') return
    if (e.sourceId !== 'data') return
    if (e.isSourceLoaded !== true) return

    var data = {
      "type": "FeatureCollection",
      "features": []
    }

    // e.source.data.features.forEach(function(f) {
    map.querySourceFeatures('data').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);
  })

[]

非常感谢，我想我试过了，但我一定是跳过了。还有一个问题。如果您有类似的圆，您将如何使拉伸的半径适应圆的半径：“绘制”：{//当用户从z12缩放到z22时，使圆变大‘圆半径’：{‘基本’：1.75，‘停止’：[[9,5]，[13,10]，[22,2]}，”作为一个概念，您可以计算将以像素为单位的半径转换为以米为单位的半径：这就像一个符咒。对于mapbox（和JS的一部分）来说，我不太清楚我是否理解。您介意添加一些快速的解释吗？PS：忘记接受答案了，所以现在可以接受了。@LBes This

map.getLayer（'total'））.paint.get（'circle-radius'）.evaluate（）

返回图层的当前圆半径。如果您知道圆的地理中心，首先将其坐标转换为屏幕像素，沿Y轴按半径值转移点，将投影反转为地理坐标，然后以米为单位获取半径。好的，我知道了，我想。非常感谢您的帮助。我真的很感激。不知何故，mapbox文档对我来说仍然相当模糊。特别是因为大多数示例都基于旧版本。它们的数量不够。这是我需要了解的问题，找到您的问题为我节省了很多时间！

  map.on('sourcedata', function(e) {

    // if (e.sourceId !== 'total') return
    if (e.sourceId !== 'data') return
    if (e.isSourceLoaded !== true) return

    var data = {
      "type": "FeatureCollection",
      "features": []
    }

    // e.source.data.features.forEach(function(f) {
    map.querySourceFeatures('data').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);
  })