admin管理员组

文章数量:1301597

I am very new to mapbox and leaflet. I am trying to extend the basic mapbox example here to let a user click on a small thumbnail satellite image that will take them to the satellite view. I have been through the examples of both mapbox and leaflet but see no way to do it. Is it possible? Something how google maps does with the satellite view in the lower left hand corner:

+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='.js/v3.1.1/mapbox.js'></script>
<link href='.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>

EDIT: Though this example is mapbox js I really don't care if it is mapbox gl or js. Can be either. ok thanks.

I am very new to mapbox and leaflet. I am trying to extend the basic mapbox example here to let a user click on a small thumbnail satellite image that will take them to the satellite view. I have been through the examples of both mapbox and leaflet but see no way to do it. Is it possible? Something how google maps does with the satellite view in the lower left hand corner:

https://www.google./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./mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox./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>

EDIT: Though this example is mapbox js I really don't care if it is mapbox gl or js. Can be either. ok thanks.

  • javascript
  • leaflet
  • maps
  • mapbox
  • mapbox-gl-js
Share edited Jul 13, 2018 at 20:33 user_78361084 asked Jul 13, 2018 at 20:26 user_78361084user_78361084 3,92824 gold badges94 silver badges162 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 8 +100

You can use a mapbox static api to get a preview of the satellite image:

<img src="https://api.mapbox./styles/v1/mapbox/satellite-v9/static/-74.50000,40.00000,9.0,0,0/300x300?access_token=pk.eyJ1IjoiYndhZGFtc29uIiwiYSI6ImNqajZhNm1idDFzMjIza3A2Y3ZmdDV6YWYifQ.9NhptR7a9D0hzWXR51y_9w"/>

[ https://www.mapbox./help/static-api-playground/ ]

Update:

You can use the mapbox/geo-viewport library to calculate centerpoint and zoom for preview, and render event to update preview:

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./developers/api/static/
  document.getElementById('preview').src =
    'https://api.mapbox./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/btv9ogpc/ ]

It's not a problem to add an event click to the preview, and rotate styles: 

document.getElementById('preview').addEventListener('click', function () {
  map.setStyle('mapbox://styles/mapbox/satellite-v9')
})

[ https://jsfiddle/xh74rb83 ]

Sounds like you would be interested by some Leaflet plugins for Layer Switching Controls (mapbox.js is built onto Leaflet, so they should be patible):

  • Leaflet.Basemaps: (ISC License)

A tile driven basemaps control for Leaflet.

It allows you to create a user interface control for choosing the basemap used on the map, based on a tile from the underlying tile service.

See the example.

With this plugin, you simply specify some constant tile coordinates to be used as "preview":

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 License)

Leaflet control that displays base layers as small icons (demo).

For this plugin, even though the documentation uses different images sized 80x80 pixels as preview icon, you can very well re-use tiles with specific coordinates, and the plugin will resize them to fit its icons:

var map = L.map('map').setView([48.86, 2.35], 5);

var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap/copyright">OpenStreetMap</a>'
}).addTo(map);

var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap/{z}/{x}/{y}.png', {
  maxZoom: 17,
  attribution: 'Map data: &copy; <a href="http://www.openstreetmap/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas">SRTM</a> | Map style: &copy; <a href="https://opentopomap">OpenTopoMap</a> (<a href="https://creativemons/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});

var layers = [{
  layer: OpenStreetMap_Mapnik,
  title: 'OSM Mapnik',
  icon: 'https://a.tile.openstreetmap/1/0/0.png'
}, {
  layer: OpenTopoMap,
  title: 'OSM Topo',
  icon: 'https://a.tile.opentopomap/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./[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg./[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://cdn.rawgit./ScanEx/Leaflet-IconLayers/ea9af769/dist/iconLayers.css" />
<script src="https://cdn.rawgit./ScanEx/Leaflet-IconLayers/ea9af769/dist/iconLayers.js"></script>

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

If you wish you can also use images from mapbox static API as shown in stdob--'s answer.

本文标签： javascriptHow do I add a thumbnail for users to select a satellite viewStack Overflow

版权声明：本文标题：javascript - How do I add a thumbnail for users to select a satellite view? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741664108a2391205.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。