基于本地geojson文件的mapbox的3D挤出 [英] 3D Extrusion with mapbox based on local geojson file
本文介绍了基于本地geojson文件的mapbox的3D挤出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
I have seen this example online which does data-driven building extrusion but doesn't provide the code at all.
我非常想实现同样的目标.我有一个geojson文件，该文件具有某种属性，我想将其映射到建筑物的高度.你知道这怎么可能吗?
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?
我已经考虑过推荐的替代方法:对已经根据我的数据生成的圆进行3D拉伸. 此博客文章上的代码不是提供的代码，所以我将此代码起诉为
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.
代码如下:
<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>
所以这很好.
但是，当我尝试使用包含完全相同数据的本地geojson文件获取同一内容时，它根本无法工作.
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.
这是我的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]}}]}
这是我的代码:
<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>
我猜想在用草皮处理数据的回调中有一些我不了解的东西，但我只是想不通，而且我找不到很多mapbox示例与文档一起使用来提供帮助
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.
以下是预期的输出:
这是我的输出:
任何帮助将不胜感激.
推荐答案
由于添加了远程geojson文件，因此需要更改检查以及获取和处理数据的方式:
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://jsfiddle.net/vd2crsob/]
这篇关于基于本地geojson文件的mapbox的3D挤出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
