Implementar estilo dinâmico para mapas internos do Criador

Você pode usar o serviço de Estado do Recurso do Criador do Azure Mapas para aplicar estilos baseados nas propriedades dinâmicas dos recursos de dados do mapa interno. 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. Este artigo descreve como renderizar dinamicamente os recursos de mapa interno com o serviço de estado do recurso e o módulo Web interno.

Pré-requisitos

Este artigo usa o aplicativo Postman, mas você pode escolher um ambiente de desenvolvimento de API diferente.

Implementar estilo dinâmico

Depois de concluir os pré-requisitos, você deve ter um aplicativo Web simples configurado com sua chave de assinatura e statesetId.

Selecionar recursos

Você referencia um recurso, como uma sala de reunião ou conferência, pela ID para implementar o estilo dinâmico. Use a ID de recurso para atualizar a propriedade dinâmica ou o estado desse recurso. Para exibir os recursos definidos em um conjunto de dados, use um dos seguintes métodos:

  • API do WFS (Web Feature Service). Use a API do WFS para consultar conjuntos de dados. O WFS segue os recursos de API do Open Geospatial Consortium. A API do WFS é útil para consultar recursos dentro de um conjunto de dados. Por exemplo, você pode usar o WFS para localizar todas as salas de reunião de tamanho médio de um local e piso específico.

  • Implemente código personalizado que um usuário pode usar para selecione recursos em um mapa usando seu aplicativo Web, conforme demonstrado neste artigo.

O script a seguir implementa o evento de clique do mouse. O código recupera a ID do recurso com base no ponto clicado. Em seu aplicativo, você pode inserir o código depois do seu bloco de código do gerenciador interno. Execute o aplicativo e, em seguida, verifique o console para obter a ID do recurso do ponto clicado.

/* 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, "unit");

    features.forEach(function (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.

Na próxima seção, você definirá o estado de ocupação do escritório UNIT26 como true e do escritório UNIT27 como false.

Definir status de ocupação

Atualize o estado dos dois escritórios, UNIT26 e UNIT27:

  1. No aplicativo Postman, selecione Nova.

  2. Na janela Criar novo, selecione Solicitação HTTP.

  3. Insira um Nome da solicitação para a solicitação, como Carregamento de Dados POST.

  4. Insira o seguinte URL para a API de Estados de Atualização de Recursos (substitua {Azure-Maps-Subscription-key} pela sua chave de assinatura do Azure Mapas e statesetId por statesetId):

    https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT26?api-version=2.0&subscription-key={Your-Azure-Maps-Subscription-key}
    
  5. Selecione a guia Cabeçalhos.

  6. No campo KEY, selecione Content-Type. No campo VALUE, selecione application/json.

    Header tab information for stateset creation.

  7. Selecione a guia Corpo.

  8. Nas listas suspensas, selecione raw e JSON.

  9. Copie o estilo JSON a seguir e cole-o na janela Corpo:

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

    Importante

    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 a mesma ID do recurso.

  10. Altere a URL usada na etapa 7 substituindo UNIT26 por UNIT27:

    https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT27?api-version=2.0&subscription-key={Your-Azure-Maps-Subscription-key}
    
  11. Copie o estilo JSON a seguir e cole-o na janela Corpo:

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

Visualizar estilos dinâmicos em um mapa

O aplicativo Web que você abriu anteriormente em um navegador agora deve refletir o estado atualizado dos recursos do mapa:

  • O Office UNIT27 (142) deve aparecer em verde.
  • O Office UNIT26 (143) deve aparecer em vermelho.

Free room in green and Busy room in red

Consulte a demonstração ao vivo

Próximas etapas

Saiba mais sobre isso lendo:

[O que é o Criador do Azure Mapas?]