머리말

지난 블로그에서 우리는 빈 파란색 지구본을 로드했습니다. 이제 지구본에 대한 지도를 로드합니다.
여기에 이미지 설명 삽입

단계:

ImageryProvider 만들기(데이터 소스)

ImageryLayer(레이어) 만들기

보기(뷰어)에 레이어 추가

다음은 imageryProvider 및 ImageryLayer를 만들고 지구본에 추가하는 간단한 예입니다.

// 影像提供者（数据源）
const imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    
    
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
})

// 创建图层
const imageryLayer = new Cesium.ImageryLayer(imageryProvider);

// 将图层添加进视图中
viewer.imageryLayers.add(imageryLayer);

이미지 공급자

ImageryProvider지구 표면의 이미지를 제공할 수 있는 Cesium의 인터페이스입니다. Bing 지도, OpenStreetMap, Google 지도, ArcGIS 지도 서비스 등과 같은 다양한 소스에서 위성 지도를 로드하고 표시하는 데 사용할 수 있습니다. (로드할 지도의 데이터 소스와 유사)

사용자는 다양한 지도 이미지를 로드하기 위해 자신의 필요에 따라 적절한 ImageryProvider 하위 클래스를 선택할 수 있습니다.

ImageryLayer

ImageryLayer지구 표면의 이미지를 불러와 표시 및 관리할 수 있는 Cesium에서 이미지 데이터를 표시하는 데 사용되는 클래스입니다. ImageryLayer를 통해 지구 표면을 덮고 있는 하나 이상의 이미지 레이어를 Cesium의 장면에 추가하고 불투명도, 가시성 및 기타 속성을 설정할 수 있습니다.

이미지 레이어 관련 구성(옵션)

ImageryLayer ConstructorOptions - 세슘 문서

const layerOption = {
    
    
  show: true, // 图像层是否可见
  alpha: 1, // 透明度（0，1）
  nightAlpha: 1, // 地球夜晚一侧的透明度（0，1）
  dayAlpha: 1, // 地球白天一侧的透明度（0，1）
  brightness: 1, // 亮度（-1，1）
  contrast: 1, // 对比度（0，3）
  hue: 0, // 色调（0，360）
  saturation: 1, // 饱和度（0，3）
  gamma: 1, // 伽马校正（0.01，5）
}

2023년 6월 8일 업데이트: 위업: 새로운 이미지 레이어 관리 구성요소 · 53929f1 · ReBeX/cesium-tyro-blog - Gitee.com
- ElementPlus를 기반으로 모든 현재 이미지 레이어를 자동으로 가져온 다음 몇 가지 간단한 구성을 수행할 수 있는 간단한 이미지 레이어 관리 구성 요소를 작성했습니다.

지도 서비스의 몇 가지 예

/**
 * @description: 加载arcgis地图服务
 * url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
 * url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_street_Map/MapServer'
 */
function arcgisImagery(url, option = layerOption ) {
    
    
  const imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    
    
    url,
    token: '',
    layers: '', // 要显示的子图层 ID 数组
    credit: '', // 于表示影像图层的来源及版权信息
    enablePickFeatures: true, // 是否应该返回用于选择的附加要素数据
    usePreCachedTilesIfAvailable: true, // 如果为 true，则使用服务器的预缓存切片（如果可用）。如果为 false，则忽略任何预缓存的切片并使用'导出'服务。
  })
  const imageryLayer = new Cesium.ImageryLayer(imageryProvider, option)
  viewer.imageryLayers.add(imageryLayer)
}

/**
 * @description: 加载Cesium ION 服務
 */
function ionImagery(id = 3812, option) {
    
    
  viewer.imageryLayers.add(
    new Cesium.ImageryLayer(
      new Cesium.IonImageryProvider({
    
     assetId: id }),
      option
    )
  )
}

/**
 * @description: 加载osm地图
 */
function osmImagery(url = 'https://a.tile.openstreetmap.org/', option) {
    
    
  viewer.imageryLayers.add(
    new Cesium.ImageryLayer(
      new Cesium.OpenStreetMapImageryProvider({
    
     url }),
      option
    )
  )
}

/**
 * @description: 加载Humanitarian OpenStreetMap Team style地图
 */
function hotImagery(url = 'https://tile-{s}.openstreetmap.fr/hot/{z}/{x}/{y}.png', option) {
    
    
  viewer.imageryLayers.add(
    new Cesium.ImageryLayer(
      new Cesium.UrlTemplateImageryProvider({
    
     url, subdomains: ['a', 'b', 'c'] }),
      option
    )
  )
}

/**
 * @description: 加载Stamen地图
 */
function stamenImagery(url = 'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', option) {
    
    
  viewer.imageryLayers.add(
    new Cesium.ImageryLayer(
      new Cesium.UrlTemplateImageryProvider({
    
     url }),
      option
    )
  )
}

/**
 * @description: 加载carto Basemaps 黑暗风格地图
 */
function darkImagery(url = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', option) {
    
    
  viewer.imageryLayers.add(
    new Cesium.ImageryLayer(
      new Cesium.UrlTemplateImageryProvider({
    
     url, subdomains: ['a', 'b', 'c', 'd'] }),
      option
    )
  )
}

// 影像图层加载的重点应当是WMTS服务的加载，这将在以后详细介绍...

이미지 레이어 제어

ImageryLayerCollection - 세슘 문서

const layer = new Cesium.ImageryLayer(
   new Cesium.UrlTemplateImageryProvider({
    
     url: 'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png' })
)
viewer.imageryLayers.add(layer) // 将图层加入到视图中
 
viewer.imageryLayers.get(0) // 获取序列号为0的图层
viewer.imageryLayers.indexOf(layer) // 获取图层的索引（层级，大的在上层）
viewer.imageryLayers.lower(layer); // 向下移一层
viewer.imageryLayers.raise(layer); // 向上移一层
viewer.imageryLayers.lowerToBottom(layer); // 移到最下层
viewer.imageryLayers.raiseToTop(layer); // 移到最上层
viewer.imageryLayers.remove(layer, true); // 移除图层，true则销毁图层
viewer.imageryLayers.removeAll(true); // 移除全部图层
---

코드

코드 제출 참조: 위업: 이미지 레이어 로드 및 관리 · 413b622 · ReBeX/cesium-tyro-blog - Gitee.com

utils 폴더에 ImageryLayer 폴더를 새로 만들고 ImageryLayer와 관련된 후속 메서드를 이 폴더에 배치합니다.
좋아, 새 파일을 만듭니다 loadImagery.js.

/*
 * @Date: 2023-06-04 10:41:29
 * @LastEditors: ReBeX  [email protected]
 * @LastEditTime: 2023-06-04 15:26:06
 * @FilePath: \cesium-tyro-blog\src\utils\ImageryLayer\loadImagery.js
 * @Description: 加载影像图层
 */
import {
    
     viewer } from '@/utils/createCesium.js' // 引入地图对象
import * as Cesium from 'cesium'

// 图层相关配置
const layerOption = {
    
    
  show: true, // 图像层是否可见
  alpha: 1, // 透明度
  nightAlpha: 1, // 地球夜晚一侧的透明度
  dayAlpha: 1, // 地球白天一侧的透明度
  brightness: 1, // 亮度
  contrast: 1, // 对比度
  hue: 0, // 色调
  saturation: 1, // 饱和度
  gamma: 1, // 伽马校正
}

export const loadImagery = {
    
    
  // 加载arcgis地图服务
  arcgis: (url, option) => {
    
    
    const imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    
    
      url,
      token: '',
      layers: '', // 要显示的子图层 ID 数组
      credit: '', // 于表示影像图层的来源及版权信息
      enablePickFeatures: true, // 是否应该返回用于选择的附加要素数据
      usePreCachedTilesIfAvailable: true, // 如果为 true，则使用服务器的预缓存切片（如果可用）。如果为 false，则忽略任何预缓存的切片并使用'导出'服务。
    })
    const layer = new Cesium.ImageryLayer(imageryProvider, option)
    // viewer.imageryLayers.add(layer, index) // 可以为图层设置index
    viewer.imageryLayers.add(layer)
    console.log(viewer.imageryLayers.indexOf(layer)); // 显示地图的加载层级
    return layer
  },
  // Cesium ION 服務
  ion: (option, id = 3812) => {
    
    
    const layer = new Cesium.ImageryLayer(
      new Cesium.IonImageryProvider({
    
     assetId: id }),
      option
    )
    viewer.imageryLayers.add(layer)
    return layer
  },
  // 加载osm地图
  osm: (option) => {
    
    
    const layer = new Cesium.ImageryLayer(
      new Cesium.OpenStreetMapImageryProvider({
    
     url: 'https://a.tile.openstreetmap.org/' }),
      option
    )
    viewer.imageryLayers.add(layer)
    return layer
  },
  // 加载Humanitarian OpenStreetMap Team style地图
  hot: (option) => {
    
    
    const layer = new Cesium.ImageryLayer(
      new Cesium.UrlTemplateImageryProvider({
    
     url: 'https://tile-{s}.openstreetmap.fr/hot/{z}/{x}/{y}.png', subdomains: ['a', 'b', 'c'] }),
      option
    )
    viewer.imageryLayers.add(layer)
    return layer
  },
  // 加载carto Basemaps 航海风格地图
  cartoVoyager: (option) => {
    
    
    const layer = new Cesium.ImageryLayer(
      new Cesium.UrlTemplateImageryProvider({
    
     url: 'https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png' }),
      option
    )
    viewer.imageryLayers.add(layer)
    return layer
  },
  // 加载carto Basemaps 黑暗风格地图
  cartoDark: (option) => {
    
    
    const layer = new Cesium.ImageryLayer(
      new Cesium.UrlTemplateImageryProvider({
    
     url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', subdomains: ['a', 'b', 'c', 'd'] }),
      option
    )
    viewer.imageryLayers.add(layer)
    return layer
  },
  // 加载Stamen地图
  stamen: (option) => {
    
    
    const layer = new Cesium.ImageryLayer(
      new Cesium.UrlTemplateImageryProvider({
    
     url: 'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png' }),
      option
    )
    viewer.imageryLayers.add(layer)
    return layer
  }
}

그 후 App.vue에서 다음과 같이 소개했습니다. import { loadImagery } from "@/utils/ImageryLayer/loadImagery.js";
지구 보기가 생성된 후 이미지 레이어를 로드합니다.

onMounted(() => {
    
    
  new CesiumMap("cesiumContainer");
  const cartoDark = loadImagery.cartoDark();
  console.log("获取图层的索引号: ", viewer.imageryLayers.indexOf(cartoDark));
});

야간 스타일 지도가 로드된 지구본을 받게 됩니다.

여기에 이미지 설명 삽입

[CesiumJS 소개] (2) ImageryLayer 레이어 로딩 및 관리

머리말

이미지 공급자

ImageryLayer

이미지 레이어 관련 구성(옵션)

지도 서비스의 몇 가지 예

이미지 레이어 제어

코드

Supongo que te gusta