我可以将 MapBox 用于街景，如谷歌地图街景吗

Question

我想在地图框中实现类似谷歌街景的街景。如果有人有任何想法，请相应地指导我。

Answer 1

注意（更新）：将非谷歌地图与街景结合使用不符合谷歌的服务条款：http://cloud.google.com/maps-platform/terms

---

从技术上讲是可能的：

您可以将Google Street View Service 与自定义地图框地图一起使用。

要创建街景全景图，您需要对其进行初始化：

panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
    position: { lng: 23.332791136054766, lat: 42.69581966446731 },
    pov: { heading: 165, pitch: 0 },
    addressControl: false,
    linksControl: true, // guide arrows
    panControl: false, // compass
    zoomControl: false,
    /*
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },*/
    fullscreenControl: true,
    fullscreenControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    zoom: 5,
    visible: true,
    mode: 'html5' // fixes bug in FF: http://stackoverflow.com/questions/28150715/remove-google-street-view-panorama-effect
});

然后您可以根据来自您的 mapbox 地图的事件更新全景位置：

panorama.setPov({
    heading: +building.heading || 0,
    pitch: +building.pitch || 0,
    zoom: +building.zoom || 1
});
panorama.setPosition({
    lng: +building.lng,
    lat: +building.lat
});

// NOTE: this fixes broken behavior:
panorama.setVisible(false);
panorama.setVisible(true);

或者，您可以查看Mapillary，它是比 Google 街景更开放的替代方案。他们实际上在explorer UI 中使用了 mapbox-gl。

Answer 2

2022 年更新

我知道这个问题很老了。我迟到了，但我确实想添加一个答案，因为我正在专门寻找这个，我找到了一个根本不需要使用谷歌的答案。如果您像我一样正在寻找 Google-free 且独立的解决方案，那么就可以了。

Mapbox 和 Mapillary 实际上已经配对提供street view。

L.mapbox.accessToken = 'pk.eyJ1Ijoid2ViYjI0aCIsImEiOiJjazU3a2lkbW4wNGJrM2RvNnNrNnBzbGlxIn0.GGnF34IsMQyqKNoam241tA';
var map = L.mapbox.map('map')
    .setView([38.9, -77.0346], 13)
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

map.attributionControl
    .addAttribution('<a href="https://mapillary.com/">Images from Mapillary</a>');

var API_ENDPOINT = 'https://api.mapillary.com/v1/im/search?' +
    'min-lat=SOUTH&max-lat=NORTH&min-lon=WEST&max-lon=EAST&' +
    'max-results=100&geojson=true';

var images = L.mapbox.featureLayer()
    .on('layeradd', function(e) {
        e.layer.bindPopup('<img src="' + e.layer.feature.properties.image + '" />', {
            minWidth: 340
        });
    })
    .addTo(map);

images.loadURL(API_ENDPOINT
    .replace('SOUTH', map.getBounds().getSouth())
    .replace('NORTH', map.getBounds().getNorth())
    .replace('WEST', map.getBounds().getWest())
    .replace('EAST', map.getBounds().getEast()));