Shapefile к ссылке GeoJSON с помощью Mapbox

Я создал пользовательскую карту и стиль в Mapbox, и я пытаюсь настроить эту карту с помощью всплывающих окон и бликов.Shapefile к ссылке GeoJSON с помощью Mapbox

Я новичок в кодировании, и у меня возникли проблемы с созданием всплывающего окна при наведении мыши на многоугольник. Мне удалось создать всплывающее окно с точкой/маркером, но я хотел бы, чтобы шейп-файлы выделялись при наведении и с событием клика, отображали всплывающее окно с более настраиваемой информацией (не связанной с таблицей атрибутов в исходном файле формы) ,

Есть ли простой сценарий для этого? Мне интересно, плохо ли мой шейп-файл для преобразования geojson?

источник

2016-04-26 Megan

Вы должны проверить this example, который демонстрирует, как это сделать, используя mapbox-gl-js. Heres код:

<!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

ответ

Смежные вопросы