Shapefile到GeoJSON参考与Mapbox

我已经在Mapbox中创建了一个自定义地图和样式，我试图用弹出窗口和高光进一步自定义地图。Shapefile到GeoJSON参考与Mapbox

我是新来编码，并且在将鼠标悬停在多边形上时发生弹出事件时遇到问题。我已成功创建带有点/标记的弹出窗口，但我希望shapefiles在悬停和单击事件时突出显示带有更多自定义信息的弹出窗口（与原始形状文件中的属性表无关）。

有没有一个简单的脚本？我想知道如果我的shapefile geojson转换是坏的？

2016-04-26 Megan

你应该检查出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>

希望这有助于！

来源

2016-04-26 20:16:55 cammace

Shapefile到GeoJSON参考与Mapbox

回答

相关问题