时间戳

首页 > 解决方案 > Mapbox JS 图层代码显示空白页

mapbox - Mapbox JS 图层代码显示空白页

问题描述

我正在尝试创建一张美国历史暴力地图，其中包含要打开和关闭的多层数据。我在不同的图层中有七个不同的图块集。我尝试修改 mapbox 文档中的示例，但我得到的只是一条短灰色线。我是 Mapbox 新手和历史老师，而不是专业编码员。任何帮助是极大的赞赏。谢谢！

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Museum of Intolerance</title>    
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />

</head>
<body>  
 
<nav id="menu"></nav>
<div id="map"></div>

<script>
mapboxgl.accessToken = 'TOKEN';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/STYLE', // stylesheet location
    zoom: 3 // starting zoom
    center: [-95, 40], // starting position [lng, lat]
});
map.on('load', function() {
// add source and layer for WaPo
map.addSource('WaPo', {
    type: 'vector',
    url: 'mapbox://jmcdonaldgcs.a9zkf6ur'
});
map.addLayer({
    'id': 'WaPo',
    'type': 'circle',
    'source': 'WaPo',
    'layout': {
// make layer visible by default
    'visibility': 'visible'
},
'paint': {
    'circle-radius': 2,
    'circle-color': 'rgba(55,148,179,1)'
},
    'source-layer': 'WaPo'
});
 
        
// enumerate ids of the layers
var toggleableLayerIds = ['WaPo'];

 
// set up the corresponding toggle button for each layer
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
 
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = id;
 
link.onclick = function(e) {
var clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();
 
var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
 
// toggle layer visibility by changing the layout object's visibility property
if (visibility === 'visible') {
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
}
};
 
var layers = document.getElementById('menu');
layers.appendChild(link);
}   
</script>
    
</body>
</html>

标签： mapboxmapbox-gl-js

解决方案

我发现您的代码有几个语法错误（地图创建缩放后的逗号和加载地图范围的关闭），并且缺少地图正确定位的样式。这段代码至少可以绘制地图，但我无法下载 json 文件mapbox://jmcdonaldgcs.a9zkf6ur，如果你分享它，我可以帮助完成其余的功能。

问候！

<!--<!DOCTYPE html>-->
<html>
<head>
<meta charset="UTF-8" />
<title>Museum of Intolerance</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.11.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' class='map'>
</div>

<script>

    mapboxgl.accessToken = 'PUT HERE YOUR TOKEN';

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
        zoom: 3, // starting zoom
        center: [-95, 40], // starting position [lng, lat]
    });
    map.on('load', function () {
        // add source and layer for WaPo
        map.addSource('WaPo', {
            type: 'vector',
            url: 'mapbox://jmcdonaldgcs.a9zkf6ur'
        });
        map.addLayer({
            'id': 'WaPo',
            'type': 'circle',
            'source': 'WaPo',
            'layout': {
                // make layer visible by default
                'visibility': 'visible'
            },
            'paint': {
                'circle-radius': 2,
                'circle-color': 'rgba(55,148,179,1)'
            },
            'source-layer': 'WaPo'
        });


        // enumerate ids of the layers
        var toggleableLayerIds = ['WaPo'];


        // set up the corresponding toggle button for each layer
        for (var i = 0; i < toggleableLayerIds.length; i++) {
            var id = toggleableLayerIds[i];

            var link = document.createElement('a');
            link.href = '#';
            link.className = 'active';
            link.textContent = id;

            link.onclick = function (e) {
                var clickedLayer = this.textContent;
                e.preventDefault();
                e.stopPropagation();

                var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

                // toggle layer visibility by changing the layout object's visibility property
                if (visibility === 'visible') {
                    map.setLayoutProperty(clickedLayer, 'visibility', 'none');
                    this.className = '';
                } else {
                    this.className = 'active';
                    map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
                }
            };

            var layers = document.getElementById('menu');
            layers.appendChild(link);
        }
    });
</script>
</body>

</html>

推荐阅读