Веб картография с 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.
Для удобства, вы можете воспользоваться приведённой ниже ссылкой:
Источник данных [NATURALEARTH]
Порядок действий¶
Откройте QGIS и перейдите :menuselection:“Слои –> Добавить векторный слой“. Перейдите к местоположению загруженного файла и выберите
ne_10m_airports.zip
. Click OK.
Теперь мы создадим карту в QGIS, которая будет выглядеть и вести себя так, как нам это необходимо на веб-карте. Плагин
qgis2web
будет использовать репликацию настроек QGIS и автоматически создаст веб-карту, не используя библиотеки веб-сопоставления. Мы хотим, чтобы при нажатии маркера аэропорта, появлялось информационное окно с полезной информацией об аэропорте. Эта информация уже присутствует в таблице атрибутов слоевne_10m_airports
. Щелкните правой кнопкой мыши на слоеne_10m_airports
и выберите :guilabel: Свойства.
Переключитесь на вкладку Поля. Вы увидите различные атрибуты, присутствующие в слое. Некоторые из них не нужны пользователям нашей веб-карты, поэтому мы можем их скрыть. Мы будем хранить поля
type
,name
,iata_code
иwikipedia
и скрывать остальные. Нажмите на кнопку Редактирование текста в колонке Изменить виджет для поля`scalerank`
.
В диалоговом окне Редактировать свойства виджета выберите Скрытый в качестве типа. Нажмите: guilabel: OK.
Аналогичным образом установите другим полям в скрытый тип. Как вы можете заметить, существуют другие доступные типы полей, которые позволяют нам определять, как поля будут отображаться пользователям нашей карты. Нажмите Редактировать виджет для поля
wikipedia
.
В качестве типа поля выберите
Web View
. Этот тип указывает, что значение, содержащееся в этом поле, является URL-адресом.
Мы также можем использовать столбец Псевдоним, чтобы указать альтернативное имя для полей без фактического изменения основной таблицы данных. Это полезно для более удобных имен полей для пользователей нашей карты. Добавьте псевдонимы в соответствии с вашим выбором и нажмите Ok.
Вернитесь в главное окно QGIS, выберите инструмент guilabel :Определить и нажмите на любую точку. Панель Определить результаты будет отображать красиво оформленные атрибуты с новыми добавленными псевдонимами. Обратите внимание, что скрытые поля не отображаются в результатах.
Этот метод прост, но есть одно ограничение. Нельзя изменить порядок полей. Для преодоления этого ограничения можно создать
Виртуальное поле
. В нашем случае, если необходимо, чтобы в конце информационного окна появлялось полеtype
, мы можем просто добавить новое виртуальное поле в конец и скрыть исходное полеtype
. Также можно использовать выражения, чтобы лучше форматировать значения типа. Щелкните правой кнопкой мыши слойne_10m_airports
и выберите Свойства. Перейдите на вкладку Поля и выберете Калькулятор полей.
Поскольку имена полей должны быть уникальными, используйте
Тип
в качестве имени нового поля. Задайте для поля типаТекст (Строка)
длиной не более25
символов. Полеtype
содержит такие значения, какsmall
,mid
,large
и т. д. Можно добавить выражение, чтобы изменить регистр слов и добавить слово airport для лучшей читаемости. Введите следующее выражение в поле Выражение и нажмите OK.
concat( title("type"), ' Airport')
Теперь, когда поле
Тип
выглядит лучше, можете установить Редактирование виджета для поляtype
Скрыто
.
Используйте инструмент Определить для проверки того, что атрибуты отображаются так, как это необходимо.
Теперь создадим слой, который будет визуально привлекательным и информативным. Щелкните правой кнопкой мыши на слой
ne_10m_airports
и выберите :guilabel: Свойства. Переключитесь на вкладку Стиль. Выберите стильКлассифицированный
и наше виртуальное полеТип
как Столбец. Щелкните Классифицировать.
Вы увидите, что кругами другого цвета обозначены аэропорты другого типа. Мы ограничим карту гражданскими аэропортами. Удерживайте клавишу Ctrl и выберите все категории для военных аэропортов. После выбора нажмите Удалить.
Помимо назначения категории другого цвета, мы можем изменить размер символа, чтобы визуально было проще различать типы аэропортов. Щелкните правой кнопкой мыши по категории и выберите Изменить размер.
Установите значение размер для
3
для категорииКрупный аэропорт
.
Аналогично, установите Размер
2
дляСредний аэропорт
и1
дляНебольшой аэропорт
.
Для заполнения карты необходимо отметить каждый аэропорт. Переключитесь на вкладку Метки в диалоговом окне Свойства. Выберите
Показать метки для этого слоя
и выберитеiata_code
в качестве значения для :guilabel: Ярлык с. Также установим опцию Рендеринг, чтобы метки появлялись только тогда, когда карта достаточно увеличена. Проверьте Масштаб видимости в разделе Параметры метки. Введите1
в качестве Минимальный масштаб и10000000
в качестве максимального масштаба. Метки будут отображаться только после того, как пользователь увеличит масштаб более чем1:10000000
и будет виден до масштаба1: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
. SelectFrom symbol bounds
as Distance offset from. Click OK.
Our map is now ready. This is a good time to save our work. Go to
. EnterAirports
as the name of the project.
Now we are ready to export our project to a web map. Install the
qgis2web
plugin by going to (See Использование модулей расширения for more details on installing plugins in QGIS). Once the plugin is installed, go to .
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. SelectOSM B&W
to use a black-and-white themed basemap create using OpenStreetMap data. You also have an option to choose from eitherOpenLayers
orLeaflet
as the web mapping library. We will restrict this tutorial to use theOpenLayers
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.
Once the export is complete, the default browser for your computer will open and show the interactive web map.
Your web map is now ready for publishing.
The
qgis2web
plugin has many limitations and it cannot do everything that the powerful web mapping librariesOpenLayers
andLeaflet
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 theresources
folder and openqgis2web.js
file in a text editor.
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 theqgis2web.js
file.
map.getView().setCenter(ol.proj.fromLonLat([2.35, 48.85]))
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
orLeaflet
libraries to customize the web map.
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 namedqgis2web
. You can access the resulting map at http://s3.amazonaws.com/qgis-tutorials/qgis2web/index.html
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
If you want to report any issues with this tutorial, please comment below. (requires GitHub account)