如何为用户添加缩略图以选择卫星视图？
use*_*084 4 javascript maps leaflet mapbox mapbox-gl-js
我对mapbox和传单很新.我试图在这里扩展基本的mapbox示例,让用户点击一个小缩略图卫星图像,将它们带到卫星视图.我已经浏览了mapbox和leaflet的例子,但看不到这样做.可能吗？谷歌地图如何处理左下角的卫星视图:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiYndhZGFtc29uIiwiYSI6ImNqajZhNm1idDFzMjIza3A2Y3ZmdDV6YWYifQ.9NhptR7a9D0hzWXR51y_9w';
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([40, -74.50], 9);
</script>
</body>
</html>
编辑:虽然这个例子是mapbox js我真的不在乎它是mapbox gl还是js.也可以.好,谢谢.
您可以使用mapbox static api来预览卫星图像:
<img src="https://api.mapbox.com/styles/v1/mapbox/satellite-v9/static/-74.50000,40.00000,9.0,0,0/300x300?access_token=pk.eyJ1IjoiYndhZGFtc29uIiwiYSI6ImNqajZhNm1idDFzMjIza3A2Y3ZmdDV6YWYifQ.9NhptR7a9D0hzWXR51y_9w"/>[ https://www.mapbox.com/help/static-api-playground/ ]
更新:
您可以使用mapbox/geo-viewport库来计算中心点和缩放以进行预览,并使用render事件来更新预览:
map.on('render', function() {
setMapPreview()
})
function setMapPreview() {
var bounds = map.getBounds().toArray()
bounds = [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]
// The size of the desired map.
var size = [100, 100];
// Calculate a zoom level and centerpoint for this map.
var vp = geoViewport.viewport(bounds, size, 0, 24, 512);
// Construct a static map url
// https://www.mapbox.com/developers/api/static/
document.getElementById('preview').src =
'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/static/' +
vp.center.join(',') + ',' + vp.zoom + ',0,0/' +
size.join('x') + '?' +
'attribution=false&logo=false&access_token=' + mapboxgl.accessToken;
}
[ https://jsfiddle.net/btv9ogpc/ ]
将事件点击添加到预览并旋转样式不是问题:
document.getElementById('preview').addEventListener('click', function () {
map.setStyle('mapbox://styles/mapbox/satellite-v9')
})
[ https://jsfiddle.net/xh74rb83 ]
听起来你会对一些用于层切换控件的 Leaflet 插件感兴趣（mapbox.js构建在 Leaflet 上，所以它们应该是兼容的）：
- Leaflet.Basemaps : (ISC 许可)
Leaflet 的平铺驱动底图控件。
它允许您根据底层切片服务中的切片创建用户界面控件，用于选择地图上使用的底图。
请参阅示例。
使用此插件，您只需指定一些用作“预览”的常量平铺坐标：
map.addControl(L.control.basemaps({
basemaps: basemaps, // Array of Tile Layers.
tileX: 0, // tile X coordinate
tileY: 0, // tile Y coordinate
tileZ: 1 // tile zoom level
}));
- Leaflet-IconLayers : (MIT 许可证)
将基础层显示为小图标的传单控件（演示）。
对于这个插件，即使文档使用不同的 80x80 像素大小的图像作为预览图标，您也可以很好地重复使用具有特定坐标的图块，插件将调整它们的大小以适合其图标：
map.addControl(L.control.basemaps({
basemaps: basemaps, // Array of Tile Layers.
tileX: 0, // tile X coordinate
tileY: 0, // tile Y coordinate
tileZ: 1 // tile zoom level
}));
var map = L.map('map').setView([48.86, 2.35], 5);
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 17,
attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});
var layers = [{
layer: OpenStreetMap_Mapnik,
title: 'OSM Mapnik',
icon: 'https://a.tile.openstreetmap.org/1/0/0.png'
}, {
layer: OpenTopoMap,
title: 'OSM Topo',
icon: 'https://a.tile.opentopomap.org/1/0/0.png' // Re-use a tile
}];
L.control.iconLayers(layers).addTo(map);html,
body,
#map {
height: 100%;
margin: 0;
}如果您愿意，也可以使用 mapbox 静态 API 中的图像，如stdob--'s answer 所示。