我在与我的html文件相同的存储库中有一个example.geojson文件，其格式如下：
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[0.328475794345889,51.5430323219002],
[0.330011830097691,51.544575635037],
[0.332923372866699,51.5445177628264],
[0.334298679806651, 51.5429165836459],
[0.328475794345889,51.5430323219002]
]
]
},
"properties": {
"O3_var": null,
"CO2_var": null,
"NO2_var": null,
"O3_mean": null,
"CO2_mean": null,
"NO2_mean": null,
"PM10_var": null,
"PM25_var": null,
"PM10_mean": null,
"PM25_mean": null,
"measurement_start_utc": null
}
}
]
}
而且我想将其导入html并在地图上创建一个多边形。我已经试过了：
<!DOCTYPE html>
<html>
<head>....</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'max_access_token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [-0.318092, 51.509865],
zoom: 10
});
map.on('load', function() {
map.addSource('london', {
'type': 'geojson',
'data': './example.geojson',
});
map.addLayer({
'id': 'london-boundary',
'type': 'fill',
'source': 'london',
'paint': {
'fill-color': '#888888',
'fill-opacity': 0.4
},
'filter': ['==', '$type', 'Polygon']
});
});
</script>
我应该在html文件中进行哪些更改？因为输出只是一个地图。请任何建议将有所帮助。预先谢谢你。
感谢您的回复。我很抱歉。都是我的错。我应该使用http服务器来加载页面。我使用了python3 http服务器。