如何在Azure Maps中添加多个室内地图？请求详细操作步骤与示例

Hey Satyam, totally get where you're coming from—figuring out how to display multiple indoor maps in Azure Maps can feel confusing if you're parsing vague existing answers. Let's break this down into clear, actionable steps with a full code example so you can implement it smoothly.

The key thing to know is that Azure Maps' IndoorManager doesn't let you load multiple indoor tilesets at the same time (since only one map can be rendered in the viewport at once), but you can easily switch between different indoor maps by updating the manager's configuration. That's the practical workaround to handle multiple indoor locations.

1. Gather Your Indoor Map Resources #

First, collect these details for each of your indoor maps (you can find these in the Azure Portal under your Azure Maps account > Indoor Maps):

• Tileset ID: Unique ID for the floor plan tiles of each location
• Stateset ID (optional): If you have dynamic data (like room occupancy), this links to the real-time state data for the tileset
• API Key: Your Azure Maps primary/secondary key (required to authenticate requests)

2. Set Up the Basic Map & IndoorManager #

Start by loading the Azure Maps JS SDK and initializing the map with your first indoor map as the default.

3. Add a Switch Control #

Create a simple UI control (like a dropdown or button group) to let users toggle between your indoor maps. This keeps the experience intuitive for end-users.

4. Implement the Switch Logic #

Write a function that updates the IndoorManager's configuration to point to the new tileset/stateset when the user selects a different location. You can also adjust the map's camera to focus on the new building for a better user experience.

Here's a complete HTML example you can copy, tweak, and test right away:

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Indoor Maps in Azure Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Load Azure Maps SDK -->
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" rel="stylesheet" />
    <!-- Load Indoor Maps module -->
    <script src="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.js"></script>
    <link href="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.css" rel="stylesheet" />

    <style>
        #map {
            height: 80vh;
            width: 100%;
        }
        .map-control {
            position: absolute;
            top: 20px;
            left: 20px;
            background: white;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div class="map-control">
        <label for="location-select">Switch Indoor Map:</label>
        <select id="location-select">
            <option value="hq">Headquarters Office</option>
            <option value="retail">Downtown Retail Store</option>
        </select>
    </div>

    <script>
        // Replace these with your actual Azure Maps key and tileset/stateset IDs
        const azureMapsKey = "YOUR_AZURE_MAPS_KEY";
        const indoorMaps = {
            hq: {
                tilesetId: "YOUR_TILESET_ID_HQ",
                statesetId: "YOUR_STATESET_ID_HQ", // Optional: Remove if no dynamic data
                coords: [-122.13315, 47.6097] // Center coordinates for HQ
            },
            retail: {
                tilesetId: "YOUR_TILESET_ID_RETAIL",
                statesetId: "YOUR_STATESET_ID_RETAIL", // Optional
                coords: [-122.3352, 47.6062] // Center coordinates for Retail Store
            }
        };

        // Initialize map
        const map = new atlas.Map("map", {
            center: indoorMaps.hq.coords,
            zoom: 18,
            authOptions: {
                authType: "subscriptionKey",
                subscriptionKey: azureMapsKey
            }
        });

        // Initialize IndoorManager once the map is ready
        let indoorManager;
        map.events.add("ready", () => {
            // Start with HQ as default
            const initialMap = indoorMaps.hq;
            indoorManager = new atlas.indoor.IndoorManager(map, {
                tilesetId: initialMap.tilesetId,
                statesetId: initialMap.statesetId,
                levelControl: true // Show floor level selector
            });
        });

        // Add switch logic
        document.getElementById("location-select").addEventListener("change", (e) => {
            const selectedMap = indoorMaps[e.target.value];
            if (indoorManager && selectedMap) {
                // Update IndoorManager to use the new tileset/stateset
                indoorManager.setOptions({
                    tilesetId: selectedMap.tilesetId,
                    statesetId: selectedMap.statesetId
                });

                // Adjust map camera to focus on the selected location
                map.setCamera({ center: selectedMap.coords, zoom: 18 });
            }
        });
    </script>
</body>
</html>

• One Map at a Time: You can't render multiple indoor maps simultaneously, but switching between them is seamless with the method above.
• Permissions: Ensure your Azure Maps account has access to all the tilesets/statesets you're using (check in the Azure Portal under Indoor Maps > Access Control).
• Dynamic States: If you're using statesets, make sure each tileset is linked to the correct stateset—they're paired when you create indoor map resources.
• Camera Adjustment: Always update the map's camera when switching locations, otherwise users might be looking at the wrong area.

内容的提问来源于stack exchange，提问作者Satyam Chauhan