使用 Mapbox 到 GeoJSON 的 Shapefile 参考答案

【问题标题】：Shapefile to GeoJSON reference with Mapbox使用 Mapbox 到 GeoJSON 的 Shapefile 参考
【发布时间】：2016-04-26 19:43:21
【问题描述】：

我已经在 Mapbox 中创建了一个自定义地图和样式，并且我正在尝试使用弹出窗口和突出显示进一步自定义地图。

我是编码新手，在将鼠标悬停在多边形上时无法触发弹出事件。我已经成功地创建了带有点/标记的弹出窗口，但是我希望 shapefile 在悬停时突出显示并通过单击事件显示带有更多自定义信息的弹出窗口（与原始形状文件中的属性表无关） .

有一个简单的脚本吗？我想知道我的 shapefile 到 geojson 的转换是否不好？

【问题讨论】：

标签： maps geocoding mapbox geojson

【解决方案1】：

您应该查看this example，它演示了如何使用 mapbox-gl-js 完成此操作。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.css' rel='stylesheet' />
<style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<style>
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

.marker-title {
    font-weight: 700;
}
</style>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [-100.04, 38.907],
zoom: 3
});

map.on('load', function () {
    // Add marker data as a new GeoJSON source.
    map.addSource('states', {
        'type': 'geojson',
        'data': 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces_shp.geojson'
    });

    // Add a layer showing the markers.
    map.addLayer({
        'id': 'states-layer',
        'type': 'fill',
        'source': 'states',
        'paint': {
            'fill-color': 'rgba(200, 100, 240, 0.4)',
            'fill-outline-color': 'rgba(200, 100, 240, 1)'
        }
    });
});


// When a click event occurs near a marker icon, open a popup at the location of
// the feature, with description HTML from its properties.
map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['states-layer'] });
    if (!features.length) {
        return;
    }

    var feature = features[0];

    var popup = new mapboxgl.Popup()
        .setLngLat(map.unproject(e.point))
        .setHTML(feature.properties.name)
        .addTo(map);
});

// Use the same approach as above to indicate that the symbols are clickable
// by changing the cursor style to 'pointer'.
map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['states-layer'] });
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});
</script>

</body>
</html>

希望对您有所帮助！

【讨论】：