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

предисловие

Безмозглый контакт с прошлого годаCesiumВизуализация 3D ГИС, после входа в яму до сих пор, на самом деле, я написал много проектов, и столкнулся со многими подводными камнями в середине.Я хотел поделиться тем, что получил давно, но чувствую, что это не очень профессионально и у меня мало времени.перетащили в настоящее,с начала на контактCesium, добавил группу обмена QQ, от 200 человек в начале до 3000 человек сейчас, похоже, что все больше и больше людей используют Cesium для визуализации, и многие из них, как и я, на полпути в яму с фронтенда

Помнится, в паблике "Cesium Chinese Network" когда-то была опубликована статья под названием "В Cesium осталась только визуализация?" Я лично считаю, что писать здорово, хотя Cesium сделать визуализацию более чем просто, но большинство людей предпочитают вкладываться в ней людей спешат визуализировать это направление, чего достаточно, чтобы доказать, что от 300 до 3000

Личные привычки письма очень длинные, и статья всегда очень медленная, и причина, по которой он все еще хочет написать эту серию статей, примерно в трех пунктах.

• В конце концов, цезий мирового класса.JavaScriptПродукты с открытым исходным кодом, CS — это хорошо, но для работы с BS, особенно для продуктов визуализации, требуется прочная передняя часть. хорошо использовать их богатую ГИС.Знания или какие-то очень мощные функции классно отображаются на фронтенде.В конце концов, какими бы мощными ни были функции, ими нельзя любоваться без резьбы и украшения.
• За последние два года было слишком много первокурсников, которые вошли в Cesium на полпути, но из-за отсутствия прочной основы ГИС нелегко добиться эффекта более глубокого ядра ГИС. кстати.это мой личный опыт и очень болезненный
• Что касается цезия, я изучал себя, и я написал много проектов, но должно быть много мест, которые кажутся шуткой в ​​​​глазах более профессиональных людей, поэтому статья Shuishui, чтобы увидеть, какие знания - это бомба в моем мозгу. , просмотрите расчистку мин, проверьте на наличие утечек и заполните щели

На самом деле у меня лично опыта в CS нет вообще.У BS есть какой-то проектный опыт в визуализации,но если честно то я только мех понимаю.ГИСом глубоко увлекаться не буду,но в целом приемлемо.Возьмем всех к началу, и надеюсь, что со всеми смогу проверить и восполнить пробелы.Как говорится, в горах нет тигров, а обезьяна царь, да, я та самая обезьяна, которая делает цезиевые родственные технических постов так мало?

Текущая идея написанного поста заключается в том, что в дополнение к началу работы он будет более склонен к созданию всевозможных забавных и крутых эффектов, поэтому он также будет более склонен к реальной боевой серии.Вы также можете использовать его в качестве учебника начального уровня. Я стараюсь делать каждую статью из этой серии. Будьте краткими и не превышайте 5000 слов, чтобы всем было удобно ее просматривать 😄

PS:

• CSСсылаться наClient/Server, режим клиент/сервер, настольное приложение, быстрый отклик, надежная защита, широкие возможности персонализации, быстрый отклик данных, плохая совместимость, отсутствие кроссплатформенности, высокая стоимость разработки

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

не принимайте близко к сердцу

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

• онлайн предварительный просмотрЕсли у вас слабый компьютер, посмотрите GIF.

• Превью GIFСжатие более мощное, а предварительный просмотр видео высокой четкости можно просмотреть в общедоступной учетной записи «Irregular Front End».

Тогда я не буду много говорить, давайте сейчас познакомимся с цезием

О цезии

Что такое цезий

Cesium — 3D-глобус и карта мирового класса.JavaScriptпродукт с открытым исходным кодом, который обеспечиваетJavaScriptКомплект языковой разработки удобен для пользователей, чтобы быстро создать веб-приложение виртуальной земли без подключаемых модулей, и гарантирует высокое качество производительности, точности, качества рендеринга, многоплатформенности и простоты использования.

Цезий на основеApache2.0Лицензионная программа с открытым исходным кодом, ее можно использовать бесплатно для коммерческого и некоммерческого использования, она является аффилированной компанией AGI (Analytical Graphics Incorporation), трое основателей работали инженерами в Главном аэрокосмическом департаменте, предоставляя STK (System/Satellite Toolkit). Kit)) и Cesium, лидер в области программного обеспечения для аэрокосмического анализа, и STK, флагманский продукт компании, такой как马航MH370В процессе поиска и спасения используется программное обеспечение STK.После многих лет накопления пространственно-временных данных AGI постепенно освоила большое количество технологий 3D-визуализации, а также почувствовала большой спрос на массивные 3D-данные во всех сферах жизни, поэтому создала CesiumJS. проект с открытым исходным кодом в 2011 году. , создал набор решений корпоративного уровня, которые являются безопасными, надежными, легко расширяемыми и независимыми от платформы вокруг экосистемы Cesium.

И Chrome также запустил первую версию, поддерживающую WebGL в феврале 2011. На данный момент Цезий является первым человеком, который осмеливается есть крабов.Цезий первоначально означал химический элемент цезий, который является ключевым элементом в производстве атомных часов. Название подчеркивает направленность продукта Cesium на приложения визуализации в реальном времени на основе пространственно-временных данных.

На сегодняшний день CesiumJS имеет более1,000,000, это мощное приложение, которое предоставляет миллионам пользователей

Я, как фронтенд-программист, занимаюсь только визуализацией.На самом деле, на мой взгляд, Цезий иLeafletтак же какOpenLayerПринципиальной разницы нет, но Cesium поддерживает 3D сцены и т.п., что красивее

Что может цезий

Поддержка глобальных уровней высокоточной местности и видеосервисов

служба поддержки2D、2.5D、3DОтображение карты формы, настоящая интеграция 2D и 3D

Опорный вектор, массивные данные модели (наклон, BIM, облако точек и т. д.)

Поддерживает динамическую визуализацию данных на основе временной шкалы

Совместимость браузера с Cesium

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

Большинство платформ и браузеров поддерживаютWebGL1.0стандартный, то естьOpenGL ES2.0Спецификация, начало 2017 г.,ChromeНовая версия низкопрофильной поддержкиWebGL2.0, с улучшением производительности графических процессоров различных производителей оборудования иWebGL2.0нормативная зрелость,WebGLТехнологии будут иметь больший потенциал для улучшения, но будь то ПК или мобильные устройства,ChromeобеWebGLЛучшая платформа для разработки и применения, поэтому, если нет особых жестких требований, рекомендуется использоватьChromeИзучайте и развивайте цезий

Вы можете получить к нему доступ в своем браузереWebGL Reportчтобы проверить поддержку вашего браузера

Как показано в красной рамке выше, этот браузер поддерживаетWebGL 1, вы также можете нажатьWebGL 2Проверьте поддержку своего браузера

В дополнение к показу, поддерживает ли ваш браузерWebGLстандарты и многое другое, например

• Поддерживать ли текстуру глубины
• Максимальное количество атрибутов для вершинных шейдеров
• Поддерживать ли расширение ANGLE
• так далее

программа HelloWorld

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

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

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

Итак, давайте сначала сделаем землю, а потом вкрапляем какой-нибудь здравый смысл там, где есть необходимость.

выбор компилятора

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

Скачать пакет Цезий

Во-первых, нам нужно скачать пакет Cesium, который можно скачать с официального сайта.Cesium будет обновлять версию каждый месяц и повторять все время.Этого достаточно, чтобы доказать свою активность и будущее.Адрес следующий 👇

• Cesium Download

После загрузки и распаковки вы обнаружите множество файлов, как показано ниже.

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

нам просто нужноBuildпод папкойCesiumЭта папка, это официальная версия скомпилированного пакета Cesium, это все что нужно для разработки

инициализировать землю

Во-первых, мы находим место для создания нового каталога, где имя каталогаdemo, мы перетащили в него упомянутую выше папку Cesium

Далее создаем новый в директории demoindex.htmlфайл, инициализировать глобус, всего четыре шага

No.1представлятьcesium.js, который определяет объект Cesium, который содержит все, что нам нужно

<script src="./Cesium/Cesium.js"></script>

No.2представлятьwidgets.css, чтобы иметь возможность использовать различные визуальные элементы управления Cesium

@import url(./Cesium/Widgets/widgets.css)

No.3существуетHTMLизbodyВ мы создаемdiv, используемый в качестве контейнера для трехмерной земли

<div id="cesiumContainer"></div>

No.4Инициализация в JS.CesiumViewerпример

let viewer = new Cesium.Viewer('cesiumContainer')

Полный код выглядит следующим образом

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./Cesium/Cesium.js"></script>
    <style>
      @import url(./Cesium/Widgets/widgets.css);
      html,body,#cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      window.onload = function () {
        let viewer = new Cesium.Viewer("cesiumContainer")
      }
    </script>
  </body>
</html>

Рабочая среда

Обычно пишем страницу и браузер открываетсяhtmlФайла достаточно.При написании программы Cesium не делайте двойной щелчок в браузере, чтобы запустить ее локально, потому что в реальной работе она должна работать на веб-сервере.

Здесь мы используем Node для сборки этого сервиса. Прежде всего, вам нужно установить Node на компьютер. Я не буду вдаваться в подробности об этом. Если вы не знаете, как установить его самостоятельно, вы можете установить его на твой собственный.

Официальный веб-сайт, включая общие учебные пособия, в настоящее время будет использовать рукописный код.expressилиKoaСоздать веб-сервис просто, но это не обязательно. Здесь мы просто пишем демо, нет необходимости писать back-end код или что-то еще. Это слишком хлопотно, давайте установимlive-serverпросто хорошо

live-serverЭто небольшой сервер с функцией загрузки в реальном времени.Проще говоря, вы устанавливаете его и запускаете команду прямо в командной строке текущего каталога.Сервис запустится.

Установитьlive-serverКоманда выглядит следующим образом

npm install -g live-server

Опять же, это всего лишь небольшая демонстрация, а в целом идет нормальная разработка проекта.Vue+CesiumЯ думаю, что это лучшая практика, и использование Vue для разработкиVue-CLIЭто локальный сервис, если мы хотим развиваться изначальноlive-serverВот и все, хотя написать веб-сервис не сложно, это все-таки пустая трата времени

Когда наш Node установлен, он также устанавливаетсяlive-serverПосле, мы в терминалеcdПерейдите в корневой каталог проекта и выполните следующую команду

live-server

Запуск по умолчанию — порт 8080, как показано ниже.

Далее введите прямо в браузереhttp://127.0.0.1:8080, ваша первая цезиевая программа 👌

Как показано выше, на странице появится 3D-глобус, очень простой, вызывает ли у вас желание начать?

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

наконец

Несколько веб-сайтов, которые вы должны знать, когда вы новичок в Cesium

• Официальный урок цезияОфициальное руководство от Cesium на английском языке можно перевести и посмотреть

• Официальная документация Cesium API на английском языкеВ Cesium слишком много API, но если вы не знаете API, можете проверить, но оно тоже на английском.

• Документация Cesium API на китайском языкеДокументация по API, переведенная китайским сайтом Cesium, неполная, но на начальном этапе ее определенно достаточно.

• Пример песочницы Cesium SandcastleНекоторые официальные образцы программ Cesium, вы можете просмотреть больше, если вам нечего делать

• Цезий китайскийКитайский веб-сайт Cesium, есть серия руководств, некоторые из которых бесплатны, вы можете получить много знаний

Если вы новичок в Cesium, вам все равно следует щелкнуть по этим веб-сайтам, просто просмотрите их вкратце, и вы будете использовать их позже.

Статья размещена на GitHub, смотрите еще интересныеisboyjc/blog/issues

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