Javascript Mapbox GL JS getBounds（）/fitBounds（）

我使用的是Mapbox GL JS v0.14.2，我在文档中进行了大量的搜索，但对此却知之甚少

如果您使用标准JSAPI，使用他们提供的一个示例（）“将映射适配到标记”是非常清楚的；但是，使用GL api时的设置是完全不同的。GL API有

getBounds（）

（），但因为没有像标准JS API那样的命名层，所以我正在努力解决如何使用

getBounds（）

我找到了这个（）但肯定不是正确答案

这是我的大部分设置；不包括JSON设置和其他选项

mapboxgl.accessToken = '<myaccesstoken>';

var markers = <?php echo $programme_json; ?>;

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/richgc/cikyo5bse00nqb0lxebkfn2bm',
    center: [-1.470085, 53.381129],
    zoom: 15
});

map.on('style.load', function() {
    map.addSource('markers', {
        'type': 'geojson',
        'data': markers
    });

    map.addLayer({
        "id": "markers",
        "interactive": true,
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "venue-map-icon-blue",
            'icon-size': 0.5,
            "icon-allow-overlap": true
        }
    });

    map.scrollZoom.disable();

});

所以我知道如何调整边界，但我不确定如何使它们

map.getBounds（）

似乎只是返回设置的中心位置lng/lat

标记JSON:

var markers = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"title":"Site Gallery","url":"\/Freelance\/art-sheffield-2016\/programme\/site-gallery\/","summary":"Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Donec id justo. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Suspendisse feugiat. Etiam rhoncus.","image":"\/Freelance\/art-sheffield-2016\/site\/assets\/files\/1032\/site_gallery.jpg","marker-symbol":"venue-map-icon-blue","colour":"blue"},"geometry":{"type":"Point","coordinates":["-1.466439","53.376842"]}},{"type":"Feature","properties":{"title":"Moore Street Substation","url":"\/Freelance\/art-sheffield-2016\/programme\/moore-street-substation\/","summary":"","image":null,"marker-symbol":"venue-map-icon-green","colour":"green"},"geometry":{"type":"Point","coordinates":["-1.477881","53.374798"]}},{"type":"Feature","properties":{"title":"S1 Artspace","url":"\/Freelance\/art-sheffield-2016\/programme\/s1-artspace\/","summary":"","image":null,"marker-symbol":"venue-map-icon-red","colour":"red"},"geometry":{"type":"Point","coordinates":["-1.459620","53.380562"]}}]};

Mapbox自己的插件就可以做到这一点。假设您的

markers

对象是，您只需将其传递给

geojsonExtent（）

函数即可获得一组边界，然后将其传递给

fitBounds（）

加载文件后（例如，通过在HTML代码中使用

标记），您应该能够将地图与GeoJSON

标记的边界相匹配：

map.fitBounds(geojsonExtent(markers));

更新

报告您的
标记
对象无效，因为每个位置的元素都被解释为字符串，而不是数字。如果从lon-lat坐标中删除引号，应该可以正常工作：


var标记={
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“财产”：{
“标题”：“网站画廊”，
“url”：“\/自由职业者\/艺术-谢菲尔德-2016\/计划\/现场画廊\/”，
“概述”：“二者都是侵权者，都是被侵权者，都是被侵权者，都是被侵权者，都是被侵权者，都是被侵权者，都是被侵权者，都是被侵权者，都是被侵权者。”，
“图片”：“\/自由职业者\/art-sheffield-2016\/site\/assets\/files\/1032\/site\u gallery.jpg”，
“标志符号”：“场馆地图图标蓝色”，
“颜色”：“蓝色”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-1.466439,
53.376842
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“摩尔街变电站”，
“url”：“\/自由职业者\/艺术-谢菲尔德-2016\/计划\/摩尔街变电站\/”，
“摘要”：“摘要”，
“图像”：空，
“标志符号”：“场馆地图图标绿色”，
“颜色”：“绿色”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-1.477881,
53.374798
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“S1艺术空间”，
“url”：“\/自由职业者\/art-sheffield-2016\/计划\/s1艺术空间\/”，
“摘要”：“摘要”，
“图像”：空，
“标志符号”：“场馆地图图标红色”，
“颜色”：“红色”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-1.459620,
53.380562
]
}
}
]
};如果要使贴图适合标记，可以创建包含所有标记的边界

var bounds = new mapboxgl.LngLatBounds();

markers.features.forEach(function(feature) {
    bounds.extend(feature.geometry.coordinates);
});

map.fitBounds(bounds);

要获得适用于所有GeoJSON对象（而不仅仅是一组标记）的解决方案，请查看Mapbox的

这段代码对我很有帮助：

但为了避免链接死掉，请重复以下基本步骤：

var bounds = turf.bbox(markers);
map.fitBounds(bounds, {padding: 20});

链接代码中提到的
extent
方法已被弃用，取而代之的是
bbox
，但结果是相同的。
这是我基于一个

它适用于包含点功能和多点功能（如线）的geojson

let bounds=geoJSON.features.reduce（函数（边界，特征）{
如果（！Array.isArray（feature.geometry.coordinates[0]）{//点特征
返回bounds.extend（feature.geometry.coordinates）；
}否则{
返回feature.geometry.coordinates.reduce（函数（边界、坐标）{
返回边界。扩展（坐标）；
}，界）；
}
}，新的mapboxgl.LngLatBounds（））；
map.fitBounds（边界{
maxZoom:12，
填充：30，//在px中，使顶部边缘上的标记可见
})
如果这里有人正在使用，有两个以上的标记，并且想在加载地图和检索Mapbox实例之前计算出边界，则可以执行以下操作：

const lat = myCoordinatesArray.map(location => parseFloat(location.lat));
const lng = myCoordinatesArray.map(location => parseFloat(location.lng));

// Note that WebMercatorViewport requires this format [lng, lat]
const minCoords = [Math.min.apply(null, lng), Math.min.apply(null, lat)];
const maxCoords = [Math.max.apply(null, lng), Math.max.apply(null, lat)];
const formattedGeoData = [minCoords, maxCoords];

const vPort = new WebMercatorViewport(this.state.viewport).fitBounds(formattedGeoData, {
  padding: 100
});

const { latitude, longitude, zoom } = vPort;

Src:

您可以在使用render函数之前通过构造函数完成所有这些操作，并获取插件init的值。
谢谢您的帮助。我在控制台中得到了这个错误
Uncaught error:Invalid LngLat object:（NaN，1）
–我确实相信它是有效的geoJSON，因为地图正在工作，但我猜
markers
返回的不仅仅是坐标，所以也许我只需要将坐标传递到geojsonExtent它使用静态映射而不是GL JS映射，看起来我的geoJSON是有效的。这很有效！我可以添加填充吗？通常在调用fitBounds时，maps会向该边界添加填充，以防止地图ui元素（如缩放加减按钮、徽标等）与边界重叠。如果您想添加更多的填充，可以使用
map.setZoom（map.getZoom（）-1）
稍微缩小一点贴图，但它看起来像一个小黑客。使用填充：
map.fitBounds（bounds，{padding:100}）请注意，fitBounds不会与单个lat/long一起工作-因此，如果您只有一个标记，则您的
边界
对象将不会有用（这是有意义的）。“map.getBounds（）似乎只是返回设置的中心位置lng/lat”它不是在返回边界框的左下角和右上角坐标吗？如果我将GeoJson构建为
map.on（'load'，function（）{map.addSource（'points'，{'type'：'GeoJson'，'data'：{'type'：'featureCollectionIO，我该怎么做
const lat = myCoordinatesArray.map(location => parseFloat(location.lat));
const lng = myCoordinatesArray.map(location => parseFloat(location.lng));

// Note that WebMercatorViewport requires this format [lng, lat]
const minCoords = [Math.min.apply(null, lng), Math.min.apply(null, lat)];
const maxCoords = [Math.max.apply(null, lng), Math.max.apply(null, lat)];
const formattedGeoData = [minCoords, maxCoords];

const vPort = new WebMercatorViewport(this.state.viewport).fitBounds(formattedGeoData, {
  padding: 100
});

const { latitude, longitude, zoom } = vPort;