Упростите трехмерную визуализацию ГИС — интегрируйте цезий в проект Vue

визуализация данных GIS
Упростите трехмерную визуализацию ГИС — интегрируйте цезий в проект Vue

предисловие

Среди интерфейсных фреймворков на рынке лучшим партнером является Vue+Cesium.Как правило, компании, которые производят продукты Cesium B-side, будут использовать Vue, поэтому последующий контент будет основан на Vue.

Обычно, когда мы хотим использовать Cesium во Vue, нам сначала нужно установить Cesium, а затем нужно настроить много чего в вебпаке vue-cli, что просто хлопотно для некоторых опытных людей, но для новичков в Cesium Это будет очень больно, так как я им раньше не пользовался, и не знаю как его настроить, остается только искать в сети туториалы и шаг за шагом шагать по яме.

На самом деле, опытный вы или новичок, очень хлопотно повторно настраивать эти вещи каждый раз, когда вы пишете проект.

vue-cli-plugin-cesiumпросто решить эту проблему

представлять

vue-cli-plugin-cesiumЭто плагин расширения VueCLI для Cesium, использование которого позволит нам использовать Cesium с нулевой конфигурацией в VueCLI на основе VueCLI3.0+.

На самом деле, когда я начал работать над Cesium, я чувствовал, что каждый раз настраивать его слишком хлопотно, поэтому я написал плагин, чтобы сэкономить время разработки без настройки, а позже разослал его нескольким группам разработчиков Cesium, чтобы все могли испытать , и эффект был не плохой.

Он будет расширен на основе Cesium в созданном нами проекте VueCLI.До сих пор его функции также можно сказать, что задачи, которые он решает, следующие

  • Автоматически установить Cesium и добавить кpackage.jsonЗависимости (дополнительная версия)

  • Автоматически расширять конфигурацию веб-пакета, связанную с цезием, в VueCLI.

    • добавить одинcesiumПсевдонимы, чтобы мы могли легко вводить файловые ресурсы Cesium в проект
    • Сделать экземпляры объекта Cesium доступными в каждом модуле Vue без импорта
    • Заставить webpack работать с Cesium
    • Разрешить WebPack использовать Require в Cesium, устранить предупреждение о введении Require.
    • Окружающая среда разработки генерирует SourceMap, а производственная среда отменяет SourceMap
    • Рабочая среда извлекает общие модули для выполнения сжатия.
    • Загрузчик производства переходит в оптимизированный режим

  • Автоматически импортируется в глобальный main.jsWidgets.css, необязательный

  • автоматически вcomponents/Сгенерируйте образцы файлов в папке, необязательно

Установить

vue-cli-plugin-cesiumЭто плагин расширения, основанный на VueCLI, поэтому перед его использованием создайте проект Vue с VueCLI.

Если вы не знаете, как использовать VueCLI, переместитеVueCLI-Официальный сайт

Текущий плагин поддерживает толькоVueCLI3.0+версия

После создания проекта Vue вы можете использовать плагин в соответствии со следующими шагами. Как и все плагины VueCLI, его можно использовать двумя способами. Рекомендуемый способ — один.

способ использования

Рекомендуемое использованиеvue addЭтот способ установки в один шаг прост и удобен

vue add vue-cli-plugin-cesium

// 非全局安装的vue-cli可以
npx vue add vue-cli-plugin-cesium

Используйте метод два

Установить первымvue-cli-plugin-cesiumПлагины, рекомендуется устанавливать с пряжей, потому что это более лаконично

// npm
npm install --save-dev vue-cli-plugin-cesium

// yarn
yarn add vue-cli-plugin-cesium

После завершения установки мы будем использоватьvue invokeдля инициализации плагина

vue invoke vue-cli-plugin-cesium

// 非全局安装的vue-cli可以
npx vue invoke vue-cli-plugin-cesium

Процесс установки

существуетvue invokeилиvue addВ процессе будет три вопроса

спроси один

Please choose a version of 'cesium' from this list
请在列表中选择 cesium 的版本

Выберите тот, который вы хотите использовать здесьCesiumВерсия

Запрос два

Whether to import styles globally. 
This operation will automatically import widgets.css in main.js
是否全局引入样式,该操作将自动在main.js引入widgets.css？

Эта опция по умолчанию да, эта операция автоматически импортирует widgets.css в main.js, то есть стиль css Cesium вводится глобально

Если этот пункт установлен в нет, то мы должны вручную ввести его во время разработкиwidgets.cssФайл стиля, команда импорта выглядит следующим образом

import "cesium/Widgets/widgets.css"

Спроси три

Whether to add sample components to the project components directory
是否添加示例组件到项目components目录?

По умолчанию для этого параметра установлено значение «да», что автоматическиsrc/componentsсоздается в папкеCesiumExampleПапка, эта папка содержит несколько примеров использования цезия для справки.

Если для этого параметра установлено значение «нет», файлы образцов создаваться не будут.

Каждый файл в сгенерированном примере представляет собой модуль, который можно напрямую импортировать в проект для просмотра.

Установка графического интерфейса

если мы используемvue uiСоздайте проект или вы можете выполнить поиск непосредственно в параметрах плагина после создания проекта.vue-cli-plugin-cesiumи установить

Следующим образом:

Выберите плагин и нажмите «Установить».

использовать

При разработке использовать объект Cesium непосредственно в модуле следующим образом

Просмотрите пример компонента, модуль можно импортировать следующим образом.

Общая проблема

При успешной установке плагина и начале разработки при использовании объектов Cesium может возникнуть следующая ошибка

Error：Cesium is no-undef

Друзья, работающие с фронтендом, должны знать, что это похоже на синтаксическую ошибку Eslint, да, это потому, что внутри плагина используется встроенный модуль Webpack.ProvidePluginсделать ненужным использование цезиевых объектовimportилиrequireВведено, и обычно, когда мы используем VueCLI для создания проекта, мы используем Eslint по умолчанию.Проверка грамматики Eslint будет думать, что Cesium является необъявленной переменной, поэтому выдается ошибка

Решение первое

package.jsonНастройте правила Eslint в разрешенииno-undef, как показано ниже, вpackage.jsonсерединаeslintConfigпод полемrulesнастроить"no-undef": 0, настройте так, чтобы необъявленные переменные разрешались отдельно, не выключая Eslint

{
  "dependencies": {},
  "devDependencies": {},
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-undef": 0
    }
  }
}

Решение второе

Мы можем сделать это с помощьюpackage.jsonудалить напрямуюeslintConfigвозражать против прямого выключения Eslint

Также вvue.config.jsОтключаем Eslint в настройках следующим образом

module.exports = {
  lintOnSave: false
}

После модификации вы можете перезапустить сервис.Рекомендуется использовать первый способ.Проверка грамматики Eslint – отличный инструмент для разработки ограничений, который может сделать грамматический стиль одной и той же команды унифицированным.Лучше не отключать его.

конец

После завершения установки вы можете использовать Cesium в любом модуле проекта vue. Вы можете напрямую использовать экземпляр объекта Cesium в каждом модуле Vue, не импортируя его. Если вы хотите импортировать файлы в пакете cesium, мы будем использовать Пакет Cesium для пакета Cesium Каталог задается псевдонимом, который называетсяcesium, поэтому при введенииWidgets.cssКогда путь импортаcesium/Widgets/widgets.css, если это поможет вам, я буду рад

В настоящее время должно быть очень мало людей, использующих VueCLI2.0, конечно, если вы используете скаффолдинг> VueCLI3.0, то вы не сможете использовать этот плагин, но не волнуйтесь, конфигурация VueCLI2.0 тоже доступна, но вам нужно настроить ее вручную, вы можете посмотреть подробности 👉VueCLI2.0 интегрирует Цезий

Мы будем постепенно улучшать этот плагин на более позднем этапе и продолжать итерации Мы приветствуем всех, кто вносит предложения и приветствует PR.

Адрес плагина 👉isboyjc/vue-cli-plugin-cesium

Статья размещена на GitHub, больше интересного смотрите 👉isboyjc/blog/issues

Это интерфейс, а не только интерфейс, так что это не серьезно, серьезно делитесь галантерейными товарами, общедоступный номер «Нерегулярный интерфейс», добро пожаловать на внимание

Категории