这些数据的格式是什么?Mapbox Javascript问题

我一直在尝试创建像这样的Mapbox图：https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/)使用javascript。

我试图使用psql中的数据(包括lat和long在内的特征列(创建它，这些数据通过Python(flask(后端传递到我的html文件中。我可以让链接的绘图工作，但看不到如何在其中获取我自己的数据。我尝试过使用GeoJSON文件的map.addSource功能，但就是无法使用。我觉得如果我可以在他们使用的链接中复制数据，我可以绘制它，但我看不到数据！

任何想法都会很棒！我是JS的新手，所以虽然我读了文档，但可能会遗漏一些内容。

这是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Style circles with a data-driven property</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}

#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 12,
center: [-122.447303, 37.753574]
});
map.on('load', function() {
/* Sample feature from the `examples.8fgz4egr` tileset:
{
"type": "Feature",
"properties": {
"ethnicity": "White"
},
"geometry": {
"type": "Point",
"coordinates": [ -122.447303, 37.753574 ]
}
}
*/
map.addSource('ethnicity', {
type: 'vector',
url: 'mapbox://examples.8fgz4egr'
});
map.addLayer({
'id': 'population',
'type': 'circle',
'source': 'ethnicity',
'source-layer': 'sf2010',
'paint': {
// make circles larger as the user zooms from z12 to z22
'circle-radius': {
'base': 1.75,
'stops': [
[12, 2],
[22, 180]
]
},
// color circles by ethnicity, using a match expression
// https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
'circle-color': [
'match', ['get', 'ethnicity'],
'White',
'#fbb03b',
'Black',
'#223b53',
'Hispanic',
'#e55e5e',
'Asian',
'#3bb2d0',
/* other */
'#ccc'
]
}
});
});
</script>
</body>
</html>

Mapbox GL JS支持GeoJSON源或Vector源来显示矢量数据。即没有其他选择来显示数据。这里有一些选择。

矢量平铺集生成Vector tileset是一个有点繁重的操作，但对于客户端性能来说，它是一个不错的选择

1-1。Mapbox上的主机：使用MTS管理Mapbox服务器上托管的矢量tileset。1-2.在服务器上托管：通过使用tipecanoe工具在服务器上创建矢量tileset并在服务器上进行托管。

GeoJSON通常，您将创建一个端点，返回从数据库生成的完整GeoJSON。如果GeoJSON的大小很大，那么最好实现获取坐标并返回附近数据的端点

在这种情况下，我最终在Python中使用geojson从SQLAlchemy数据创建json文件，然后从后端传递，并使用jinja2将其传递到html文件。

然后我做了：

var data = JSON.parse(‘{{ json_data | tojson }}’)

然后将这些数据来源到我的地图中！！！

花了一些时间，但这似乎是将SQLAlchemy数据放到地图框上最流畅的方法。当处理超过200行的数据时，速度可能会变慢，但目前这是一个很好的解决方案！

相关内容

最新更新

热门标签：