Cesium底图切换实现

lyliiyong

已于 2024-04-25 10:57:01 修改

阅读量370

点赞数 3

分类专栏： WebGIS 文章标签： typescript node.js react.js reactjs es6 前端框架

于 2024-04-18 17:32:35 首次发布

本文链接：https://blog.csdn.net/Liyong_liyong/article/details/137929244

版权

WebGIS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

创建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.Cartographic.fromDegrees(105, 30, 12000000),
      // 罗盘
      enableCompass: true,
      // 缩放控件
      enableZoomControls: true,
      // 距离图例
      enableDistanceLegend: true,
      // 指南针外环
      enableCompassOuterRing: true
    };
    // @ts-ignore
    new CesiumNavigation(viewer, options);
    dispatch(setCesiumViewer(viewer));
  };

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

export default CreateViewer;

设置并添加底图

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;