Отображение пользовательских данных на растровой картеRender custom data on a raster map

В этой статье объясняется, как использовать статическую службу изображенийс функциональной структурой изображения, чтобы разрешить наложенные слои поверх растровой гиперкарты.This article explains how to use the static image service, with image composition functionality, to allow overlays on top of a raster map. Композиция изображений включает возможность вернуть растровую плитку с дополнительными данными, такими как пользовательские защелки, метки и геометрические объекты.Image composition includes the ability to get a raster tile back, with additional data like custom pushpins, labels, and geometry overlays.

Для отрисовки пользовательских защелкаок, меток и наложения геометрических объектов можно использовать приложение POST.To render custom pushpins, labels, and geometry overlays, you can use the Postman application. Интерфейсы API служб Azure Maps данных можно использовать для хранения и визуализации наложений.You can use Azure Maps Data Service APIs to store and render overlays.

Совет

Часто гораздо более экономично использовать Azure Maps веб-пакет SDK, чтобы отобразить простую карту на веб-странице, чем использовать статическую службу изображений.It is often much more cost effective to use the Azure Maps Web SDK to show a simple map on a web page than to use the static image service. Веб-пакет SDK использует плитки карт и, если пользователь не променяет и не масштабирует карту, он часто создает только часть транзакции на каждую нагрузку на карту.The web SDK uses map tiles and unless the user pans and zooms the map, they will often generate only a fraction of a transaction per map load. Обратите внимание, что Azure Maps веб-пакет SDK имеет параметры для отключения панорамирования и масштабирования.Note that the Azure Maps web SDK has options for disabling panning and zooming. Кроме того, Azure Maps веб-пакет SDK предоставляет более широкий набор параметров визуализации данных, чем веб-служба, выполняющая статическую карту.Additionally, the Azure Maps web SDK provides a richer set of data visualization options than a static map web service does.

Предварительные требованияPrerequisites

создание учетной записи службы Azure MapsCreate an Azure Maps account

Чтобы выполнить процедуры, описанные в этой статье, сначала необходимо создать учетную запись Azure Maps и получить ключ учетной записи Maps.To complete the procedures in this article, you first need to create an Azure Maps account and get your maps account key. Следуйте инструкциям в разделе Создание учетной записи для создания подписки на учетную запись Azure Maps и выполните действия, описанные в разделе Получение первичного ключа , чтобы получить первичный ключ для вашей учетной записи.Follow instructions in Create an account to create an Azure Maps account subscription and follow the steps in get primary key to get the primary key for your account. Дополнительные сведения о проверке подлинности в Azure Maps см. в этой статье.For more information on authentication in Azure Maps, see manage authentication in Azure Maps.

Отрисовка канцелярских кнопок с метками и пользовательским изображениемRender pushpins with labels and a custom image

Примечание

Для процедуры, описанной в этом разделе, требуется учетная запись Azure Maps в ценовой категории S0 или S1.The procedure in this section requires an Azure Maps account in pricing tier S0 or S1.

Уровень учетной записи Azure Maps S0 поддерживает только один экземпляр pins параметра.The Azure Maps account S0 tier supports only a single instance of the pins parameter. Он позволяет визуализировать до пяти приэлементов, указанных в запросе URL-адреса, с пользовательским изображением.It allows you to render up to five pushpins, specified in the URL request, with a custom image.

Чтобы отобразить защелки с метками и пользовательским изображением, выполните следующие действия.To render pushpins with labels and a custom image, complete these steps:

  1. Создайте коллекцию для хранения запросов.Create a collection in which to store the requests. В приложении POST выберите создать.In the Postman app, select New. В окне Create New (Создание) выберите Collection (Коллекция).In the Create New window, select Collection. Присвойте имя коллекции и нажмите кнопку Создать.Name the collection and select the Create button.

  2. Чтобы создать запрос, нажмите кнопку Создать еще раз.To create the request, select New again. В окне Create New (Создание) выберите Request (Запрос).In the Create New window, select Request. Введите имя запроса для канцелярских кнопок.Enter a Request name for the pushpins. Выберите коллекцию, созданную на предыдущем шаге, в качестве расположения для сохранения запроса.Select the collection you created in the previous step, as the location to save the request. Затем нажмите кнопку Сохранить.Then, select Save.

    Создание запроса в POST

  3. Выберите метод получения HTTP на вкладке Построитель и введите следующий URL-адрес для создания запроса GET.Select the GET HTTP method on the builder tab and enter the following URL to create a GET request.

    https://atlas.microsoft.com/map/static/png?subscription-key={subscription-key}&api-version=1.0&layer=basic&style=main&zoom=12&center=-73.98,%2040.77&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27CentralPark%27-73.9657974+40.781971%7C%7Chttps%3A%2F%2Fraw.githubusercontent.com%2FAzure-Samples%2FAzureMapsCodeSamples%2Fmaster%2FAzureMapsCodeSamples%2FCommon%2Fimages%2Ficons%2Fylw-pushpin.png
    

    Вот итоговый образ:Here's the resulting image:

    Пользовательская кнопка с меткой

Получение данных из хранилища данных Azure MapsGet data from Azure Maps data storage

Примечание

Для процедуры, описанной в этом разделе, требуется учетная запись Azure Maps в ценовой категории S1.The procedure in this section requires an Azure Maps account in pricing tier S1.

Вы также можете получить сведения о пути и ПИН-коде с помощью API передачи данных.You can also obtain the path and pin location information by using the Data Upload API. Выполните следующие действия, чтобы отправить данные пути и кнопок.Follow the steps below to upload the path and pins data.

  1. В приложении POST откройте новую вкладку в коллекции, созданной в предыдущем разделе.In the Postman app, open a new tab in the collection you created in the previous section. Выберите метод POST HTTP на вкладке Построитель и введите следующий URL-адрес, чтобы выполнить запрос POST:Select the POST HTTP method on the builder tab and enter the following URL to make a POST request:

    https://atlas.microsoft.com/mapData/upload?subscription-key={subscription-key}&api-version=1.0&dataFormat=geojson
    
  2. На вкладке params (параметры ) введите следующие пары "ключ-значение", которые используются для URL-адреса запроса POST.On the Params tab, enter the following key/value pairs, which are used for the POST request URL. Замените subscription-key значение ключом подписки Azure Maps.Replace the subscription-key value with your Azure Maps subscription key.

    Параметры "ключ — значение" в POST

  3. На вкладке текст выберите формат необработанных входных данных и выберите JSON в качестве входного формата из раскрывающегося списка.On the Body tab, select the raw input format and choose JSON as the input format from the dropdown list. Укажите этот JSON в качестве данных для отправки:Provide this JSON as data to be uploaded:

    {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [
                  -73.98235,
                  40.76799
                ],
                [
                  -73.95785,
                  40.80044
                ],
                [
                  -73.94928,
                  40.7968
                ],
                [
                  -73.97317,
                  40.76437
                ],
                [
                  -73.98235,
                  40.76799
                ]
              ]
            ]
          }
        },
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [
                -73.97624731063843,
                40.76560773817073
              ],
              [
                -73.97914409637451,
                40.766826609362575
              ],
              [
                -73.98513078689575,
                40.7585866048861
              ]
            ]
          }
        }
      ]
    }
    
  4. Выберите Отправить и проверьте заголовок ответа.Select Send and review the response header. Если запрос выполнен успешно, заголовок Location будет содержать URI для проверки текущего состояния запроса на отправку.Upon a successful request, the Location header will contain the status URI to check the current status of the upload request. URI состояния будет иметь следующий формат.The status URI would be of the following format.

    https://atlas.microsoft.com/mapData/{uploadStatusId}/status?api-version=1.0
    
  5. Скопируйте URI состояния и добавьте к нему параметр Subscription-Key со значением ключа подписки учетной записи Azure Maps.Copy your status URI and append the subscription-key parameter to it with the value of your Azure Maps account subscription key. Используйте тот же ключ подписки учетной записи, который использовался для передачи данных.Use the same account subscription key that you used to upload the data. Формат URI состояния должен выглядеть следующим образом:The status URI format should look like the one below:

    https://atlas.microsoft.com/mapData/{uploadStatusId}/status?api-version=1.0&subscription-key={Subscription-key}
    
  6. Чтобы получить udId, откройте новую вкладку в приложении POST.To get the udId, open a new tab in the Postman app. На вкладке Построитель выберите метод получения HTTP. Выполните запрос GET по URI состояния.Select GET HTTP method on the builder tab. Make a GET request at the status URI. Если передача данных прошла успешно, вы получите udId в тексте ответа.If your data upload was successful, you'll receive a udId in the response body. Скопируйте udId.Copy the udId.

    {
       "udid" : "{udId}"
    }
    
  7. Используйте udId значение, полученное от API передачи данных, для отрисовки функций на карте.Use the udId value received from the Data Upload API to render features on the map. Для этого откройте новую вкладку в коллекции, созданной в предыдущем разделе.To do so, open a new tab in the collection you created in the preceding section. На вкладке Построитель выберите метод получения HTTP, замените {Subscription-Key} и {udId} вашими значениями и введите этот URL-адрес, чтобы выполнить запрос GET:Select the GET HTTP method on the builder tab, replace the {subscription-key} and {udId} with your values, and enter this URL to make a GET request:

    https://atlas.microsoft.com/map/static/png?subscription-key={subscription-key}&api-version=1.0&layer=basic&style=main&zoom=12&center=-73.96682739257812%2C40.78119135317995&pins=default|la-35+50|ls12|lc003C62|co9B2F15||'Times Square'-73.98516297340393 40.758781646381024|'Central Park'-73.96682739257812 40.78119135317995&path=lc0000FF|fc0000FF|lw3|la0.80|fa0.30||udid-{udId}
    

    Вот изображение ответа:Here's the response image:

    Получение данных из хранилища данных Azure Maps

Отображение многоугольника с цветом и непрозрачностьюRender a polygon with color and opacity

Примечание

Для процедуры, описанной в этом разделе, требуется учетная запись Azure Maps в ценовой категории S1.The procedure in this section requires an Azure Maps account in pricing tier S1.

Вы можете изменить внешний вид многоугольника с помощью модификаторов стиля с параметром пути.You can modify the appearance of a polygon by using style modifiers with the path parameter.

  1. В приложении POST откройте новую вкладку в созданной ранее коллекции.In the Postman app, open a new tab in the collection you created earlier. Выберите метод GET HTTP на вкладке Построитель и введите следующий URL-адрес, чтобы настроить запрос GET для отображения многоугольника с цветом и непрозрачностью:Select the GET HTTP method on the builder tab and enter the following URL to configure a GET request to render a polygon with color and opacity:

    https://atlas.microsoft.com/map/static/png?api-version=1.0&style=main&layer=basic&sku=S1&zoom=14&height=500&Width=500&center=-74.040701, 40.698666&path=lc0000FF|fc0000FF|lw3|la0.80|fa0.50||-74.03995513916016 40.70090237454063|-74.04082417488098 40.70028420372218|-74.04113531112671 40.70049568385827|-74.04298067092896 40.69899904076542|-74.04271245002747 40.69879568992435|-74.04367804527283 40.6980961582905|-74.04364585876465 40.698055487620714|-74.04368877410889 40.698022951066996|-74.04168248176573 40.696444909137|-74.03901100158691 40.69837271818651|-74.03824925422668 40.69837271818651|-74.03809905052185 40.69903971085914|-74.03771281242369 40.699340668780984|-74.03940796852112 40.70058515602143|-74.03948307037354 40.70052821920425|-74.03995513916016 40.70090237454063
    &subscription-key={subscription-key}
    

    Вот изображение ответа:Here's the response image:

    Прорисовка непрозрачного многоугольника

Отрисовка окружности и канцелярских кнопок с пользовательскими меткамиRender a circle and pushpins with custom labels

Примечание

Для процедуры, описанной в этом разделе, требуется учетная запись Azure Maps в ценовой категории S1.The procedure in this section requires an Azure Maps account in pricing tier S1.

Внешний вид ПИН-кодов можно изменить, добавив модификаторы стиля.You can modify the appearance of the pins by adding style modifiers. Например, чтобы сделать защелки и их метки крупными или меньшими, используйте sc Модификатор "масштабный стиль".For example, to make pushpins and their labels larger or smaller, use the sc "scale style" modifier. Этот модификатор принимает значение больше нуля.This modifier takes a value that's greater than zero. Значение 1 — это стандартный масштаб.A value of 1 is the standard scale. Значения, превышающие 1, будут увеличивать кнопки, а меньше 1 будут их уменьшать.Values larger than 1 will make the pins larger, and values smaller than 1 will make them smaller. Дополнительные сведения об модификаторах стилей см. в разделе параметры пути к службе статических изображений.For more information about style modifiers, see static image service path parameters.

Выполните следующие действия, чтобы отобразить круг и канцелярские кнопки с пользовательскими метками:Follow these steps to render a circle and pushpins with custom labels:

  1. В приложении POST откройте новую вкладку в созданной ранее коллекции.In the Postman app, open a new tab in the collection you created earlier. На вкладке Построитель выберите метод GET HTTP и введите этот URL-адрес, чтобы выполнить запрос GET:Select the GET HTTP method on the builder tab and enter this URL to make a GET request:

    https://atlas.microsoft.com/map/static/png?api-version=1.0&style=main&layer=basic&zoom=14&height=700&Width=700&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|al0.66|lc003C62|co002D62||'Microsoft Corporate Headquarters'-122.14131832122801  47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935  47.64452336193245&subscription-key={subscription-key}
    

    Вот изображение ответа:Here's the response image:

    Отрисовка круга с пользовательскими защелками

  2. Чтобы изменить цвет канцелярских кнопок с последнего шага, измените модификатор стиля "Co".To change the color of the pushpins from the last step, change the "co" style modifier. Взгляните pins=default|la15+50|al0.66|lc003C62|co002D62| , текущий цвет будет указан как #002D62 в CSS.Look at pins=default|la15+50|al0.66|lc003C62|co002D62|, the current color would be specified as #002D62 in CSS. Предположим, что вы хотите изменить его на #41d42a.Let's say you want to change it to #41d42a. Запишите новое значение цвета после описателя "Co" следующим образом: pins=default|la15+50|al0.66|lc003C62|co41D42A| .Write the new color value after the "co" specifier, like this: pins=default|la15+50|al0.66|lc003C62|co41D42A|. Создать запрос GET:Make a new GET request:

    https://atlas.microsoft.com/map/static/png?api-version=1.0&style=main&layer=basic&zoom=14&height=700&Width=700&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|al0.66|lc003C62|co41D42A||'Microsoft Corporate Headquarters'-122.14131832122801  47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935  47.64452336193245&subscription-key={subscription-key}
    

    Вот изображение ответа после изменения цветов ПИН-кодов:Here's the response image after changing the colors of the pins:

    Отрисовка окружности с помощью обновленных канцелярских кнопок

Аналогичным образом можно изменять, добавлять и удалять другие модификаторы стиля.Similarly, you can change, add, and remove other style modifiers.

Дальнейшие действияNext steps