I have seen this example online which does data-driven building extrusion but doesn't provide the code at all.
I would very much like to achieve the same thing. I have a geojson file with some kind of attribute that I would like to map onto the building's height. Would you know how that is possible?
I have considered the recommended alternative: doing 3D extrusions on circles that are already generated based on my data. The code on this blog post is not provided and so I sued the code this SO post.
The code goes like this:
<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>
So this works just fine.
However, when I try to get the same thing with a local geojson file that contains the exact same data, it does not work at all.
Here is my json:
{"type": "FeatureCollection", "features": [{"id": 1, "type": "Feature", "properties": {"frequency":44}, "geometry": {"type": "Point", "coordinates": [8.538961, 47.372476]}}, {"id": 2, "type": "Feature", "properties": {"frequency":200}, "geometry": {"type": "Point", "coordinates": [8.539961, 47.372476]}}]}
And here is my code:
<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>
I guess that there is something I did not understand in the callback done to process the data with turf, but I just can't figure what and I don't find a lot of mapbox examples to go with the documentation to help.
Here is the expected output:
And here is my output:
Any help will be appreciated.
Since you added a remote geojson file, you need to change the checks and the way you get and process the data:
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);
})
来源：https://stackoverflow.com/questions/52372543/3d-extrusion-with-mapbox-based-on-local-geojson-file