Question

我已经在Mapbox Studio中创建了一张地图来显示英吉利郡。我现在想添加一个弹出框，以在单击时显示有关县的更多信息。我已经导出了html代码，mapbox地图可以正常加载，但是当我添加代码以具有交互式弹出框时，地图不会加载。也许：

县的geojson文件太大而无法加载？
县的geojson文件位于错误的同源系统中？
原始index.html文档中指定的用于加载geojson文件的路径错误？我目前正在将Geojson文件存储在我的Google驱动器文件夹中，但是可以将它存储在与index.html文档相同的文件夹中吗？
我使用错误的代码创建了一个弹出框？

map.on('load',function(){
    map.addlayer({
    'id':'District_borough_unitary_1',
    'type'='fill',
    'source':{
    'type':'geojson',
    'data':'https://drive.google.com/drive/folders/'

，还有：

map.on('click','District_borough_unitary_1',function(e){
    new mapboxgl.popup()
    .setlnglat(e.lnglat)
    .sethtml(e.features[0].properties.label)
    .addto(map);

我应该显示的其他代码元素吗？

Answer 1

您需要通过可从外部访问的URL（例如GitHub Pages）提供数据。 documentation发出的请求应类似于以下内容。

var url = 'https://your-URL-which-serves-a-GeoJSON.com/';
map.on('load', function() {
    map.addSource('District_borough_unitary_1', { type: 'geojson', data: url});
    map.addLayer({
        'id': 'District_borough_unitary_1',
        'type': 'symbol',
        'source': 'District_borough_unitary_1',
        'layout': {
           'icon-image': 'rocket-15'
        }
    });
});

Mapbox在“多边形”上单击不会产生弹出框

1 个答案: