如何为用户添加缩略图以选择卫星视图？

Question

如何为用户添加缩略图以选择卫星视图？

4

我对mapbox和leaflet非常陌生。我试图扩展这个基本的mapbox示例，让用户点击一个小缩略图卫星图像，进入卫星视图。我已经查看了mapbox和leaflet的示例，但没有找到解决方法。是否有可能实现？类似谷歌地图在左下角显示卫星视图的方式： https://www.google.com/maps/place/New+York,+NY/@40.6971494,-74.2598655,10z/data=!3m1!4b1!4m5!3m4!1s0x89c24fa5d33f083b:0xc80b8f06e177fe62!8m2!3d40.7127753!4d-74.0059728?hl=en-US

<!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。都可以。好的，谢谢。

- user_78361084

2个回答

5

听起来你可能对一些与图层切换控件相关的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许可证）

Leaflet控件，以小图标形式显示基础图层（演示）。

对于这个插件，即使文档使用不同的图片作为预览图标，大小为80x80像素，你也可以很好地重复使用具有特定坐标的瓷砖，并且该插件将调整其大小以适应其图标：

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: '&copy; <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: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <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;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/ScanEx/Leaflet-IconLayers/ea9af769/dist/iconLayers.css" />
<script src="https://cdn.rawgit.com/ScanEx/Leaflet-IconLayers/ea9af769/dist/iconLayers.js"></script>

<div id="map"></div>

如果您希望，也可以使用来自Mapbox静态API的图像，如stdob--'s answer所示。

- ghybs

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- stdob-- · Accepted Answer

您可以使用Mapbox静态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 ]