Cesium地形地貌加载

最新推荐文章于 2023-08-10 11:36:13 发布

VIP文章生活真难

最新推荐文章于 2023-08-10 11:36:13 发布

阅读量370

点赞数

分类专栏： Cesium 文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/anglestar2012/article/details/123503153

版权

地图数据加载使用ImageryProvider

基础环境：Umi环境下的Cesium搭建_生活真难的博客-CSDN博客

1、在线地图数据加载

1.1、加载ArcGIS在线地图数据

效果：

代码：在CesiumMap/index.tsx里面修改代码如下

import { Viewer,ArcGisMapServerImageryProvider} from 'cesium';
import React, { useEffect, useRef } from 'react';

export default function CesiumMap() {
  const cesiumContainer = useRef(null);

  useEffect(() => {
    const esri = new ArcGisMapServerImageryProvider({
      url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    });
    const viewOptions = {
      animation: false,
      baseLayerPicker: false,
      fullscreenButton: false,
      geocoder: false,
      homeButton: false,
      infoBox: false,
      sceneModePicker: false,
      selectionIndicator: false,
      timeline: false,
      navigationHelpButton: false,
      shouldAnimate: false,
      navigationInstructionsInitiallyVisible: false,
      imageryProvider:esri,
    };
    let cesiumViewerOptions={
      ...viewOptions,
    };
    // @ts-ignore
    let viewer = new Viewer(cesiumContainer.current,cesiumViewerOptions);
    viewer.scene.debugShowFramesPerSecond=true;
  },[]);

  return (
    <div ref={cesiumContainer} style={
  {width:"100%",height:"100%"}}>
    </div>
  );
}

1.2、加载高德在线地图数据

效果：

代码：

import { Viewer,ArcGisMapServerImageryProvider,UrlTemplateImageryProvider} from 'cesium';
import React, { useEffect, useRef } from 'react';

export default function CesiumMap() {
  const cesiumContainer = useRef(null);

  useEffect(() => {
    const esri = new ArcGisMapServerImageryProvider({
      url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    });
    const gaode=new UrlTemplateImageryProvider({
      url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    })
    const viewOptions = {
      animation: false,
      baseLayerPicker: false,
      fullscreenButton: false,
      geocoder: false,
      homeButton: false,
      infoBox: false,
      sceneModePicker: false,
      selectionIndicator: false,
      timeline: false,
      navigationHelpButton: false,
      shouldAnimate: false,
      navigationInstructionsInitiallyVisible: false,
      imageryProvider:gaode,
    };
    let cesiumViewerOptions={
      ...viewOptions,
    };
    // @ts-ignore
    let viewer = new Viewer(cesiumContainer.current,cesiumViewerOptions);
    viewer.scene.debugShowFramesPerSecond=true;
  },[]);

  return (
    <div ref={cesiumContainer} style={
  {width:"100%",height:"100%"}}>
    </div>
  );
}