Creación de estilos personalizados para mapas de interiores (versión preliminar)

Al crear un mapa de interiores con Azure Maps Creator, se aplican los estilos predeterminados. En este artículo se describe cómo personalizar estos elementos de estilo.

Requisitos previos

Creación de estilos personalizados mediante el editor visual de Creator

Aunque es posible modificar los estilos de los mapas de interiores mediante la API de REST de Creator, Creator también ofrece un editor de estilo visual para crear estilos personalizados que no requieren programación. Este artículo se centra exclusivamente en la creación de estilos personalizados mediante este editor de estilos.

Estilo abierto

Cuando se crea un mapa de interiores en el servicio Azure Maps Creator, los estilos predeterminados se crean automáticamente. Para personalizar los elementos de estilo del mapa de interiores, abra ese estilo predeterminado.

Abra el editor de estilos y seleccione el botón Abrir de la barra de herramientas.

A screenshot of the open menu in the visual style editor.

Aparece el cuadro de diálogo Abrir estilo.

Escriba la clave de suscripción en el campo Escriba la clave de suscripción de Azure Maps.

A continuación, seleccione la geografía asociada a la clave de suscripción en la lista desplegable.

A screenshot of the open dialog box in the visual style editor.

Seleccione el botón Obtener lista de configuración del mapa para obtener una lista de todas las configuraciones de mapa asociadas al recurso de Creator activo.

A screenshot of the open style dialog box in the visual style editor with the Select map configuration drop-down list highlighted.

Nota:

Si la configuración del mapa se ha creado como parte de un estilo personalizado y tiene un alias proporcionado por el usuario, ese alias aparece en la lista desplegable de configuración del mapa; de lo contrario, solo aparece mapConfigurationId. El identificador de configuración de mapa predeterminado para cualquier conjunto de mosaicos determinado se puede encontrar usando la solicitud HTTP obtener conjunto de mosaicos y pasando el identificador del conjunto de mosaicos:

https://{geography}.atlas.microsoft.com/tilesets/{tilesetId}?2023-03-01-preview

Se devuelve mapConfigurationId en el cuerpo de la respuesta, por ejemplo:

"defaultMapConfigurationId": "68d74ad9-4f84-99ce-06bb-19f487e8e692"

Una vez seleccionada la configuración del mapa deseada, aparece la lista desplegable de estilos.

Una vez que haya seleccionado el estilo deseado, seleccione el botón Cargar estilo seleccionado.

Acerca del cuadro de diálogo Abrir estilo

A screenshot of the Open Style dialog box in the visual style editor, with each edit field numbered, each number correlates to the numbers in the following table.

# Descripción
1 La clave de suscripción de la cuenta de Azure Maps
2 Seleccione la geografía de la cuenta de Azure Maps.
3 Lista de alias e id. de configuración del mapa.
4 Lista de estilos asociados a la configuración del mapa seleccionada.

Modificar estilo

Una vez abierto el estilo en el editor visual, puede empezar a modificar los distintos elementos del mapa de interiores, como cambiar los colores de fondo de las salas de conferencias, las oficinas o los baños. También puede cambiar el tamaño de fuente de las etiquetas, como los números de oficina, y definir lo que aparece en distintos niveles de zoom.

Cambiar color de fondo

Para cambiar el color de fondo de todas las unidades de la capa especificada, coloque el puntero del mouse sobre la unidad deseada y selecciónela con el botón izquierdo del mouse. Aparece un menú emergente en el que se muestran las capas asociadas a las categorías con las que está asociada la unidad. Una vez que seleccione la capa en la que desea actualizar las propiedades de estilo, la capa está lista para actualizarse en el panel izquierdo.

A screenshot of the unit layer pop-up dialog box in the visual style editor.

Abra la paleta de colores y seleccione el color al que desea cambiar la unidad seleccionada.

A screenshot of the color pallet in the visual style editor.

Mapa base

La lista desplegable Mapa base de la barra de herramientas del editor visual presenta una lista de estilos de mapa base que afectan a los atributos de estilo del mapa base del que forma parte el mapa de interiores. Esto no afecta a los elementos de estilo del mapa de interiores. En cambio, le permite ver cómo se ve el mapa de interiores con los distintos mapas base.

A screenshot of the base maps drop-down list in the visual editor toolbar.

Guardar los estilos personalizados

Una vez realizados los cambios deseados en los estilos, guarde los cambios en el recurso de Creator. Puede sobrescribir el estilo con los cambios o crear un nuevo estilo.

Para guardar los cambios, seleccione el botón Guardar en la barra de herramientas.

A screenshot of the save menu in the visual style editor.

Esto abre el cuadro de diálogo Cargar configuración de estilo y mapa:

A screenshot of the upload style and map configuration dialog box in the visual style editor.

En la tabla siguiente se describen los cuatro campos que verá.

Propiedad Descripción
Descripción del estilo Descripción definida por el usuario para este estilo.
Descripción de la configuración del mapa Descripción definida por el usuario para esta configuración del mapa.
Alias de la configuración del mapa Alias usado para hacer referencia a esta configuración del mapa.
Al hacer referencia mediante programación, el identificador de la configuración del mapa hace referencia a la configuración del mapa si no se proporciona ningún alias.

Algunos aspectos importantes acerca de los alias:

  1. Se puede asignar un nombre mediante caracteres alfanuméricos (0-9, a-z, A-Z), guiones (-) y caracteres de subrayado (_).
  2. Se puede usar para hacer referencia a la configuración de mapa subyacente, en lugar del identificador de ese objeto. Esto es especialmente importante, ya que no se puede actualizar la configuración de mapa, lo que significa que cada vez que se guardan los cambios, se genera un nuevo identificador, pero el alias puede permanecer igual, lo que hace que hacerle referencia después de haberlo modificado varias veces sea menos propenso a errores.

Advertencia

No se permiten alias duplicados. Si se usa el alias de una configuración de mapa existente, se sobrescribirá la configuración de mapa a la que apunta el alias y se eliminará la configuración de mapa existente, con lo que las referencias a ese identificador producirán errores. Para obtener más información, vea Configuración del mapa en el artículo de conceptos.

Una vez que haya especificado valores en cada campo obligatorio, seleccione el botón Cargar configuración del mapa para guardar los datos de la configuración del estilo y el mapa en el recurso de Creator.

Una vez que haya cargado correctamente los estilos personalizados, verá el cuadro de diálogo Carga completa en el que se muestran los valores de id. de estilo, id. de configuración del mapa y el alias de configuración del mapa. Para obtener más información, consulte Estilo personalizado y Configuración de mapa.

A screenshot of the upload complete dialog box in the visual style editor showing values for the Style ID, Map configuration ID and the map configuration alias.

Sugerencia

Tome nota del valor de alias de la configuración del mapa, ya que será necesario al crear una instancia del Administrador de interiores de un objeto Map cuando desarrolle aplicaciones en Azure Maps. Además, tome nota del id. de estilo, se puede reutilizar para otros conjunto de mosaicos.

Categorías personalizadas

Azure Maps Creator ha definido una lista de categorías. Al crear el manifiesto, se asocia cada unidad de la instalación a una de estas categorías en el objeto unitProperties.

Puede que en algunas circunstancias quiera crear una categoría nueva. Por ejemplo, es posible que quiera aplicar atributos de estilo diferentes a todas las habitaciones con alojamientos especiales para personas con discapacidad, como una sala de teléfonos con teléfonos que muestren lo que dice el autor de la llamada para las personas con discapacidad auditiva.

Para ello, escriba el valor deseado en categoryName para el unitName deseado en el JSON del manifiesto antes de cargar el paquete de dibujo.

A screenshot showing the custom category name in the manifest.

El nombre de categoría no está asociado a ninguna capa cuando se ve en un editor visual y no tiene ningún estilo predeterminado. Para aplicarle estilos, cree una nueva capa y agregue en esta la nueva categoría.

A screenshot showing the difference in the layers that appear after changing the category name in the manifest.

Para crear una nueva capa, seleccione el botón Duplicar en una capa existente. Se creará una copia de la capa seleccionada, que podrá modificar según sea necesario. A continuación, cambie el nombre de la capa escribiendo un nuevo nombre en el campo Identificador. En este ejemplo, hemos escrito indoor_unit_room_accessible.

A screenshot the duplicate button in the layers pane in the visual editor toolbar, along with the layer ID showing the name of the new layer that is the same as the original layer with a dash copy added to the end.

Una vez que haya creado una nueva capa, debe asociarle el nuevo nombre de categoría. Para ello, edite la capa copiada para quitar las categorías existentes y agregar la nueva.

Por ejemplo, el JSON podría ser similar a esto:

{
  "id": "indoor_unit_room_accessible",
  "type": "fill",
  "filter": [
    "all",
    ["has", "floor0"],
    [
      "any",
      [
        "case",
        [
          "==",
          [
            "typeof",
            ["get", "categoryName"]
          ],
          "string"
        ],
        [
          "==",
          ["get", "categoryName"],
          "room.accessible.phone"
        ],
        false
      ]
    ]
  ],
  "layout": {"visibility": "visible"},
  "metadata": {
    "microsoft.maps:layerGroup": "unit"
  },
  "minzoom": 16,
  "paint": {
    "fill-antialias": true,
    "fill-color": [
      "string",
      ["feature-state", "color"],
      "rgba(230, 230, 230, 1)"
    ],
    "fill-opacity": 1,
    "fill-outline-color": "rgba(120, 120, 120, 1)"
  },
  "source-layer": "Indoor unit",
  "source": "{tilesetId}"
}

En el mapa solo se muestran las características que coinciden con el filtro. Debe editar el filtro para quitar las categorías que no quiere que aparezcan en el mapa y agregar la nueva categoría.

Por ejemplo, el JSON de filtro podría ser similar a esto:

[
  "all",
  ["has", "floor0"],
  [
    "any",
    [
      "case",
      [
        "==",
        [
          "typeof",
          ["get", "categoryName"]
        ],
        "string"
      ],
      [
        "==",
        ["get", "categoryName"],
        "room.accessible.phone"
      ],
      false
    ]
  ]
]

Ahora, al seleccionar esa unidad en el mapa, el menú emergente tiene el nuevo identificador de capa. Si ha seguido este ejemplo, este es indoor_unit_room_accessible. Una vez seleccionado, puede realizar modificaciones de estilo.

A screenshot of the pop-up menu showing the new layer appearing when the phone 11 unit is selected.

Pasos siguientes