ReBeX

ReBeX

关注
发信
关注(28)粉丝(399)

【CesiumJS入门】（2）ImageryLayer之图层加载与管理

前言

在上一篇博客中，我们加载了一个空空的蓝色地球，现在我们将会为地球加载上地图。
【CesiumJS入门】（2）ImageryLayer之图层加载与管理-LMLPHP

下面是一个简单的示例，展示了创建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

ImageryProvider 是 Cesium 中可以提供地球表面影像的接口。它可以用于加载并显示各种来源的卫星地图，例如 Bing 地图、OpenStreetMap、Google 地图、ArcGIS的地图服务等等。（类似于要加载的地图的数据源）

用户可以根据自己的需求选择合适的 ImageryProvider 子类来加载不同的地图影像。

ImageryLayer

ImageryLayer是Cesium中用于显示影像数据的类，它可以加载、显示和管理地球表面的图像。通过ImageryLayer，我们可以将一个或多个覆盖在地球表面的影像图层添加到Cesium的场景中，并设置它们的不透明度、可见性及其他属性。

影像图层相关配置（option）

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

一些地图服务的例子

/**
 * @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服务的加载，这将在以后详细介绍...

影像图层控制

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); // 移除全部图层
---

代码

我们在utils文件夹里新建一个ImageryLayer文件夹，后续ImageryLayer相关的方法都放在这个文件夹里。
好啦，新建一个文件loadImagery.js：

/*
 * @Date: 2023-06-04 10:41:29
 * @LastEditors: ReBeX  420659880@qq.com
 * @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之图层加载与管理-LMLPHP

06-04 15:32
Powered by LMLPHP ©2024 ReBeX 0.010753