Compartir a través de


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

Nota:

Retirada de Azure Maps Creator

El servicio de mapa de interiores de Azure Maps Creator ya está en desuso y se retirará el 30/9/25. Para más información, consulte anuncio de fin de ciclo de vida de Azure Maps Creator.

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.

Captura de pantalla del menú Abrir del editor de estilos visual.

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.

Captura de pantalla del cuadro de diálogo Abrir del editor de estilos visual.

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.

Captura de pantalla del cuadro de diálogo Abrir estilo del editor de estilos visual con la lista desplegable Seleccionar configuración del mapa resaltada.

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

Captura de pantalla del cuadro de diálogo Abrir estilo en el editor de estilos visual, con cada campo de edición numerado; cada número se correlaciona con los números de la tabla siguiente.

# 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.

Captura de pantalla del cuadro de diálogo emergente de capas de la unidad en el editor de estilos visual.

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

Captura de pantalla de la paleta de colores en el editor de estilos visual.

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.

Captura de pantalla de la lista desplegable de mapas base en la barra de herramientas del editor visual.

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.

Captura de pantalla del menú Guardar del editor de estilos visual.

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

Captura de pantalla del cuadro de diálogo Cargar estilo y configuración del mapa en el editor de estilos visual.

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.

Captura de pantalla del cuadro de diálogo de carga completa en el editor visual de estilos que muestra los valores para el id. de estilo, el id. de configuración del mapa y el alias de configuración del mapa.

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.

Captura de pantalla en la que se muestra el nombre de la categoría personalizada en el manifiesto.

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.

Captura de pantalla en la que se muestra la diferencia en las capas que aparecen después de cambiar el nombre de categoría en el manifiesto.

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.

Captura de pantalla del botón Duplicar en el panel de capas de la barra de herramientas del editor visual, junto con el identificador de capa en el que se muestra que el nombre de la nueva capa es igual que la capa original con un guion agregado al final.

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.

Captura de pantalla del menú emergente en la que se muestra la nueva capa que aparece cuando se selecciona la unidad del teléfono 11.

Pasos siguientes