Вопросы Теги

Как добавить миниатюру для пользователей, чтобы выбрать вид со спутника?

Я пытаюсь ответить на основании того, что я понял. Посмотрите, если это вам поможет.

  1. Создайте ActionbarActivity.
  2. Создайте макет для этой операции и используйте файл android.support.v4.widget.DrawerLayout и макет кадра в нем.
  3. инициализируйте макет ящика и
  4. Затем вы можете создать фрагмент, создать его макет и использовать метод add диспетчера фрагментов для прикрепления его фрагмента к кадру, который вы создали ранее.
4
задан Marissa Levy 13 July 2018 в 20:33
поделиться

2 ответа

Вы можете использовать статический алиас mapbox, чтобы получить предварительный просмотр изображения спутника: 

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

5
ответ дан stdob-- 17 August 2018 в 12:09
поделиться
  • 1
    ОК. Как сделать предварительный просмотр в нижнем углу главной карты? – Marissa Levy 15 July 2018 в 23:13
  • 2
    @MarissaLevy См. Jsfiddle в обновлении – stdob-- 16 July 2018 в 01:36
  • 3
    О, хорошо. Благодарю. Есть ли простой трюк, чтобы сделать это, когда пользователь нажимает на предварительный просмотр спутника, он делает вид, что спутник видит более крупный вид (и обычную карту - просмотр миниатюр)? – Marissa Levy 16 July 2018 в 02:27
  • 4
    @MarissaLevy Не стоит добавлять событие click в предварительный просмотр и вращать стили: jsfiddle.net/xh74rb83 – stdob-- 16 July 2018 в 10:01

Похоже, что вас будут интересовать некоторые плагины Leaflet для управления Layer Switching Control ( mapbox.js встроены в лифлет, поэтому они должны быть совместимы):

Элемент управления базой данных, управляемый черепицей, для Листовки.

Это позволяет вам создать элемент управления пользовательским интерфейсом для выбора базовой карты, используемой на карте, на основе фрагмента из базовой службы плитки.

См. Пример .

С помощью этого плагина вы просто указываете некоторые постоянные координаты плитки, которые будут использоваться как «предварительный просмотр»: 

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
}));

Элемент управления листами, отображающий базовые слои в виде небольших значков ( demo ).

Для этого плагина, несмотря на то, что документация использует разные изображения размером 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>

Если вы хотите, вы также можете использовать изображения из API-интерфейса mapbox static, как показано в stdob - ответ .

4
ответ дан ghybs 17 August 2018 в 12:09
поделиться
Другие вопросы по тегам:

Похожие вопросы: