Cesium底图切换实现

已于 2025-04-11 09:02:13 修改
阅读量1k 收藏 7
点赞数 4
分类专栏： WebGIS 文章标签： typescript node.js react.js reactjs es6 前端框架
于 2024-04-18 17:32:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Liyong_liyong/article/details/137929244
版权

创建Cesium视图

'use client';

import { ReactElement, useEffect } from 'react';
import * as Cesium from 'cesium';
import CesiumNavigation from 'cesium-navigation-es6';
import { initRange, TOKEN } from '@/utils';
import { useAppDispatch } from '@/store';
import { setCesiumViewer } from '@/store/reducer/cesium-slice';
import 'cesium/Source/Widgets/widgets.css';
import { baseMap } from '@/components/cesium/base-map';

Cesium.Ion.defaultAccessToken = TOKEN.CESIUM;
const CreateViewer = (): ReactElement => {
  const dispatch = useAppDispatch();
  useEffect(() => {
    initMapViewer().catch((e) => console.log(e));
  }, []);
  const initMapViewer = async () => {
    // 地形配置
    const terrain = Cesium.Terrain.fromWorldTerrain({
      requestWaterMask: true,
      requestVertexNormals: true
    });

    const viewer = new Cesium.Viewer('cesium-viewer', {
      infoBox: false,
      // 设置底图
      // baseLayer: new Cesium.ImageryLayer(new Cesium.WebMapTileServiceImageryProvider({
      //   url: `http://t0.tianditu.gov.cn/img_w/wmts?tk=${TOKEN.TDT}`,
      //   layer: 'img',
      //   style: 'default',
      //   tileMatrixSetID: 'w',
      //   format: 'tiles',
      //   maximumLevel: 18
      // }), {}),
      terrain: terrain,
      shouldAnimate: true, // 设置影像图列表
      geocoder: false, // 右上角查询按钮
      shadows: false,
      terrainProviderViewModels: [], // 设置地形图列表
      animation: false, // 动画小窗口
      baseLayerPicker: false, // 图层选择器
      fullscreenButton: false, // 全屏
      vrButton: false, // vr 按钮
      homeButton: false, // home 按钮
      sceneModePicker: false, // 2D,2.5D,3D 切换
      selectionIndicator: false,
      timeline: false, // 时间轴
      navigationHelpButton: false, // 帮助按钮
      creditContainer: document.createElement('div'), // 隐藏logo
      contextOptions: {
        webgl: {
          alpha: true,
          depth: true,
          stencil: true,
          antialias: true,
          premultipliedAlpha: true,
          preserveDrawingBuffer: true, //通过canvas.toDataURL()实现截图需要将该项设置为true
          failIfMajorPerformanceCaveat: true
        },
        allowTextureFilterAnisotropic: true
      }
    });
    // 开启深度检测
    viewer.scene.globe.depthTestAgainstTerrain = true;
    // 加载范围限定为中国
    initRange(viewer, { east: 136, north: 60, south: 2, west: 74 });

    baseMap(viewer);

    //禁止双击zoom
    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
      Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
    );
    viewer.scene.postProcessStages.fxaa.enabled = false;

    // 解决贴地区块显示不全
    viewer.scene.globe.depthTestAgainstTerrain = false;

    const options = {
      // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.
      defaultResetView: Cesium.Rectangle.fromDegrees(96.5, 25.8, 108, 35.4),
      // 罗盘
      enableCompass: true,
      // 缩放控件
      enableZoomControls: true,
      // 距离图例
      enableDistanceLegend: true,
      // 指南针外环
      enableCompassOuterRing: true
    };
    new CesiumNavigation(viewer, options);
    dispatch(setCesiumViewer(viewer));
  };

  return <div id={'cesium-viewer'} style={{ width: '100%', height: '100%' }} />;
};

export default CreateViewer;

注：小编更推荐使用方法三

方法一

设置底图

import * as Cesium from 'cesium';
import { TOKEN } from '@/utils/token.ts';

export const TDT_SL = new Cesium.WebMapTileServiceImageryProvider({
  url: `http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${TOKEN.TDT}`,
  layer: 'vec',
  style: 'default',
  format: 'tiles',
  tileMatrixSetID: 'w',
  subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
  credit: new Cesium.Credit('天地图矢量'),
  maximumLevel: 18
});

export const TDT_YX = new Cesium.WebMapTileServiceImageryProvider({
  url: `http://{s}.tianditu.gov.cn/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=${TOKEN.TDT}`,
  layer: 'img',
  style: 'default',
  format: 'tiles',
  tileMatrixSetID: 'w',
  subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
  credit: new Cesium.Credit('天地图影像'),
  maximumLevel: 18
});

export const TDT_DX = new Cesium.WebMapTileServiceImageryProvider({
  url: `http://{s}.tianditu.gov.cn/ter_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${TOKEN.TDT}`,
  layer: '111',
  style: 'default',
  format: '111',
  tileMatrixSetID: '11',
  subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
  credit: new Cesium.Credit('天地图地形'),
  maximumLevel: 18
});

// 加载影像注记
export const TDT_ZJ = new Cesium.WebMapTileServiceImageryProvider({
  url: `http://t0.tianditu.gov.cn/cia_w/wmts?tk=${TOKEN.TDT}`,
  layer: 'cia',
  style: 'default',
  tileMatrixSetID: 'w',
  format: 'tiles',
  credit: new Cesium.Credit('天地注记'),
  maximumLevel: 18
});


export const ARCGIS = new Cesium.WebMapTileServiceImageryProvider({
  url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS',
  layer: 'World_Imagery',
  style: 'default',
  format: 'image/jpeg',
  tileMatrixSetID: 'GoogleMapsCompatible',
  maximumLevel: 19,
  credit: new Cesium.Credit('ARCGIS')
});

切换底图

export type BaseMapType = 'TDT_SL' | 'TDT_YX' | 'TDT_DX' | 'TDT_ZJ' | 'ARCGIS' | 'REMOVE'
export const toggleBaseMap = (viewer: Cesium.Viewer, type: BaseMapType) => {
  if (type === 'TDT_ZJ') {
    viewer.imageryLayers.addImageryProvider(TDT_ZJ);
  } else {
    viewer.imageryLayers.removeAll();
    switch (type) {
      case 'TDT_SL':
        viewer.imageryLayers.addImageryProvider(TDT_SL);
        break;
      case 'TDT_YX':
        viewer.imageryLayers.addImageryProvider(TDT_YX);
        break;
      case 'TDT_DX':
        viewer.imageryLayers.addImageryProvider(TDT_DX);
        break;
      case 'ARCGIS':
        viewer.imageryLayers.addImageryProvider(ARCGIS);
        break;
      case 'REMOVE':
        viewer.imageryLayers.removeAll();
        break;
      default:
        break;
    }
  }
};

方法二

设置并添加底图

import { TOKEN } from '@/utils';
import { Credit, Viewer, WebMapTileServiceImageryProvider } from 'cesium';

export const baseMap = (viewer: Viewer) => {
  //天地图影像
  let TDT_YX = new WebMapTileServiceImageryProvider({
    url: `http://{s}.tianditu.gov.cn/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=${TOKEN.TDT}`,
    layer: 'img',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'w',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    credit: new Credit('天地图影像'),
    maximumLevel: 18
  });

  //天地图矢量
  let TDT_SL = new WebMapTileServiceImageryProvider({
    url: `http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${TOKEN.TDT}`,
    layer: 'vec',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'w',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    credit: new Credit('天地图矢量'),
    maximumLevel: 18
  });
  const ARCGIS = new WebMapTileServiceImageryProvider({
    url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS',
    layer: 'World_Imagery',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'GoogleMapsCompatible',
    maximumLevel: 19,
    credit: new Credit('ARCGIS')
  });
  // 加载影像注记
  let TDT_ZJ = new WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.gov.cn/cia_w/wmts?tk=${TOKEN.TDT}`,
    layer: 'cia',
    style: 'default',
    tileMatrixSetID: 'w',
    format: 'tiles',
    credit: new Credit('天地注记'),
    maximumLevel: 18
  });

  viewer.imageryLayers.addImageryProvider(TDT_SL);
  viewer.imageryLayers.addImageryProvider(TDT_YX);
  viewer.imageryLayers.addImageryProvider(ARCGIS);
  viewer.imageryLayers.addImageryProvider(TDT_ZJ);
  // console.log('===viewer.imageryLayers===', viewer.imageryLayers);
};

切换底图

import { Viewer } from 'cesium';
export const toggleBaseMap = (
  viewer: Viewer,
  type: 'TDT_SL' | 'TDT_YX' | 'ARCGIS'
) => {
  switch (type) {
    case 'TDT_YX':
      viewer.imageryLayers.get(0).show = true;
      viewer.imageryLayers.get(1).show = false;
      viewer.imageryLayers.get(2).show = false;
      viewer.imageryLayers.get(3).show = false;
      break;
    case 'TDT_SL':
      viewer.imageryLayers.get(0).show = false;
      viewer.imageryLayers.get(1).show = true;
      viewer.imageryLayers.get(2).show = false;
      viewer.imageryLayers.get(3).show = false;
      break;
    case 'ARCGIS':
      viewer.imageryLayers.get(0).show = false;
      viewer.imageryLayers.get(1).show = false;
      viewer.imageryLayers.get(2).show = false;
      viewer.imageryLayers.get(3).show = true;
      break;
    default:
      break;
  }
};

调用方法

'use client';

import CreateViewer from '@/components/cesium/create-viewer';
import './index.scss';
import { Button } from 'antd';
import { useAppSelector } from '@/store';
import { toggleBaseMap } from '@/components/cesium/base-map';

const Home = () => {
  const { viewer } = useAppSelector((state) => state.cesium);
  return (
    <div className={'views-home w-screen h-screen position-relative'}>
      <main className={'views-home-main w-screen h-screen'}>
        <div className={'views-home-main-menu'}>
          <Button onClick={() => toggleBaseMap(viewer!, 'TDT_SL')}>天地图矢量</Button>
          <br/>
          <br/>
          <Button onClick={() => toggleBaseMap(viewer!, 'TDT_YX')}>天地图影像</Button>
          <br/>
          <br/>
          <Button onClick={() => toggleBaseMap(viewer!, 'ARCGIS')}>ArcGIS影像</Button>
        </div>
        <CreateViewer />
      </main>
    </div>
  );
};
export default Home;

方法三

设置底图

import * as Cesium from 'cesium';
import {TOKEN} from '@/utils/token.ts';


export const TDT_SL = new Cesium.ImageryLayer(
  new Cesium.WebMapTileServiceImageryProvider({
    url: `http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${TOKEN.TDT}`,
    layer: 'vec',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'w',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    credit: new Cesium.Credit('天地图矢量'),
    maximumLevel: 18
  })
)


export const TDT_SL_ZJ = new Cesium.ImageryLayer(
  new Cesium.WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.gov.cn/cva_w/wmts?tk=${TOKEN.TDT}`,
    layer: 'cva',
    style: 'default',
    tileMatrixSetID: 'w',
    format: 'tiles',
    credit: new Cesium.Credit('天地图矢量注记'),
    maximumLevel: 18
  })
)


export const TDT_YX = new Cesium.ImageryLayer(
  new Cesium.WebMapTileServiceImageryProvider({
    url: `http://{s}.tianditu.gov.cn/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=${TOKEN.TDT}`,
    layer: 'img',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'w',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    credit: new Cesium.Credit('天地图影像'),
    maximumLevel: 18
  })
)

// 加载影像注记
export const TDT_YX_ZJ = new Cesium.ImageryLayer(
  new Cesium.WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.gov.cn/cia_w/wmts?tk=${TOKEN.TDT}`,
    layer: 'cia',
    style: 'default',
    tileMatrixSetID: 'w',
    format: 'tiles',
    credit: new Cesium.Credit('天地图影像注记'),
    maximumLevel: 18
  })
)

export const TDT_DX = new Cesium.ImageryLayer(
  new Cesium.WebMapTileServiceImageryProvider({
    url: `http://{s}.tianditu.gov.cn/ter_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${TOKEN.TDT}`,
    layer: '111',
    style: 'default',
    format: '111',
    tileMatrixSetID: '11',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    credit: new Cesium.Credit('天地图地形'),
    maximumLevel: 18
  })
)

// 加载影像注记
export const TDT_DX_ZJ = new Cesium.ImageryLayer(
  new Cesium.WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.gov.cn/cta_w/wmts?tk=${TOKEN.TDT}`,
    layer: 'cta',
    style: 'default',
    tileMatrixSetID: 'w',
    format: 'tiles',
    credit: new Cesium.Credit('天地图地形注记'),
    maximumLevel: 18
  })
)

export const ARCGIS = new Cesium.ImageryLayer(
  new Cesium.WebMapTileServiceImageryProvider({
    url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS',
    layer: 'World_Imagery',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'GoogleMapsCompatible',
    maximumLevel: 19,
    credit: new Cesium.Credit('ARCGIS')
  })
)

export const GaoDe = new Cesium.ImageryLayer(
  new Cesium.UrlTemplateImageryProvider({
    url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    minimumLevel: 3,
    maximumLevel: 18
  })
)

export const GaoDe_ZJ = new Cesium.ImageryLayer(
  new Cesium.UrlTemplateImageryProvider({
    url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
    minimumLevel: 3,
    maximumLevel: 18
  })
)

切换底图

export type BaseMapType =
  | 'TDT_SL'
  | 'TDT_YX'
  | 'TDT_DX'
  | 'ARCGIS'
  | 'GaoDe'
  | 'REMOVE';
export const toggleBaseMap = (viewer: Cesium.Viewer, type: BaseMapType, show: boolean) => {
  switch (type) {
    case 'TDT_YX':
      if (show) {
        viewer.imageryLayers.add(TDT_YX);
        viewer.imageryLayers.add(TDT_YX_ZJ);
      } else {
        viewer.imageryLayers.remove(TDT_YX, false);
        viewer.imageryLayers.remove(TDT_YX_ZJ, false);
      }
      break;
    case 'TDT_SL':
      if (show) {
        viewer.imageryLayers.add(TDT_SL);
        viewer.imageryLayers.add(TDT_SL_ZJ);
      } else {
        viewer.imageryLayers.remove(TDT_SL, false);
        viewer.imageryLayers.remove(TDT_SL_ZJ, false);
      }
      break;
    case 'TDT_DX':
      if (show) {
        viewer.imageryLayers.add(TDT_DX);
        viewer.imageryLayers.add(TDT_DX_ZJ);
      } else {
        viewer.imageryLayers.remove(TDT_DX, false);
        viewer.imageryLayers.remove(TDT_DX_ZJ, false);
      }
      break;
    case 'ARCGIS':
      if (show) {
        viewer.imageryLayers.add(ARCGIS);
      } else {
        viewer.imageryLayers.remove(ARCGIS, false);
      }
      break;
    case 'GaoDe':
      if (show) {
        viewer.imageryLayers.add(GaoDe);
        viewer.imageryLayers.add(GaoDe_ZJ);
      } else {
        viewer.imageryLayers.remove(GaoDe, false);
        viewer.imageryLayers.remove(GaoDe_ZJ, false);
      }
      break;
    case 'REMOVE':
      viewer.imageryLayers.removeAll(false);
      break;
    default:
      break;
  }
};

在这里插入图片描述

结果

天地图矢量

在这里插入图片描述

天地图影像

在这里插入图片描述

ArcGIS影像

在这里插入图片描述
如果你觉得本文对你有帮助，不妨点个赞吧~~~

cesium之地图切换展示效果篇.zip
06-19
cesium之地图切换展示效果篇.zip
cesium实现底图和地形动态切换及supermap三维服务加载（官网demo）
08-22
function1：cesium实现天地图影像、矢量动态切换；function2：实现supermap三维地形服务动态加载及卸载；function3：实现supermap倾斜摄像服务动态加载
Cesium 地形加载
最新发布
HGX-DJK
04-20 482
地形贴图（Terrain Textures）是通过将纹理（Texture）图像映射到3D模型表面来提升可视化效果的一种技术。在地理信息系统（GIS）和三维渲染中，地形贴图通常用于模拟地形的外观，如山脉、平原、湖泊等。
Cesium之底图切换
qq_25095477的博客
01-16 1927
在。
cesium切换底图
猪猪侠的博客
03-25 779
cesium底图切换
UPCgiser
07-31 3679
cesium作为三维开源框架，实现底图切换也是很容易的。 let osm = new Cesium.UrlTemplateImageryProvider({ url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali" }); let mapbox = new Ce...
Cesium的学习之路（二）：底图切换
往事随风的博客
11-23 8861
前言： 为什么第一个想到的是这个功能？？ 因为在我看来，所有的gis应用，图层的控制显隐切换，是根本离不开的，也是最基础的。 这一节的实现思路就是： 实现加载天地图影像，天地图矢量，天地图地形图，然后绑定图层切换按钮，实现底图的切换。 一、加载天地图等WMTS图层 在cesium中加载wmts图层需要用到 Cesium 中的 WebMapTileServiceImageryProvider 类，先贴代码，在一 一 解释（加载天地图需要自己申请key） //天地图矢量 //天地图矢量 tha
Cesium实现效果：1、切换底图资源；2、折叠菜单项；3、修改默认视点为北京天安门；4、开启关闭三维在线地形；5、加载离线本地
06-15
1、切换底图资源 2、折叠菜单项 3、修改默认视点为北京天安门 4、开启关闭三维在线地形 5、加载离线本地城市建筑素模(北京、上海或省会城市) 6、修改homeButton的默认返回位置 备注：离线素模数据可以私信获取，数量...
（四）Cesium切换底图部件
a974313302的博客
04-04 382
文件：ChangeMap.js。
使用按钮＜button＞完成Cesium底图切换
wenxinzhu的博客
01-23 740
使用HTML中的标签完成对cesium底图的切换（高德和天地图）
【Cesium学习笔记】一、加载Cesium并更换天地图底图
jg10000119的博客
04-10 2272
本系列为Cesium的学习笔记，本章是Cesium的加载及底图更换
SuperMap、Cesium叠加ArcGIS,高德，谷歌二维，卫星地图实现二三维地图切换
01-03
webGl加载二三维底图实例。可用于super Map二三维一体化实现。 https://mp.csdn.net/postedit/85681487
底图切换_cesium 之地图切换展示效果篇（附源码下载）
weixin_42298415的博客
01-13 1254
前言cesium 官网的api文档介绍地址cesium官网api，里面详细的介绍 cesium 各个类的介绍，还有就是在线例子：cesium 官网在线例子，这个也是学习 cesium 的好素材。内容概览1.基于cesium 实现地图切换展示效果2.源代码 demo 下载本篇实现 cesium 地图切换展示功能，效果图如下：实现思路配置不同类型地图服务MapConfig.mapInitParams ...
cesium 实战记录（一） 底图动态配置，前端实现切换
往事随风的博客
08-05 4519
cesium 实战记录（一） 底图动态配置，前端实现切换
cesium之地图切换展示效果篇
weixin_34409822的博客
06-28 5173
本篇实现cesium地图切换展示功能，效果图如下： 详细的实现过程见：这里  
Cesium入门04-图层变换
weixin_40289902的博客
03-25 2135
之前有发过关于必应图层的显示，那个只是通过申请秘钥的方式来获取图层，这次是引用不同的地图源。 这个文章包含两个内容： 1、小控件的调用 2、关于BaseLayerPicker的图层调用 一、小控件 在最第二章‘构建球体’的最后，有提到一些关于viewer视图下的小框架，例如Geocoder(查询)、BaseLayerPicker(图层更换)、timeline(底部时间轴）之类。这里举个例子： va...
Cesium切换底图及在服务中缓存地图至本地
Alade_cuncun的博客
12-05 2744
最近做一个把cesium要显示的地图缓存到本地的功能，因为大师说好多地图网站对地图的访问是有次数限制的，我又有点写够了前端，主动请缨来写这块的服务（虽然他坚持要用nodejs不让我用java），没做过的功能以及没写过几次的nodejs，做之前在网上搜来搜去相关的内容找到的不多，特在这记录一下实现功能过程中的几个关键点，以便以后再看，以下均为个人理解（或有些胡编乱造），欢迎指正。 1.cesium切换地图 把对应的provider加到addImageryProvider（）里面： let imager
cesium 实战003 -- 地图底图动态配置，前端实现切换时上面叠加的图层不会受到任何影响
weixin_47907069的博客
03-22 736
这个是原来自带的底图，但往往实际工作中用到的底图需要加载项目中自己的底图，其中 terrainProviderViewModels 是控制地形。2、在创建地图的时候，设置默认显示的底图图层、底图数据。1、在创建前内置好底图。
003：vue+cesium 设置skybox透明并添加背景图
大剑师兰特的GIS世界
02-25 2240
第003个本示例的目的是介绍如何在vue+leaflet中设置skybox透明并添加背景图。我们不想要黑乎乎的背景，想自定义一个背景图，然后前面显示地球。
cesium自带的影像图切换功能
11-08
Cesium是一款强大的开源Web地图引擎，它允许开发者创建交互式的3D地球视图和高度详细的地理信息系统应用。其中，Cesium内置了丰富的图像切换功能，主要是通过`ImageryProvider`接口来管理不同的地图源。 你可以轻松地添加多个`ImageryProvider`实例，比如开放街景、卫星图像、地形数据等，并利用`cesium Viewer`组件的`setImageryProvider()`方法动态切换当前显示的地图。用户可以点击菜单、按钮或者其他交互元素来切换不同来源的图像。此外，Cesium还支持自定义提供程序，允许你加载自定义的数据集或者混合多种数据。 以下是简单的示例代码片段： ```javascript // 创建默认的卫星图像提供者 const defaultImagery = new Cesium.CesiumTerrainProvider({ url : 'https://assets.cesium.com/terrain/tilesets/world-tiles.json' }); // 创建自定义地图提供者 const customImagery = new CustomMapProvider(); // 初始化cesium viewer并设置初始提供者 var viewer = new Cesium.Viewer('cesiumContainer', { imageryProvider : defaultImagery, }); // 添加切换函数 function switchImagery(provider) { viewer.setImageryProvider(provider); } // 当需要切换时，调用switchImagery(customImagery)即可 ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值