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

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

В предыдущей статье мы реализовали самую простую конструкцию проекта и создали трехмерную землю, В этой статье мы в основном вводим основные элементы карты, знакомим вас с соответствующей системой координат карты и как объединить эти элементы, присутствующие на нашей земле. Точно так же, если в статье есть какая-либо ошибка, укажите ее в области комментариев и обязательно попросите совета и вовремя исправьте ее!

предисловие

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

элемент карты

элементы

Давайте сначала посмотрим, какие элементы, вероятно, есть на карте Baidu (здесь я использую запрос маршрута в качестве примера)

image.png

Прежде всего самое главное и самое основное в карте это базовая карта.Базовая карта отвечает за отображение основной информации географии во вьюпорте.Без базовой карты бесполезно нагромождать множество элементов. Далее идут начальная и конечная точки маршрута, соответствующиеточечный элемент, маршрут между двумя точками соответствуетЛинейный объект LineString. Наконец, в правом нижнем углу есть данные о поверхности (это не к месту, потому что это было нарисовано мной хахаха), что соответствует данным на картеПолигон. В нашем проекте основной информационный дисплей состоит из трех типов элементов: точка, линия и поверхность.

Система координат

Пока дело доходит до разработки карт, от понятия системы координат все равно никуда не деться, кто сделал землю шаром🌏 (было бы неплохо, если бы я сказал Оуэну, что земля квадратная).

Воображаемая Земля против реальной Земли

想象中的地球vs实际的地球

Общая система координат

Системы координат и методы преобразования, обычно используемые в Китае, здесь не перечислены.Вы можете самостоятельно использовать Baidu. О проекционной системе координат и географической системе координат вы можете прочитать эти две статьи, чтобы узнать. В основном мы вводим общие системы координат в цезии и соответствующие методы преобразования.

Географическая система координат

Проекционная система координат

Системы координат в цезии

В Cesium обычно используются два вида координат: координаты WGS84 и декартовы пространственные координаты. Мы обычно используем координаты WGS84, чтобы указать место с широтой и долготой. Декартовы координаты пространства часто используются для преобразования некоторых пространственных положений, таких как перемещение, масштабирование , и т.д. . Отношения между ними следующие:

124613_sr4k_1585572.png

Система координат WGS84 включает в себя систему координат широты и долготы WGS84 и радианную систему координат WGS84 (Cartographic).

Декартова пространственная система координат включает декартову пространственную декартову систему координат (Cartesian3), плоская система координат (Cartesian2) и четырехмерной декартовой системе координат (Cartesian4).

Система координат WGS84

Всемирная геодезическая система 1984 — система координат, созданная для использования в глобальной системе позиционирования GPS.Началом координат является центр масс Земли, а ось Z геоцентрической пространственной прямоугольной системы координат указывает на соглашение, определенное BIH ( International Time Service Agency) 1984.O.(CTP), ось X указывает на пересечение плоскости нулевого меридиана BIH 1984.0 и экватора CTP, а ось Y перпендикулярна оси Z, а ось X образует правосторонняя система координат. Широта и долгота, отображаемые компасом на нашем мобильном телефоне, являются текущими координатами в этой системе координат, диапазон прогресса — [-180, 180], а диапазон широты — [-90, 90].

В настоящее время Cesium поддерживает две системы координат, WGS84 и WebMercator, но в Cesium нет реального объекта для описания координат WGS84.Все они используются в радианах, то есть класс Cartographic:

новый Цезий.Картографический(долгота, широта, высота), параметры здесь также называются долготой и широтой, которые являются долготой и широтой.Метод расчета: радиан = π/180 × широта и угол долготы.

image.png

Декартово пространство Декартова система координат (Cartesian3)

Началом декартовых пространственных координат является центр эллипсоида. Когда мы рисуем на компьютере, неудобно использовать широту и долготу для прямого рисования. Как правило, система координат преобразуется в декартову систему координат, а знания в компьютерной графике используются для рисования. Здесь Cartesian3 чем-то похож на объект Point3D в трехмерной системе, новый Cesium.Cartesian3(x, y, z), который имеет три компонента x, y и z.

image.png

плоская система координат (Cartesian2)

Плоская система координат также является плоской прямоугольной системой координат, которая является двумерной декартовой системой координат.По сравнению с декартовой3, на одну компоненту z меньше, new Cesium.Cartesian2(x, y). Cartesian2 часто используется для описания системы координат экрана.Например, положение щелчка мыши на экране компьютера возвращается как Cartesian2, который возвращает xy компонент точки пикселя положения щелчка мыши.

image.png

Преобразование системы координат

преобразование широты и долготы в радианы
var radians=Cesium.Math.toRadians（degrees）;//经纬度转弧度
var degrees=Cesium.Math.toDegrees（radians）;//弧度转经纬度
Координаты широты и долготы WGS84 и радианная система координат WGS84 (Cartographic) преобразование
//方法一：
var longitude = Cesium.Math.toRadians(longitude1); //其中 longitude1为角度
var latitude= Cesium.Math.toRadians(latitude1); //其中 latitude1为角度
var cartographic = new Cesium.Cartographic(longitude, latitude, height)；

//方法二：
var cartographic= Cesium.Cartographic.fromDegrees(longitude, latitude, height);//其中，longitude和latitude为角度

//方法三：
var cartographic= Cesium.Cartographic.fromRadians(longitude, latitude, height);//其中，longitude和latitude为弧度
Система координат WGS84 и декартово пространство Декартова система координат (Cartesian3) преобразование
var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height)；//其中，高度默认值为0，可以不用填写；longitude和latitude为角度

var positions = Cesium.Cartesian3.fromDegreesArray(coordinates);//其中，coordinates格式为不带高度的数组。例如：[-115.0, 37.0, -107.0, 33.0]

var positions = Cesium.Cartesian3.fromDegreesArrayHeights(coordinates);//coordinates格式为带有高度的数组。例如：[-115.0, 37.0, 100000.0, -107.0, 33.0, 150000.0]

//同理，通过弧度转换，用法相同，具体有Cesium.Cartesian3.fromRadians，Cesium.Cartesian3.fromRadiansArray，Cesium.Cartesian3.fromRadiansArrayHeights等方法
Преобразование декартовой пространственной прямоугольной системы координат WGS84
var cartographic= Cesium.Cartographic.fromCartesian(cartesian3)；
плоская система координат (Cartesian2) и декартовой пространственной декартовой системе координат (Cartesian3) преобразование

Плоская система координат в декартовой системе декартовой системы координат

Обратите внимание, что текущая точка (Cartesian2) должна находиться на 3D-сфере, иначе возвращается undefined; все координаты, полученные с помощью обратного вызова ScreenSpaceEventHandler, являются Cartesian2.

Координаты экрана в координаты сцены - получите координаты косой фотографии или щелчков модели Координаты сцены здесь — это координаты, включающие местность, наклонную фотографическую поверхность и модель.

Получается с помощью viewer.scene.pickPosition(movement.position), в соответствии с координатами окна выбирает соответствующую позицию из буфера глубины сцены и возвращает декартовы координаты.

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     var position = viewer.scene.pickPosition(movement.position);
     console.log(position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Примечание. Если в экранных координатах нет наклонной фотографической поверхности или модели, полученные декартовы координаты неточны, и в это время следует включить определение глубины местности (viewer.scene.globe.depthTestAgainstTerrain = true; // По умолчанию false).

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

пройти черезviewer.scene.globe.pick(ray, scene)получить, гдеray=viewer.camera.getPickRay(movement.position).

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     var ray = viewer.camera.getPickRay(movement.position);
     var position = viewer.scene.globe.pick(ray, viewer.scene);
     console.log(position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Примечание. В ходе теста после преобразования полученных здесь координат в wgs84 высота является значением высоты местности точки.

Координаты экрана в координаты эллипсоида - получить соответствующее положение эллипсоида точки мыши Координаты эллипсоида здесь — это координаты WGS84 опорного эллипсоида (Ellipsoid.WGS84), исключая рельеф, модели и наклонные фотографические поверхности.

пройти черезviewer.scene.camera.pickEllipsoid(movement.position, ellipsoid)Get, вы можете получить координаты пересечения текущей нажатой линии визирования и эллипсоида, где эллипсоид — объект эллипсоида, используемый в данный момент землей:viewer.scene.globe.ellipsoidПо умолчанию используется Ellipsoid.wgs84.

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     var position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
     console.log(position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Примечание. В результате тестирования после преобразования полученных здесь координат в wgs84 высота равна 0 (это значение должно быть координатами поверхности за вычетом высоты местности).

Элементы конфигурации, связанные со средством просмотра

Мы успешно сгенерировали 3D-сферу в первой статье, но внимательные друзья нас найдутViewerПункт конфигурации - это пустой объект.Далее я перечислю базовые конфигурации.Друзья могут добавлять их в свои по мере необходимости.Viewerв конфигурации

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

имя Типы По умолчанию описывать
clock Clock new Clock() Часы, которые контролируют текущее время
selectedImageryProviderViewModel ProviderViewModel Модель представления текущего базового слоя изображения или первого доступного базового слоя, если он не указан. Это значение допустимо, только если для параметра options.baseLayerPicker установлено значение true.
imageryProviderViewModels Array.<ProviderViewModel> createDefaultImageryProviderViewModels() Массив ProviderViewModels, выбираемых из BaseLayerPicker. Это значение допустимо, только если для параметра options.baseLayerPicker установлено значение true.
selectedTerrainProviderViewModel ProviderViewModel Текущий слой на основе модели ландшафта вида, например, если он не указан, первый доступный базовый слой. Это значение допустимо, только если для параметра options.baseLayerPicker установлено значение true.
terrainProviderViewModels Array.<ProviderViewModel> createDefaultTerrainProviderViewModels() Массив ProviderViewModels, выбираемых из BaseLayerPicker. Это значение допустимо, только если для параметра options.baseLayerPicker установлено значение true.
imageryProvider ImageryProvider new BingMapsImageryProvider() Используемый поставщик изображений. Это значение допустимо, только если для параметра options.baseLayerPicker установлено значение false.
terrainProvider TerrainProvider new EllipsoidTerrainProvider() Используемый поставщик ландшафта.
skyBox SkyBox Skybox, используемый для рендеринга звезд, если он не определен, использует эффект звезды по умолчанию.
skyAtmosphere SkyAtmosphere Голубое небо и ореол вокруг края земли, установите значение false, чтобы отключить его.
useDefaultRenderLoop Boolean true Установите значение true, если этот виджет может управлять циклом рендеринга, в противном случае установите значение false.
targetFrameRate Number Целевая частота кадров при использовании цикла рендеринга по умолчанию.
showRenderLoopErrors Boolean true Если установлено значение true, при возникновении ошибки цикла рендеринга пользователю будет автоматически отображаться панель HTML, содержащая сообщение об ошибке.
automaticallyTrackDataSourceClocks Boolean true Если установлено значение true, настройки часов для вновь добавленных источников данных будут автоматически отслеживаться и обновляться при изменении часов источника данных. Чтобы настроить часы индивидуально, установите для этого параметра значение false.
contextOptions Object Context и WebGL создают свойства, соответствующие параметрам, переданным в Scene. Добавьте функцию аппаратного сглаживания, коэффициент сглаживания msaalevel использует целочисленное значение от 1 до 8, по умолчанию 1, чем больше значение, тем лучше эффект сглаживания (поскольку используются функции WebGL2.0, поэтому параметру requestWebgl2 присваивается значение true.Потому что WebGL2.0 есть еще какие-то дефекты, поэтому нужно предварительно отключить OIT, FXAA, HDR)
mapProjection MapProjection new GeographicProjection() Картографическая проекция, используемая в режимах просмотра 2D и Columbus.
globe Globe new Globe(mapProjection.ellipsoid) Земной шар в сцене, если установлено значение false, сферический объект не будет добавлен.
orderIndependentTranslucency Boolean true Если для этого параметра задано значение true и используется поддержка устройств, будет использоваться полупрозрачность, независимая от порядка.
creditContainer Element \ String Указывает элемент DOM или идентификатор, содержащий информацию о CreditDisplay. Если не указано, кредитная информация будет добавлена ​​в нижнюю часть части.
dataSources DataSourceCollection new DataSourceCollection() Указывает набор источников данных, визуализируемых виджетом средства просмотра. Если указан этот параметр, экземпляр принадлежит вызывающему объекту и не уничтожается при уничтожении средства просмотра.
terrainExaggeration Number 1.0 Скаляр используется для преувеличения местности. Обратите внимание, что установка преувеличения ландшафта не изменяет никакие другие данные.
shadows Boolean false Определяет, отбрасываются ли тени солнцем.
terrainShadows ShadowMode ShadowMode.RECEIVE_ONLY Определяет, отбрасывает ли ландшафт или принимает тени от солнца.
mapMode2D MapMode2D MapMode2D.INFINITE_SCROLL Определяет, можно ли 2D-карту вращать или бесконечно прокручивать по горизонтали.
navigation Boolean false Отображать ли управление навигационным компасом. Для отображения этот элемент должен быть установлен в значение true при инициализации вьювера.

Добавьте слой (Adding Imagery)

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

Cesium поддерживает несколько форматов слоев:

  • wms
  • TMS
  • WMTS
  • ArcGIS
  • BingMaps
  • GoogleEarth
  • Mapbox
  • OpenStreetMap

По умолчанию Cesium использует Bing Maps в качестве слоя по умолчанию. Этот слой упакован в средство просмотра для демонстрационных целей.

Основной метод добавления базовой карты в Cesium:viewer.imageryLayers.addImageryProvider()

мы вinit()Добавьте следующий код в метод и попробуйте его.

var layer = viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
    url: 'http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
}));

1.gif

Для карты неба WebGL предоставляет класс поставщика услуг изображения карты неба.TiandituImageryProvider, конкретный метод использования может бытьСправочный примера такжеAPI-документация

Сущность камеры

Мы добавили нужную нам базовую карту на землю, но в реальном проекте точно невозможно показать людям всю землю, как только мы заходим в проект (если спрос такой, то прошу прощения!). Итак, нам нужно определить положение, в котором мы нуждаемся, после того, как земля будет сгенерирована, что должно быть сказаноCamera.

Существует множество способов управления камерой в Cesium, например, вращение (rotate), масштабирование (zoom), панорамирование (pan) и полет к месту назначения (flyTo). CesiumJS имеет события мыши и касания для обработки взаимодействия с Camrea, а также API для программного управления камерой.

использоватьsetViewФункция устанавливает положение и ориентацию камеры.destinationвозможноCartesian3илиRectangle,orientationвозможноheading | pitch | roll | direction | up. Рыскание, тангаж и крен задаются в радианах. Курсовой угол - это местное вращение на север, которое увеличивается в восточном направлении от положительного угла. Угол тангажа относится к вращению от местной северо-восточной плоскости. Положительные углы тангажа находятся над плоскостью. Отрицательные углы тангажа находятся ниже плоскости.


 //   初始化场景位置
viewer.scene.camera.setView({
    // 初始化相机经纬度（这里使用了经纬度转换世界坐标的方法）
    destination: new Cesium.Cartesian3.fromDegrees(
      121.54035,
      38.92146,
      2000
    ),
    orientation: {
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-25.0), //从上往下看为-90
      roll: 0,
    },
});

flyToпараметры метода иsetViewв основном то же самое. ТолькоsetViewзаключается в непосредственном позиционировании угла обзора в соответствии с параметрами, иflyToБуквально будет анимация полета к точке привязки.

Два рендеринга:

2.gif

3.gif

полный код

<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", {});
      var layer = viewer.imageryLayers.addImageryProvider(
        new Cesium.ArcGisMapServerImageryProvider({
          url:
            "http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer",
        })
      );
      //   初始化场景位置
      viewer.scene.camera.flyTo({
        // 初始化相机经纬度
        destination: new Cesium.Cartesian3.fromDegrees(
          121.54035,
          38.92146,
          2000
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-25.0), //从上往下看为-90
          roll: 0,
        },
      });
    },
  },
};
</script>

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

наконец

Я изначально хотел написать в этой статье добавление точек, линий и плоскостей.План не такой быстрый, как меняется, поэтому в этой статье речь пойдет пока только о системе координат и Viewer и Camera. В следующей статье реализуем добавление точечных, линейных и поверхностных элементов. Головная боль хахаха. Наконец, я хотел бы поблагодарить братьев, которые прочитали мою последнюю статью, поставили лайк и прокомментировали ее.После написания статьи действительно больше мотивации продолжать ее создание с отзывами!

приложение

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

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

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

Категории