【cesium-1】cesium地形、地图加载

WXG1011

已于 2023-12-26 09:25:48 修改

阅读量1.6k

点赞数 2

分类专栏： GIS中心文章标签： GIS

于 2023-12-06 10:57:17 首次发布

本文链接：https://blog.csdn.net/WXG1011/article/details/134822764

版权

GIS中心专栏收录该内容

18 篇文章 5 订阅

订阅专栏

有段时间自学了cesium，这里记录一下自学过程，希望在所需之时查阅~~

基础开发环境配置

环境：VS code，cesium：1.112

1、cesium源码包下载与环境配置

源码包下载：Cesium: The Platform for 3D Geospatial ，Platform-Dowmloads

下载的包里包括 Cesium API 源代码 Source 文件夹，以及编译后的 Build 文件夹，还有Demo、API文档、沙盒等等，我们只需要 Build 文件夹下的 Cesium 这个文件夹，它是编译后 Cesium 包的正式版本，开发的话只需要这个就OK。

VS code配置所需插件：

1）ESLint；代码检查

2）Chinese（Simplified）Language Pack for vs code；

3）open in browser；用浏览器打开

4）Live Server。用服务打开

环境已经配置好了，接下来创建第一个小球吧~~

创建第一个Cesium球

新建html文件

小技巧：新建一个html文件，输入！创建html模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../Cesium.js"></script>
    <style>
        @import url(../Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
    </style>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
    </script>
</body>
</html>

运行：

打开API文档：

在源码目录下index.html文件，右击open with Live server开启本地服务，点击Documentation即可打开cesium API文档。

Cesium常用类介绍

1、scene场景类

<script>
     var viewer = new Cesium.Viewer('cesiumContainer',{
         animation:false,
         timeline:false
     });
     viewer.scene.camera.setView({
         destination:Cesium.Cartesian3.fromDegrees(116.38,39.9,1500)
     })
 </script>

在开发调试模式下查询某视角信息：

2、Entity实体类

Entity在使用中主要用于加载实体模型、几何图形，对其进行样式设置、动态修改等。

<script>
     var viewer = new Cesium.Viewer('cesiumContainer',{
         animation:false,
         timeline:false
     });
       
     const entity = viewer.entities.add({
         position:Cesium.Cartesian3.fromDegrees(116.39,38.9,400),
         point:{
             pixelSize:100,
             color:new Cesium.Color(0,1,0,1)
         }
     })
     viewer.trackedEntity = entity;
 </script>

3、DataSourceCollection类

用于加载矢量数据，支持加载矢量数集和外部文件的调用，有CzmlDataSource、kmlDataSource、GeoJsonDataSource三种调用方法。

在线工具推荐：

JSON在线解析及格式化：https://www.json.cn/
在线生成 GeoJSON：http://geojson.io/
shp数据转 GeoJSON 和 TopoJSON：http://mapshaper.org/
GeoJson和TopopJson在线转换：http://jeffpaine.github.io/geojson-topojson/

<script>
     var viewer = new Cesium.Viewer('cesiumContainer',{
         animation:false,
         timeline:false
     });
        
     viewer.dataSources.add(
         Cesium.GeoJsonDataSource.load(
             //记得将路径更改为自己的数据路径
             "../testdata/ne_10m_us_states.topojson"
         )    
     )
</script>

Cesium地图、地形加载

1、加载地形

Cesium.Ion.defaultAccessToken ='';
        
const viewer = new Cesium.Viewer('cesiumContainer',{
    baseLayerPicker:false,
    terrainProvider: await Cesium.createWorldTerrainAsync({
        requestWaterMask: true,
        requestVertexNormals: true
    }),
});

Cesium.Ion.defaultAccessToken ='**'
        
const viewer = new Cesium.Viewer("cesiumContainer",{
    baseLayerPicker:false,           
});

viewer.scene.setTerrain(
    new Cesium.Terrain(Cesium.CesiumTerrainProvider.fromIonAssetId(1))
);

2、加载地图

1）加载cesium在线资源

Cesium.Ion.defaultAccessToken ='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZTBmMjMwZC05OTlhLTQwZTYtYjU2ZC0zY2MzZWU3NzQ5NWMiLCJpZCI6NTA1OTEsImlhdCI6MTYxNzc2MTM3Nn0.lSz_1-ihLGeFwu9phZroo_hGVY68QRZfi62J03qu0qM'
const viewer = new Cesium.Viewer("cesiumContainer",{
    baseLayerPicker:false,           
})
const layer = viewer.imageryLayers.addImageryProvider(
    await Cesium.IonImageryProvider.fromAssetId(3812)
);

2）加载ArcGIS地图服务

const esri = await Cesium.ArcGisMapServerImageryProvider.fromUrl('https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer')
const viewer = new Cesium.Viewer("cesiumContainer",{
    baseLayerPicker:false,
})
viewer.imageryLayers.addImageryProvider(esri);

3）加载百度地图

var gaodeImageryProvider = new Cesium.UrlTemplateImageryProvider({
     url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
     maximumLevel: 18,
     minimumLevel: 1,
     credit: 'Amap'
});

var viewer = new Cesium.Viewer("cesiumContainer",{
    baseLayerPicker:false,
})
      
viewer.imageryLayers.addImageryProvider(gaodeImageryProvider);

参考链接 Cesium入门之六：Cesium加载影像图层(ArcGIS、Bing、Mapbox、高德地图、腾讯地图、天地图等各类影像图)_cesium天地图-CSDN博客

4、加载倾斜摄像模型