Упрощение 3D-визуализации ГИС — инициализация Cesium Earth | 🏆 Техническая проблема, 3-й конкурс статей

визуализация данных GIS
Упрощение 3D-визуализации ГИС — инициализация Cesium Earth | 🏆 Техническая проблема, 3-й конкурс статей

предисловие

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

Предварительная демонстрация

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

Чтобы узнать больше о цезии, см. 👉Упростите трехмерную визуализацию ГИС — знакомство с цезием

Строительство окружающей среды

Эта статья и последующие статьи запускают среду на основеVue-CLI3.X+

используя мой собственныйCLIплагинvue-cli-plugin-cesiumСборка с нулевой конфигурациейCesiumокружающая обстановка

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

Инициализация Земли

Подать заявку на токен

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

Действуйте следующим образом

Во-первых, откройтеcesium.com/ion/Затем зарегистрируйте новый аккаунт

После успешной регистрации авторизуйтесь и нажмитеAccess Token, перенаправить наAccess Tokens pageстраница

Как показано выше, выберитеDefaultПо умолчаниюaccess tokenскопировать в контент

Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>'

Конечно, если вы просто пишете демо, не пишитеTokenтакже

инициализация по умолчанию

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

<template>
  <div class="map-box">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
var viewer = null
export default {
  name: "No01Init",
  data() {
    return {}
  },
  mounted() {
    Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>'
    // viewer = new Cesium.CesiumWidget('cesiumContainer')
    viewer = new Cesium.Viewer("cesiumContainer")

    console.log(viewer)
  },
}
</script>
<style scoped>
.map-box {
  width: 100%;
  height: 100%;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

Как показано выше, мы можем использоватьnew Cesium.CesiumWidgetилиnew Cesium.ViewerЕго можно инициализировать способом , можно смонтировать в контейнер, а эффект после запуска проекта следующий

Может быть осторожные друзья заметили, что мы инициализировалиviewerэкземпляр не прописанdata, потому что Vue будетdataВыполняется захват атрибута данных.Если атрибут является объектом, захват данных будет выполняться рекурсивно.viewerКоличество свойств в этом экземпляре очень велико, если разместить егоdataсередина. . . Конец только один, браузер вылетает

Мы можем поместить прямое объявление в компонентviewerпеременная, вы также можете использоватьwindow.viewerПучокviewerподняться наwindowвыше, этой проблемы можно избежать

существуетVue + CesiumДанные, относящиеся к экземпляру во время разработки, не должны помещаться в данные, это необходимо отметить.

Элементы управления скрыты

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

при созданииCesiumпример,new Cesium.ViewerКонструктор имеет два параметра

  • Требуется элемент, установленный экземпляром
  • параметры инициализируют объект конфигурации необязательно

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

viewer = new Cesium.Viewer("cesiumContainer", {
  animation: false, // 隐藏动画控件
  baseLayerPicker: false, // 隐藏图层选择控件
  fullscreenButton: false, // 隐藏全屏按钮
  vrButton: false, // 隐藏VR按钮，默认false
  geocoder: false, // 隐藏地名查找控件
  homeButton: false, // 隐藏Home按钮
  infoBox: false, // 隐藏点击要素之后显示的信息窗口
  sceneModePicker: false, // 隐藏场景模式选择控件
  selectionIndicator: true, // 显示实体对象选择框，默认true
  timeline: false, // 隐藏时间线控件
  navigationHelpButton: false, // 隐藏帮助按钮
  scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
  shouldAnimate: true, // 开启动画自动播放
  sceneMode: 3, // 初始场景模式 1：2D 2：2D循环 3：3D，默认3
  requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
  // 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity
  maximumRenderTimeChange: Infinity
})

Мы используем вышеперечисленноеoptionsКонфигурация, вы можете скрыть все элементы управления на странице, как показано на следующем рисунке.

Видно, что хотя элементов управления уже нет, все же естьCesiumизlogoИнформация, нам не нужно показывать

// 隐藏下方Cesium logo
viewer.cesiumWidget.creditContainer.style.display = "none"

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

загрузить изображение

CesiumПоддерживает загрузку и рендеринг высокоточных данных изображения (карты) из нескольких сервисных источников, слои поддерживают сортировку и прозрачное смешивание, яркость, контрастность, гамму, оттенок каждого слоя), насыщенность можно динамически изменять

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

PS: Cesium — это конструктор, и у этого конструктора есть бесчисленное множество статических свойств.Они также являются конструкторами с разными функциями.Согласно пониманию ООП, Cesium — это родительский класс, и у него есть много подклассов для выполнения разных задач

Класс Cesium.ImageryProvider

Говоря об этом фрагменте изображения, прежде всего, мы должны понятьimageryProviderЭтот класс,ImageryЕго можно перевести в образы и образы, которые в совокупности именуются здесь изображениями.

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

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

ImageryProviderтип, который содержит класс

  • ArcGisMapServerImageryProvider
    • Связанные сервисы ArcGIS Online и Server
  • BinaMapsImageryProvider
    • Изображение карты Bing, вы можете указать mapStyle, подробности см. в классе BingMapsStyle.
  • GoogleEarthEnterpriselmageryProvider
    • Корпоративный сервис
  • GridImageryProvider
    • Визуализируйте сетку внутри каждой плитки, чтобы понять детализацию каждой плитки.
  • IonImageryProvider
    • Служба изображений, предоставляемая Cesium ion REST API
  • MapboxImageryProvider
    • Сервис изображений Mapbox, укажите стиль карты в соответствии с mapId
  • MapboxStyleImageryProvider
    • Сервис изображений Mapbox, укажите стиль карты в соответствии с styleId
  • createOpenStreetMapImageryProvider
    • Сервис изображений, предоставляемый OpenStreetMap
  • SingleTilelmageryProvider
    • Служба изображений для одного изображения, подходящая для автономных данных или сценариев, не требующих больших данных изображения.
  • TileCoordinatesImageryProvider
    • Визуализация окружения каждой плитки для облегчения отладки
  • TileMapServicelmageryProvider
    • Согласно спецификации MapTiler, вы можете загружать листы и публиковать сервисы самостоятельно, аналогично процессу сервисов изображений ArcGIS.
  • UrlTemplateImageryProvider
    • Укажите шаблон формата URL-адреса, который удобен пользователям для реализации собственного провайдера, например отечественных сервисов изображений, таких как AutoNavi, Tencent и т. д. URL-адрес представляет собой фиксированную спецификацию, которую можно легко реализовать через провайдера. И OSM тоже реализуется через этот класс
  • WebMapServiceImageryProvider
    • Сервисы изображений, соответствующие спецификации WMS, могут быть инкапсулированы с помощью этого класса и реализованы путем указания определенных параметров.
  • WebMapTileServicelmageryProvider
    • Сервисы изображений, которые обслуживают спецификацию WMTS1.0.0, могут быть реализованы с помощью этого класса, например, внутренняя карта звездного неба.

Класс Cesium.ImageryLayer

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

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

Класс Cesium.ImageryLayerCollection

Cesium.ImageryLayerCollectionклассImageryLayerКонтейнер экземпляра, он может загружать, размещать несколькоImageryLayerэкземпляр, и он помещаетImageryLayerЭкземпляры заказаны

Cesium.Viewerсодержится в объекте классаimageryLayersсобственностьImageryLayerCollectionЭкземпляр класса, он содержит текущийCesiumприложение всеImageryLayerобъект класса, то есть все слои изображения, загруженные в данный момент на землю

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

Загрузить пример изображения

Загрузить изображение карты неба

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

viewer.imageryLayers.remove(viewer.imageryLayers.get(0))

Затем мы загружаем источник данных для слоя изображения.

let tianditu = new Cesium.WebMapTileServiceImageryProvider({
  url:"http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ebf64362215c081f8317203220f133eb",
  layer: "tdtBasicLayer",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "GoogleMapsCompatible",
  show: false,
})

urlв полеtkЧтобы предоставить токен для Tiantu, перейдите на официальный сайт Tiantu, чтобы зарегистрироваться и подать заявку на его получение.

Затем мы добавляем источник данных вImageryLayerКонтейнер класса может быть символизирован и отображен

Добавить источник данных вImageryLayerЕсть два способа символизировать и отображать контейнеры классов, первый — инициализироватьviewerпримерoptionsконфигурации, вы можете напрямуюoptionsобъектimageryProviderВы можете разместить источник данных в свойствах

new Cesium.Viewer("cesiumContainer",{
  imageryProvider: tianditu
})

Второй способ, используяviewerпримерimageryLayersатрибутaddImageryProviderспособ добавить

let imagery = viewer.imageryLayers.addImageryProvider(tianditu)

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

загрузить изображения гугла

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

viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
let imagery = viewer.imageryLayers.addImageryProvider(
  new Cesium.UrlTemplateImageryProvider({
    url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali",
    baseLayerPicker : false
  })
)

Предварительный просмотр изображения Google ниже

Загрузить изображения ArcGIS
viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
let imagery = viewer.imageryLayers.addImageryProvider(
  new Cesium.ArcGisMapServerImageryProvider({
    url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
    baseLayerPicker : false
  })
)

Предварительный просмотр изображения ArcGIS выглядит следующим образом.

Загрузить изображение AutoNavi
viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
let imagery = viewer.imageryLayers.addImageryProvider(
  new Cesium.UrlTemplateImageryProvider({
    maximumLevel:18,//最大缩放级别
    url : 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    style: "default",
    format: "image/png",
    tileMatrixSetID: "GoogleMapsCompatible"
  })
)

Предварительный просмотр изображения Gaode выглядит следующим образом.

Загрузка меток карты звездного неба

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

let label = viewer.imageryLayers.addImageryProvider(
  new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg"+"&tk="+"19b72f6cde5c8b49cf21ea2bb4c5b21e",
    layer: "tdtAnnoLayer",
    style: "default",
    maximumLevel: 18, //天地图的最大缩放级别
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    show: false,
  })
)

Точно так же, как и с изображением Tiantu, не забудьте заменитьtkой

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

Регулировка яркости изображения

Мы загружаем изображение, чтобы получить экземпляр изображенияimageryПосле этого можноbrightnessАтрибут для регулировки яркости, значение0～1, по умолчанию 1

imagery.brightness = 0.9

Резюме видео

Мы перечислили вышеImageryProviderКласс поддерживает множество подклассов, и в приведенном выше примере

При загрузке сервиса изображений AutoNavi мы используем указанныйurlизformatшаблон для реализации собственногоProvider, поэтому используяUrlTemplateImageryProviderкласс для загрузки источника данных

загрузкаArcGISиспользованное изображениеArcGIS Serverсопутствующие услуги, поэтому используйтеArcGisMapServerImageryProviderкласс для загрузки источника данных

При загрузке изображения столбца, так как мы загружаем службу фрагментов веб-карты, т.е.WMTSсервис, поэтому мы используемWebMapTileServiceImageryProviderДобрый

Эти простые небольшие примеры должны сказать нам, какой источник данных мы используем, мы используем соответствующийImageryProviderзагрузить

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

наконец

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

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

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

It is really difficult to accumulate basic knowledge of GIS without professional knowledge. This series is updated from time to time, so we will arrange so many for the time being, insert it from time to time, and update it from time to time, so Следите за обновлениями

конец

Нелегко быть оригинальным. Прочитав ее, поставьте лайк и сформируйте привычку. Эта статья включена в GitHub. Чтобы узнать больше, смотрите 👉isboyjc/blog/issues

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

🏆 Технический выпуск 3 | Все о визуализации данных...

Категории