[3D ГИС-визуализация] Реализация умного города на основе Vue+Cesium+Supermap (1)

GIS
[3D ГИС-визуализация] Реализация умного города на основе Vue+Cesium+Supermap (1)

moe — первопроходец. Как чистые новички в ГИС, если в этой статье есть концепции или имена собственные, связанные с ГИС, вы можете выдвинуть их в области комментариев, и они будут пересмотрены как можно скорее.

предисловие

Не так давно мне поручили исследовать и разработать технический маршрут 3D-визуализации и умного города.Первое, что пришло мне в голову, этоCesiumЭто библиотека с открытым исходным кодом мирового класса. Но в моем бизнесе может быть много функциональных реализаций, связанных с пространственным и географическим анализом, поэтому я нашел гиперграф. Hypergraph имеет пакет 3D-WebGL для 3D-продуктов на основе цезиевой упаковки и вторичной упаковки (адрес загрузки продукта прилагается в конце статьи). Все готово, давайте вкратце разберемся, в чем же заключается магия Цезия.

Cesium

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

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

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

  • Поддержка 2D, 2.5D, 3D отображения карты
  • Он может рисовать различные геометрические фигуры, выделять области, поддерживать импортированные изображения и даже 3D-модели и другие отображения визуализации данных.
  • Может использоваться для динамической визуализации данных и обеспечивает хорошую сенсорную поддержку, поддерживая большинство браузеров и мобильных устройств.
  • Cesium также поддерживает динамическое отображение данных на основе временной шкалы.

Как использовать цезий

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

Скопируйте папку Build в исходном коде Cesium в наш проект. Затем статически импортируйте соответствующие файлы в проект.

  <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">
  <script src="./Build/Cesium/Cesium.js"></script>

Запустите после выпуска, появится знакомый helloworld и земля.

полный код


<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjA2ZDQ2ZS02NTA4LTQ2NTItODE1My1kZjE3MjBkMjFkNzAiLCJpZCI6NDM5NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MDcyNzI4Nn0.L7P8pJponZfYjdsGnEw2hIHd2AN0h-SuYl6XvzOwLeA';
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

Строительство проекта

В качестве фреймворка для разработки выбираем Vue, поэтому больше о сборке Vue проекта вводить не буду.В наггетсах можно встретить всех, что доказывает, что каждый отличный фронтенд(прикоснуться к рыбе), если не xdm, то просто посмотрите на Baidu.

Представляем пакет WebGL

Поскольку этот пакет основан на вторичном развитии цезия, метод введения может быть таким же, как у цезия, нужно только изменить содержимое в упаковке.Build/Cesiumпапка к нашемуpublic/staticвниз вindex.htmlЕго можно импортировать статически.

widgets.css содержит визуальные элементы управления Ceisum.

<link rel="stylesheet" href="static/Cesium/Widgets/widgets.css">

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

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

Классический HelloWorld

Как и многие API-интерфейсы карт, Cesium также требует div в качестве единственного контейнера для 3D-сцены и генерирует соответствующий экземпляр Viewer при инициализации страницы.

подчеркивать! подчеркивать! подчеркивать!

Важные вещи говорятся трижды. Все о цезиевых переменных, пожалуйста! должен!Не сохранять в данных! Поскольку VUE захватывает данные в данных, объект рекурсивно подвергается захвату данных, таким образом, отображается изменение статуса. Атрибуты экземпляра Cesium чрезвычайно высоки, а иерархия крайне занижена, и он смонтирован на DATA. Не случайно, ваш браузер рухнет.

Если требуется связь, проще всего смонтировать ее на оконном объекте.

полный код

<template>
  <div class="container">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
var viewer, camera;
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      viewer = new Cesium.Viewer("cesiumContainer", {});
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

Запустив проект, мы можем увидеть эффект на следующем рисунке.helloworld.gif

наконец

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

приложение

Веб-сайт, связанный с цезием

URL-адреса, связанные с гиперкартой

серия статей

[3D ГИС-визуализация] Реализация умного города на основе Vue+Cesium+Supermap (2)

[3D ГИС визуализация] Реализация умного города на основе Vue+Cesium+Supermap (3)

[3D ГИС визуализация] Реализация умного города на основе Vue+Cesium+Supermap (4)

Категории