Cesium地形地貌加载

最新推荐文章于 2025-10-11 15:20:13 发布

原创最新推荐文章于 2025-10-11 15:20:13 发布 · 619 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js #前端

Cesium 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了在Cesium中使用ImageryProvider加载在线和离线地图数据，包括ArcGIS、高德、CesiumION地图及地形数据。详细讲解了加载流程，如申请CesiumION的key，使用CesiumLab处理和加载影像、地形数据，以及配置nginx代理服务器等。

地图数据加载使用ImageryProvider

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

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>
  );
}

1.3、加载CesiumION地图数据

CesiumION需要个人登录Cesium ion环境申请key

步骤：

1、切换标签栏至Access Tokens，默认有一个default token.

2、选中default token栏查看ION的key

3、切换至Asset Depot标签添加到自己的My Assets里面，点击+号即可添加

4、切换至My Assets,查看加载代码

5、代码

Ion.defaultAccessToken="your token"替换为步骤二中的token

import { Viewer,ArcGisMapServerImageryProvider,UrlTemplateImageryProvider,Ion,IonImageryProvider} from 'cesium';
import React, { useEffect, useRef } from 'react';
Ion.defaultAccessToken="your token"
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 ionLayer=new IonImageryProvider({ assetId: 3 })
    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:ionLayer,
    };
    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>
  );
}

6、效果

1.4、加载在线地形数据

内容和1.3步骤类似，加载Cesium World Terrain

import { Viewer,ArcGisMapServerImageryProvider,UrlTemplateImageryProvider,
  Ion,IonImageryProvider,CesiumTerrainProvider,IonResource} from 'cesium';
import React, { useEffect, useRef } from 'react';
Ion.defaultAccessToken="your token"
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 ionLayer=new IonImageryProvider({ assetId: 3 })
    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:ionLayer,
      terrainProvider: new CesiumTerrainProvider({
        url: IonResource.fromAssetId(1),
      })
    };
    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>
  );
}

效果：

2、离线地图数据加载

数据处理工具CesiumLab,如需使用请前往Cesium实验室官网下载

2.1、影像数据处理以及加载流程

1、数据说明：最好是2000、84坐标系下的影像数据，可以是2000、84的投影数据

2、切换至影像切片工具

3、下载nginx作为代理服务器,修改conf/nginx.conf

注意：配置跨域和端口


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8081;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
           add_header Access-Control-Allow-Origin *;
           add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
           add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

4、将切割好的数据扔到html下

5、代码：

import {
  Viewer,
  ArcGisMapServerImageryProvider,
  UrlTemplateImageryProvider,
  ImageryLayer,
} 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 lixiandom=new UrlTemplateImageryProvider({
      url: "http://localhost:8081/dom/{z}/{x}/{y}.png",
    })
    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);
    let imageLayer=new ImageryLayer(lixiandom);
    viewer.imageryLayers.add(imageLayer);
    viewer.scene.debugShowFramesPerSecond=true;
  },[]);

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

6、效果

2.2、地形数据处理以及加载流程

数据下载：地理空间数据云，可以下载30米高程

1、地形切片设置

2、切割后结果，并拷贝至html目录下

4、代码

import {
  Viewer,
  ArcGisMapServerImageryProvider,
  UrlTemplateImageryProvider,
  ImageryLayer,
  CesiumTerrainProvider, Cartesian3,
} 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 lixiandom=new UrlTemplateImageryProvider({
      url: "http://localhost:8081/dom/{z}/{x}/{y}.png",
      maximumLevel:18,
    })
    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,
      terrainProvider:new CesiumTerrainProvider({
        url:"http://localhost:8081/dem/"
      }),
    };
    let cesiumViewerOptions={
      ...viewOptions,
    };
    // @ts-ignore
    let viewer = new Viewer(cesiumContainer.current,cesiumViewerOptions);
    let imageLayer=new ImageryLayer(lixiandom);
    viewer.imageryLayers.add(imageLayer);
    viewer.scene.debugShowFramesPerSecond=true;
   
  },[]);

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

5、效果如下