Веб картография с QGIS2Web

Предупреждение

This tutorial is now obsolete. A new and updated version is available at Web Mapping with QGIS2Web (QGIS3)

Веб-картография - отличная среда для публикации ваших данных ГИС на веб-сайте и обеспечения доступа к ним других пользователей. Создание веб-карты отличается от создания карты в ГИС. Пользователи ГИС, как правило, не являются веб-программистами, и это вызывает сложности, когда необходимо создать веб-карту такого же качества, что и создание карты в ГИС. К счастью, есть инструменты, которые легко переводят вашу работу в QGIS на веб-карты. В этом учебном пособии вы узнаете, как использовать плагин ** QGIS2Web ** для создания веб-карты с использованием OpenLayers или Larlet lubraries из вашего проекта QGIS.

Обзор задачи

Мы создадим OpenLayers веб-карту аэропортов мира.

Чему вы научитесь ещё

  • Как использовать Edit Widgets в QGIS, чтобы скрыть определенные поля и установить пользовательские типы.

  • Как создать виртуальное поле с помощью калькулятора полей.

  • Создание меток характеристик, которые отображаются только в определенном масштабе.

Получение данных

Мы будем использовать Airports набор данных из Natural Earth.

Скачайте Airports shapefile.

Для удобства, вы можете воспользоваться приведённой ниже ссылкой:

ne_10m_airports.zip

Источник данных [NATURALEARTH]

Порядок действий

  1. Откройте QGIS и перейдите :menuselection:“Слои –> Добавить векторный слой“. Перейдите к местоположению загруженного файла и выберите ne_10m_airports.zip. Click OK.

../_images/1209.png
  1. Теперь мы создадим карту в QGIS, которая будет выглядеть и вести себя так, как нам это необходимо на веб-карте. Плагин qgis2web будет использовать репликацию настроек QGIS и автоматически создаст веб-карту, не используя библиотеки веб-сопоставления. Мы хотим, чтобы при нажатии маркера аэропорта, появлялось информационное окно с полезной информацией об аэропорте. Эта информация уже присутствует в таблице атрибутов слоев ne_10m_airports. Щелкните правой кнопкой мыши на слое ne_10m_airports и выберите :guilabel: Свойства.

../_images/2177.png
  1. Переключитесь на вкладку Поля. Вы увидите различные атрибуты, присутствующие в слое. Некоторые из них не нужны пользователям нашей веб-карты, поэтому мы можем их скрыть. Мы будем хранить поля type, name, iata_code и wikipedia и скрывать остальные. Нажмите на кнопку Редактирование текста в колонке Изменить виджет для поля `scalerank`.

../_images/3106.png
  1. В диалоговом окне Редактировать свойства виджета выберите Скрытый в качестве типа. Нажмите: guilabel: OK.

../_images/471.png
  1. Аналогичным образом установите другим полям в скрытый тип. Как вы можете заметить, существуют другие доступные типы полей, которые позволяют нам определять, как поля будут отображаться пользователям нашей карты. Нажмите Редактировать виджет для поля wikipedia.

../_images/569.png
  1. В качестве типа поля выберите Web View. Этот тип указывает, что значение, содержащееся в этом поле, является URL-адресом.

../_images/666.png
  1. Мы также можем использовать столбец Псевдоним, чтобы указать альтернативное имя для полей без фактического изменения основной таблицы данных. Это полезно для более удобных имен полей для пользователей нашей карты. Добавьте псевдонимы в соответствии с вашим выбором и нажмите Ok.

../_images/765.png
  1. Вернитесь в главное окно QGIS, выберите инструмент guilabel :Определить и нажмите на любую точку. Панель Определить результаты будет отображать красиво оформленные атрибуты с новыми добавленными псевдонимами. Обратите внимание, что скрытые поля не отображаются в результатах.

../_images/863.png
  1. Этот метод прост, но есть одно ограничение. Нельзя изменить порядок полей. Для преодоления этого ограничения можно создать Виртуальное поле. В нашем случае, если необходимо, чтобы в конце информационного окна появлялось поле type, мы можем просто добавить новое виртуальное поле в конец и скрыть исходное поле type. Также можно использовать выражения, чтобы лучше форматировать значения типа. Щелкните правой кнопкой мыши слой ne_10m_airports и выберите Свойства. Перейдите на вкладку Поля и выберете Калькулятор полей.

../_images/962.png
  1. Поскольку имена полей должны быть уникальными, используйте Тип в качестве имени нового поля. Задайте для поля типа Текст (Строка) длиной не более 25 символов. Поле type содержит такие значения, как small, mid, large и т. д. Можно добавить выражение, чтобы изменить регистр слов и добавить слово airport для лучшей читаемости. Введите следующее выражение в поле Выражение и нажмите OK.

concat( title("type"), ' Airport')
../_images/1070.png
  1. Теперь, когда поле Тип выглядит лучше, можете установить Редактирование виджета для поля type Скрыто.

../_images/11108.png
  1. Используйте инструмент Определить для проверки того, что атрибуты отображаются так, как это необходимо.

../_images/1270.png
  1. Теперь создадим слой, который будет визуально привлекательным и информативным. Щелкните правой кнопкой мыши на слой ne_10m_airports и выберите :guilabel: Свойства. Переключитесь на вкладку Стиль. Выберите стиль Классифицированный и наше виртуальное поле Тип как Столбец. Щелкните Классифицировать.

../_images/1367.png
  1. Вы увидите, что кругами другого цвета обозначены аэропорты другого типа. Мы ограничим карту гражданскими аэропортами. Удерживайте клавишу Ctrl и выберите все категории для военных аэропортов. После выбора нажмите Удалить.

../_images/1464.png
  1. Помимо назначения категории другого цвета, мы можем изменить размер символа, чтобы визуально было проще различать типы аэропортов. Щелкните правой кнопкой мыши по категории и выберите Изменить размер.

../_images/1559.png
  1. Установите значение размер для 3 для категории Крупный аэропорт.

../_images/1656.png
  1. Аналогично, установите Размер 2 для Средний аэропорт и 1 для Небольшой аэропорт.

../_images/1752.png
  1. Для заполнения карты необходимо отметить каждый аэропорт. Переключитесь на вкладку Метки в диалоговом окне Свойства. Выберите Показать метки для этого слоя и выберите iata_code в качестве значения для :guilabel: Ярлык с. Также установим опцию Рендеринг, чтобы метки появлялись только тогда, когда карта достаточно увеличена. Проверьте Масштаб видимости в разделе Параметры метки. Введите 1 в качестве Минимальный масштаб и 10000000 в качестве максимального масштаба. Метки будут отображаться только после того, как пользователь увеличит масштаб более чем 1:10000000 и будет виден до масштаба 1:1.

../_images/1850.png
  1. As we are using circles to depict the airports, we need to ensure that the labels don’t overlap with the circles. Go to the Placement tab in the Labels dialog and set the Placement to Cartographic. Select From symbol bounds as Distance offset from. Click OK.

../_images/1942.png
  1. Our map is now ready. This is a good time to save our work. Go to Project ‣ Save. Enter Airports as the name of the project.

../_images/2037.png
  1. Now we are ready to export our project to a web map. Install the qgis2web plugin by going to Plugins ‣ Manage and Install Plugin (See Использование модулей расширения for more details on installing plugins in QGIS). Once the plugin is installed, go to Web ‣ qgis2web ‣ Create a web map.

../_images/2178.png
  1. In the Export to web map dialog, check Add layers list in the bottom panel under the Appearance section. Also select ne_10m_airports: iata_code as the field for Label search. Check the Show popups on hover to allow display of info-windows on hover. We can also set a basemap so the users have more context when looking at the airports layer. Select OSM B&W to use a black-and-white themed basemap create using OpenStreetMap data. You also have an option to choose from either OpenLayers or Leaflet as the web mapping library. We will restrict this tutorial to use the OpenLayers library. Click Update Preview` to see how your exported map will look like. Before we do the actual export, we need to set the Export folder. You can select a folder of your choice and click Export.

../_images/2236.png
  1. Once the export is complete, the default browser for your computer will open and show the interactive web map.

../_images/2332.png
  1. Your web map is now ready for publishing.

../_images/2431.png
  1. The qgis2web plugin has many limitations and it cannot do everything that the powerful web mapping libraries OpenLayers and Leaflet can do. This process can act as the starting point in your web mapping process and save you valuable time by creating a basic template from which you can further customize the web map. To highlight the fact that the output created from this process can be readily changed to suit your requirement - we will make a simple change to the web map to zoom to a particular airport when the user initially loads the map. On your computer, go to the folder where the web map was exported. Locate the resources folder and open qgis2web.js file in a text editor.

../_images/2529.png
  1. Locate the line where the map.getView().fit() function is called and add the following code after that. This new line of code instructs the web browser to center the map on the coordinates of Paris. Save the changes to the qgis2web.js file.

map.getView().setCenter(ol.proj.fromLonLat([2.35, 48.85]))
../_images/2626.png
  1. Refresh your browser and see that the web map will load with Paris at the center. This is a trivial example, but you can see how you can use any function available in the OpenLayers or Leaflet libraries to customize the web map.

../_images/2725.png
  1. The exported map resides on your computer. While you can see it in action, it is not very useful since you cannot share it anyone. For others to be able to see the map, you need to upload it to a web server. While the upload process will vary on the type of server you have access to - a cheap and easy way to publish your map on the web would be to use any of the public cloud storage services. Amazon S3 is a popular storage service. You will need to sign up for an account and follow the instructions to create a bucket. Once a bucket is created, you can upload the contents of your exported folder to the bucket and set it to public. Here I created a bucket named qgis-tutorials and uploaded the contents of my exported folder to a sub-folder named qgis2web. You can access the resulting map at http://s3.amazonaws.com/qgis-tutorials/qgis2web/index.html

../_images/2824.png
  1. Similarly, Google also offers a cloud storage service called Google Cloud Storage. Once you have created an account and enable billing, you can create a bucket and upload objects to the bucket. I create a bucket and sub-folder similar to Amazon and set the folder to public. The resulting map can be viewed at https://storage.googleapis.com/qgis-tutorials/qgis2web/index.html

../_images/2921.png

If you want to report any issues with this tutorial, please comment below. (requires GitHub account)