如何在JavaScript嵌入版Bing Maps中使用建筑轮廓功能？

背景 #

Bing Maps提供建筑轮廓功能，该功能通过AI在地图上勾勒所有建筑的多边形，并提供总建筑面积信息。

问题 #

已知一组经纬度，希望在嵌入的Bing Maps上显示对应建筑的多边形，该效果已在OSM Id地图中实现（截图如下）

尝试过程 #

已进行如下尝试，但未找到实现该功能所需的模块：

• 下载Bing Maps的npm模块
• 创建Bing Maps实例
• 尝试查找Bing Maps中的建筑轮廓模块

尝试代码如下：

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
var vMap;
Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', function () {
    var venueMapFactory = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
    venueMapFactory.create({
        venueMapId: 'testVenue',
        metadataUrl: 'https://bingmapsisdk.blob.core.windows.net/isdksamples/MicrosoftBuilding2.json',
        success: function (venueMap) {
            vMap = venueMap;
            map.setView(venueMap.bestMapView);
        }
    });
});

解决方案 #

你使用的Microsoft.Maps.VenueMaps是针对室内场馆地图的模块，无法实现户外建筑轮廓的查询与渲染。要达成需求，需按以下步骤操作：

1. 获取目标建筑的轮廓数据
   Bing Maps的部分区域建筑轮廓以开源GeoJSON格式发布，你需要根据目标经纬度，从对应数据集中筛选出匹配的建筑多边形坐标。

2. 在Bing Maps上渲染多边形
   将筛选得到的GeoJSON坐标转换为Bing Maps支持的Location对象数组，再创建Polygon实例添加到地图中。示例代码如下：

// 初始化地图，替换为你的Bing Maps密钥
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    credentials: '你的Bing Maps API密钥'
});

// 示例：目标建筑的GeoJSON坐标数组（格式为[经度, 纬度]）
var buildingGeoCoords = [[-122.3390, 47.6050], [-122.3380, 47.6050], [-122.3380, 47.6040], [-122.3390, 47.6040]];

// 转换为Bing Maps Location对象数组
var mapLocations = buildingGeoCoords.map(coord => new Microsoft.Maps.Location(coord[1], coord[0]));

// 创建建筑多边形样式
var buildingPolygon = new Microsoft.Maps.Polygon(mapLocations, {
    fillColor: 'rgba(0, 128, 255, 0.2)',
    strokeColor: '#0080ff',
    strokeThickness: 2
});

// 将多边形添加到地图
map.entities.push(buildingPolygon);

// 自动定位到该建筑区域
map.setView({ bounds: Microsoft.Maps.LocationRect.fromLocations(mapLocations) });

3. 补充说明

• 若需全球范围的建筑数据，需确认Bing Maps是否提供对应区域的开源数据集；
• 若要实现经纬度到建筑轮廓的动态查询，可自行搭建空间数据查询服务，将经纬度与建筑数据进行空间匹配，或使用合规的第三方地理数据服务。

内容的提问来源于stack exchange，提问作者Eric Angeles