Implementar estilo dinâmico para mapas internos do CriadorImplement dynamic styling for Creator indoor maps

O serviço de estado do recurso do Criador do Azure Mapas permite que você aplique estilos com base nas propriedades dinâmicas dos recursos de dados do mapa interno.Azure Maps Creator Feature State service lets you apply styles based on the dynamic properties of indoor map data features. Por exemplo, você pode renderizar as salas de reunião de um local com uma cor específica para refletir o status de ocupação.For example, you can render facility meeting rooms with a specific color to reflect occupancy status. Neste artigo, mostraremos como renderizar dinamicamente os recursos de mapa interno com o serviço de estado do recurso e o módulo Web interno.In this article, we'll show you how to dynamically render indoor map features with the Feature State service and the Indoor Web Module.

Pré-requisitosPrerequisites

  1. Crie uma conta do Azure MapasCreate an Azure Maps account
  2. Obtenha uma chave de assinatura primária, também conhecida como a chave primária ou a chave de assinatura.Obtain a primary subscription key, also known as the primary key or the subscription key.
  3. Crie um recurso do CriadorCreate a Creator resource
  4. Baixe o pacote de exemplo do Drawing.Download the sample Drawing package.
  5. Crie um mapa interno para obter um tilesetId e um statesetId.Create an indoor map to obtain a tilesetId and statesetId.
  6. Crie um aplicativo Web seguindo as etapas em Como usar o módulo de mapa interno.Build a web application by following the steps in How to use the Indoor Map module.

Este tutorial usa o aplicativo Postman, mas você pode escolher um ambiente de desenvolvimento de API diferente.This tutorial uses the Postman application, but you may choose a different API development environment.

Implementar estilo dinâmicoImplement dynamic styling

Depois de concluir os pré-requisitos, você deve ter um aplicativo Web simples configurado com sua chave de assinatura, tilesetId e statesetId.Once you complete the prerequisites, you should have a simple web application configured with your subscription key, tilesetId, and statesetId.

Selecionar recursosSelect features

Para implementar o estilo dinâmico, um recurso, como uma sala de reunião ou de conferência, deve ser referenciado por seu recurso id.To implement dynamic styling, a feature, such as a meeting or conference room, must be referenced by its feature id. Você usará o recurso id para atualizar a propriedade dinâmica ou o estado do recurso.You'll use the feature id to update the dynamic property or state of that feature. Para exibir os recursos definidos em um conjunto de dados, você pode usar um dos seguintes métodos:To view the features defined in a dataset, you can use one of the following methods:

  • API do WFS (Web Feature Service).WFS API (Web Feature Service). Os conjuntos de dados podem ser consultados usando a API do WFS.Datasets can be queried using the WFS API. O WFS segue os recursos da API do Open Geospatial Consortium.WFS follows the Open Geospatial Consortium API Features. A API do WFS é útil para consultar recursos dentro de um conjunto de dados.The WFS API is helpful for querying features within a dataset. Por exemplo, você pode usar o WFS para localizar todas as salas de reunião de tamanho médio de um determinado local e piso.For example, you can use WFS to find all mid-size meeting rooms of a given facility and floor level.

  • Implemente código personalizado que permite que um usuário selecione recursos em um mapa usando seu aplicativo Web.Implement customized code that allows a user to select features on a map using your web application. Neste artigo, vamos usar essa opção.In this article, we'll make use of this option.

O script a seguir implementa o evento de clique do mouse.The following script implements the mouse click event. O código recupera o recurso id com base no ponto clicado.The code retrieves the feature id based on the clicked point. Em seu aplicativo, você pode inserir o código abaixo do seu bloco de código do gerenciador interno.In your application, you can insert the code below your Indoor Manager code block. Execute o aplicativo e verifique o console para obter o recurso id do ponto clicado.Run your application and check the console to obtain the feature id of the clicked point.

/* Upon a mouse click, log the feature properties to the browser's console. */
map.events.add("click", function(e){

    var features = map.layers.getRenderedShapes(e.position, "indoor");

    var result = features.reduce(function (ids, feature) {
        if (feature.layer.id == "indoor_unit_office") {
            console.log(feature);
        }
    }, []);
});

O tutorial criar um mapa interno configurou o conjunto de estados do recurso para aceitar atualizações de estado para occupancy.The Create an indoor map tutorial configured the feature stateset to accept state updates for occupancy.

Na próxima seção, vamos definir o estado de ocupação do escritório UNIT26 como true.In the next section, we'll set the occupancy state of office UNIT26 to true. enquanto o escritório UNIT27 será definido como false.while office UNIT27 will be set to false.

Definir status de ocupaçãoSet occupancy status

Agora, atualizaremos o estado dos dois escritórios, UNIT26 e UNIT27:We'll now update the state of the two offices, UNIT26 and UNIT27:

  1. No aplicativo Postman, selecione Novo.In the Postman application, select New. Na janela Criar, selecione Solicitação.In the Create New window, select Request. Insira o Nome da solicitação e selecione uma coleção.Enter a Request name and select a collection. Clique em SalvarClick Save

  2. Use a API de estados de atualização de recursos para atualizar o estado.Use the Feature Update States API to update the state. Passe a ID do conjunto de estados e UNIT26 para uma das duas unidades.Pass the stateset ID, and UNIT26 for one of the two units. Acrescente sua chave de assinatura do Azure Mapas.Append your Azure Maps subscription key. Essa é a URL da solicitação POST para atualizar o estado:Here's the URL of a POST request to update the state:

    https://atlas.microsoft.com/featureState/state?api-version=1.0&statesetID={statesetId}&featureID=UNIT26&subscription-key={Azure-Maps-Primary-Subscription-key}
    
  3. Nos Cabeçalhos da solicitação POST, defina Content-Type como application/json.In the Headers of the POST request, set Content-Type to application/json. No CORPO da solicitação POST, grave o JSON a seguir com as atualizações de recursos.In the BODY of the POST request, write the following JSON with the feature updates. A atualização será salva somente se o carimbo de data/hora postado for posterior ao carimbo de data/hora usado nas solicitações de atualização de estado do recurso anterior para o mesmo recurso ID.The update will be saved only if the posted time stamp is after the time stamp used in previous feature state update requests for the same feature ID. Passe o keyName "ocupado" para atualizar seu valor.Pass the "occupied" keyName to update its value.

    {
        "states": [
            {
                "keyName": "occupied",
                "value": true,
                "eventTimestamp": "2019-11-14T17:10:20"
            }
        ]
    }
    
  4. Refaça as etapas 2 e 3 usando UNIT27, com o JSON a seguir.Redo step 2 and 3 using UNIT27, with the following JSON.

    {
        "states": [
            {
                "keyName": "occupied",
                "value": false,
                "eventTimestamp": "2019-11-14T17:10:20"
            }
        ]
    }
    

Visualizar estilos dinâmicos em um mapaVisualize dynamic styles on a map

O aplicativo Web que você abriu anteriormente em um navegador agora deve refletir o estado atualizado dos recursos do mapa.The web application you previously opened in a browser should now reflect the updated state of the map features. O UNIT27(151) deve aparecer em verde e o UNIT26(157) deve aparecer em vermelho.UNIT27(151) should appear green and UNIT26(157) should appear red.

A sala livre é mostrada em verde e a sala ocupada é mostrada em vermelho

Próximas etapasNext steps

Saiba mais sobre isso lendo:Learn more by reading:

Consulte as referências das APIs mencionadas neste artigo:See to the references for the APIs mentioned in this article: