我想在我的 wordpress 网站上嵌入一个带有地球投影的 mapbox GL 地图。我希望对某些邮政编码进行颜色编码。
尽管遵循了教程，但我没有在 mapboxGL 地图上看到任何渲染的彩色多边形。
我下载了 geojson（邮政编码数据），验证它与多边形一起显示在 geojson.io 中，并确认正在访问数据文件。
按照这些教程，第一部分和第二部分。
https://www.youtube.com/watch?v=K024m87QNYY
19:41，你可以看到我想要的一个例子。我的数据没有“boro_code”，而是“zip”。
我进入了拉链和颜色。现在，地图根本没有出现。
我尝试将我的相对数据路径从 /data/richardson.geojson 切换到 https://github.com/studulskia/richardson.git，但这没有帮助。我不是在尝试使用 GLdraw。
如果有人能解释我缺少什么以及如何最好地实现我的目标，我将不胜感激。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Primary Service Area for Castle Black Appraisal</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.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.eyJ1IjoibG9yZGFuZGhlYXJ0aCIsImEiOiJjbGU0emdva2MwODE4M3FvOGp5a3gwdGM4In0.NQ2fFvirWeRlFfxrMo4DAw';
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/satellite-streets-v11',
zoom: 10,
center: [-96.824741,33.037593],
projection: 'globe'
});
map.on('load', () => {
// Set the default atmosphere style
map.setFog({});
//add geojson data for Richardson TX
map.addSource('richardson', {'type': 'geojson',
'data': 'data/richardson.geojson'})
})
map.addLayer({
"id": 'richardson-fill',
'type': 'fill',
'source': 'richardson',
'paint': {
'fill-color': [
'match',
['get', 'ZIP'],
'75042',
'green',
'75044',
'purple',
'75081', 'green',
'75074', 'green',
'75075', 'green',
'75080', 'red',
'75082', 'green',
'75094', 'green',
'75048', 'green',
'75081', 'green',
]
}
})
map.addLayer({
"id": 'richardson-line',
'type': 'line',
'source': 'richardson',
'paint': {
'line-color': 'white',
'line-width': 4,
'line-opacity': 0.7}
</script>
</body>
</html>