javascript - 如何添加缩略图供用户选择卫星 View ？-6ren

javascript - 如何添加缩略图供用户选择卫星 View ？

转载作者：搜寻专家更新时间：2023-11-01 05:03:19

30

4

我对 mapbox 和 leaflet 很陌生。我正在尝试扩展 basic mapbox example here让用户点击一个小的缩略卫星图像，将他们带到卫星 View 。我已经完成了 mapbox 和传单的示例，但看不到任何方法。是否可以？谷歌地图如何处理左下角的卫星 View :

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。可以是。好的谢谢。

最佳答案

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

关于javascript - 如何添加缩略图供用户选择卫星 View ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51332383/

30

4

0

文章推荐： iphone - 在 UIView 中绘制垂直线

html - 缩 child 子以适应 parent
我有一个具有可变数量子元素的固定大小的 div。我不知道 children 的大小。目标是缩小它们以适合父级。例子: .parent { width: 100px; height: 100p

首页

博学

6Ren·AI

商城

javascript - 如何添加缩略图供用户选择卫星 View ？