Cesium 加载影像数据

最新推荐文章于 2024-05-14 10:49:40 发布

而又何羡乎

最新推荐文章于 2024-05-14 10:49:40 发布

阅读量3.7k

点赞数 2

分类专栏： Ceisum学习之旅文章标签： django cesium 加载影像 python

本文链接：https://blog.csdn.net/qq_44285092/article/details/119743212

版权

Ceisum学习之旅专栏收录该内容

7 篇文章 11 订阅

订阅专栏

【主要参考博客链接】
【常见地图服务WMS、WFS、WCS、TMS、WMTS】

一、Django环境准备

# 首先创建一个Django项目，命名随意，配置好静态文件和媒体文件即可
django-admin startprroject name  # 创建一个名为name的项目
# 创建一个名为 appname 的应用，需要cd 进入项目所在文件夹，并确认有 manage.py
python manage.py startapp appname

""" 配置静态和媒体文件 settings.py 中添加 """
# 静态文件主要存放 CSS、JS、图片等
STATIC_URL = '/static/'
# 本地开发模式，目前使用本地模式进行学习
STATICFILES_DIRS = [BASE_DIR/"static"] 
# 上线模式改为 STATIC_ROOT = BASE_DIR/"static"
# 并执行python manage.py collectstatic，避免后台静态文件丢失

# 媒体文件存放模型数据等
MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR/"media"

"""项目urls.py中"""
# 添加媒体文件的路由，即可实现链接访问
from django.conf.urls.static import static
if settings.DEBUG or True:
	urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

# 然后就是配好相应的视图即可

准备好后，GitHub下载【GIS李胜】的示例，将相应的文件放在相应的位置即可，如图：

在这里插入图片描述

二、Django 加载影像数据

2.1 Cesium 默认 ion 影像

createWorldImagery 方法，无必选参数，默认为带有道路覆盖物的航空影像

以加载Cesium默认ion的默认全局基础图像图层影像数据为例，可分为以下五个步骤：对于不同类型的影像加载方法，只需要更改step4 即可。记得连网哦

// step1 声明一个Cesium查看器，一般仅有一个
var viewer = new Cesium.Viewer("cesiumContainer");
// step2 声明一个影响对象
var imageryLayers = viewer.imageryLayers; 
// step3 删除默认图层
imageryLayers.remove(viewer.imageryLayers.get(0));
// step4 定义一个添加的目标影像
// 1、createWorldImagery。为ion的默认全局基础图像图层（当前为Bing Maps）创建一个 IonImageryProvider 实例。
var styles = [
        Cesium.IonWorldImageryStyle.AERIAL, // 航空影像
        Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS, // 带有道路覆盖物的航空影像
        Cesium.IonWorldImageryStyle.ROAD, // 没有其他图像的道路
    ];
var imageryProvider = Cesium.createWorldImagery({
        style: styles[1], // default: IonWorldImageryStyle
    });
// step5 加载要添加的目标影像
imageryLayers.addImageryProvider(imageryProvider); // 添加影像

在这里插入图片描述

2.2 Cesium Ion 在线服务影像

IonImageryProvider 方法参数：* 表示必选参数

*assetId:number
其余可选详见文档

添加在线影像：https://cesium.com/ion/assetdepot/3954，不需要token也可以

在这里插入图片描述

查询assetId，可用的有：3954、3845、3813、3812、2、3、4

3954：Sentinel-2 整个世界的无云图像，缩放级别为 13
3845：2004 年 7 月的地球 500m 分辨率图
3813：Natural Earth II 是一个影像图层，可在不受人类影响的理想化环境中显示世界
3812：夜晚地球，也称为黑色大理石，是美国宇航局发布的分辨率为 500 米的全球
2：必应地图航拍
3：Bing 地图航拍带标签
4：必应地图路

在这里插入图片描述

示例代码

// 6、IonImageryProvider。Cesium Ion 在线服务
    // Add Sentinel-2 imagery
    imageryLayers.addImageryProvider(
      new Cesium.IonImageryProvider({ assetId: 3 })
    );

在这里插入图片描述

2.3 ArcGIS 影像

ArcGisMapServerImageryProvider方法参数：* 表示必选参数

*url： ArcGIS MapServer服务的网址
其余详见文档

var arcgisProvider = new Cesium.ArcGisMapServerImageryProvider({url: 
 "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",});

在这里插入图片描述

2.4 Bing 影像

BingMapsImageryProvider参数：* 表示必选参数

*url：“https://dev.virtualearth.net”，在线影像服务链接
*key：token 【Bing token申请地址】

// 3、BingMapsImageryProvider。Bing地图影像，可以指定mapStyle，详见BingMapsStyle类
    var bingStyle = [
      Cesium.BingMapsStyle.AERIAL, // 航空影像
      Cesium.BingMapsStyle.AERIAL_WITH_LABELS, // 带有道路叠加层的航拍图像
      Cesium.BingMapsStyle.AERIAL_WITH_LABELS_ON_DEMAND,// 带有道路叠加层的航拍图像
      Cesium.BingMapsStyle.ROAD, // 没有附加图像的道路
      Cesium.BingMapsStyle.ROAD_ON_DEMAND, // 没有附加图像的道路
      Cesium.BingMapsStyle.CANVAS_DARK, // 路线图的深色版本
      Cesium.BingMapsStyle.CANVAS_LIGHT, // 路线图的较轻版本
      Cesium.BingMapsStyle.CANVAS_GRAY,// 路线图的灰度版本
      Cesium.BingMapsStyle.ORDNANCE_SURVEY, // 军械测量图像。 此图像仅在英国伦敦地区可见
      Cesium.BingMapsStyle.COLLINS_BART, // 柯林斯巴特图像
    ];
    var bingMapProvider = new Cesium.BingMapsImageryProvider({
      url: "https://dev.virtualearth.net", 
      key: "your token",
      mapStyle: bingStyle[1],
    });

在这里插入图片描述

2.5 MapBox 影像

MapboxImageryProvider参数：* 表示必选参数

*mapzId：Mapbox 地图 ID
*accessToken：图像的公共访问令牌。
获取mapId链接

在这里插入图片描述

accessToken 申请链接

在这里插入图片描述

代码示例

imageryLayers.addImageryProvider(
      new Cesium.MapboxImageryProvider({
        mapId: "mapbox.mapbox-terrain-v2",
  accessToken:
"pk.eyJ1IjoicWhtYXBib3giLCJhIjoiY2tvcWw3bGozMHdkdTJ2cDl2amZwbnZrbSJ9.1PqEMGwDUBfIMbvVp3MNeQ",
// 使用默认的Token
      })
    );

在这里插入图片描述

使用 styleId来加载，获取styleId链接

在这里插入图片描述

// 8、MapboxStyleImageryProvider,根据styleId指定地图风格

    imageryLayers.addImageryProvider(
      new Cesium.MapboxStyleImageryProvider({
        styleId: 'satellite-v9',
        accessToken:
"pk.eyJ1IjoibHM4NzAwNjEwMTEiLCJhIjoiY2tqYXZlZ2JrMDI5bTJzcDJmdDNteGhsNyJ9.0wTn4B1ce9Q4U5GnPso5iA",
      })
    );

在这里插入图片描述

2.6 OSM 【openstreetmap】影像服务

OpenStreetMapImageryProvider方法无必选参数，默认url链接为https://a.tile.openstreetmap.org

// 9、OpenStreetMapImageryProvider。OSM影像服务，根据不同的url选择不同的风格
    var osm = new Cesium.OpenStreetMapImageryProvider({
      url: "https://a.tile.openstreetmap.org/",
      minimumLevel: 0, // 图像支持最小级别
      maximumLevel: 18, // 未定义则无限制
      fileExtension: "png",// 服务器上图像的文件扩展名，默认为png
    });

在这里插入图片描述

2.7 【本地服务器】单张图片的影像

SingleTileImageryProvider参数：* 表示必选参数

url：图片的url，即本地服务器能够访问到图片的链接

在这里插入图片描述

// 10、SingleTileImageryProvider。单张图片的影像服务，适合离线数据或对影像数据要求并不高的场景下
    var imagelayer = new Cesium.SingleTileImageryProvider({
      url: "/static/images/worldimage.jpg", // 全路径或者静态文件的配置，媒体文件中也行
    });

在这里插入图片描述

2.8 【本地服务器】TMS（多图）影像服务

TileMapServiceImageryProvider参数：* 表示必选参数

*url:服务器上图像图块的路径

在这里插入图片描述

// 12、TileMapServiceImageryProvider。访问瓦片图的Rest接口。瓦片图被转换为MapTiler或GDAL2Tiles.
    // 看文档是根据MapTiler规范，貌似是可以自己下载瓦片，发布服务，类似ArcGIS影像服务的过程
    var imagelayer = new Cesium.TileMapServiceImageryProvider({
      url: "/static/images/cesium_maptiler/Cesium_Logo_Color", // 服务器上图像图块的路径
      maximumLevel: 8,
    });

在这里插入图片描述

2.9 指定URL模板请求图块来提供图像

可用于加载国内的高德，腾讯等影像服务，url都是一个固定的规范，都可以通过该Provider轻松实现。UrlTemplateImageryProvider，具体的参考官网API吧，后面按需再补充。

tms 影像服务，其它还有几个服务如wms等按需自行查看官网

var imageryLayers = viewer.imageryLayers;
    imageryLayers.remove(imageryLayers.get(0));
    var tms = new Cesium.UrlTemplateImageryProvider({
        url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg',
        credit: '© Analytical Graphics, Inc.',
        tilingScheme: new Cesium.GeographicTilingScheme(),
        maximumLevel: 5
    });
    imageryLayers.addImageryProvider(tms);

在这里插入图片描述

WebMapServiceImageryProvider 参数：* 表示必选参数

*url：WMS 服务的 URL，与 UrlTemplateImageryProvider 相同
*layers：要包含的层，多个以逗号分隔

WMTS

WebMapTileServiceImageryProvider 参数

三、调试方法

3.1 添加格网

GridImageryProvider 生成格网方法参数详解，在每个具有可控制背景和辉光的图块上绘制线框网格。对于自定义渲染效果或调试地形可能很有用

Name	类型	属性	默认	描述
`tilingScheme`	平铺方案	<可选>	new GeographicTilingScheme()	为其绘制切片的切片方案。
`ellipsoid`	椭球体	<可选>		椭球体。如果指定了 tilingScheme，此参数将被忽略，而使用平铺方案的椭球体。如果两者都不是指定参数，则使用 WGS84 椭球。
`cells`	数字	<可选>	8	网格单元的数量。
`color`	颜色	<可选>	颜色(1.0, 1.0, 1.0, 0.4)	绘制网格线的颜色。
`glowColor`	颜色	<可选>	颜色(0.0, 1.0, 0.0, 0.05)	为网格线绘制发光的颜色。
`glowWidth`	数字	<可选>	6	用于渲染线条发光效果的线条宽度。
`backgroundColor`	颜色	<可选>	颜色(0.0, 0.5, 0.0, 0.2)	背景填充颜色。
`tileWidth`	数字	<可选>	256	用于详细级别选择目的的图块宽度。
`tileHeight`	数字	<可选>	256	用于细节层次选择目的的图块高度。
`canvasSize`	数字	<可选>	256	用于渲染的画布大小。

 // 5、GridImageryProvider。展示内部渲染网格划分情况，了解每个瓦片的精细度
    var arcgisProvider = new Cesium.ArcGisMapServerImageryProvider({
      url:
        "https://sampleserver6.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer",
    });
     
    imageryLayers.addImageryProvider(arcgisProvider);
    var gridImagery = new Cesium.GridImageryProvider();
    // 添加格网
    var gridImageryLayer = imageryLayers.addImageryProvider(gridImagery);
    imageryLayers.raiseToTop(gridImageryLayer); //将图层置顶，才能看见

在这里插入图片描述

3.2 平铺坐标

TileCoordinatesImageryProvider，用于调试地形和图像渲染问题

var arcgisProvider = new Cesium.ArcGisMapServerImageryProvider({
      url:
        "https://sampleserver6.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer",
    });
    imageryLayers.addImageryProvider(arcgisProvider);

    var gridImagery = new Cesium.GridImageryProvider();
    imageryLayers.addImageryProvider(gridImagery);

    var tileCoordinates = new Cesium.TileCoordinatesImageryProvider();
    var tileCoordinatesLayer = imageryLayers.addImageryProvider(tileCoordinates);
    var gridImagery = new Cesium.GridImageryProvider();
    // 添加格网
    var gridImageryLayer = imageryLayers.addImageryProvider(gridImagery);
    imageryLayers.raiseToTop(tileCoordinatesLayer); //将图层置顶

在这里插入图片描述

四、总结

有关影像的所有方法
step1 声明一个Cesium查看器，一般仅有一个
step2 声明一个影像对象
step3 删除默认图层
step4 定义一个添加的目标影像
step5 加载要添加的目标影像
step6 添加格网等

而又何羡乎

关注

2
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
0
评论
Cesium 加载影像数据

一、Django环境准备# 首先创建一个Django项目，命名随意，配置好静态文件和媒体文件即可django-admin startprroject name # 创建一个名为name的项目# 创建一个名为 appname 的应用，需要cd 进入项目所在文件夹，并确认有 manage.pypython manage.py startapp appname""" 配置静态和媒体文件 settings.py 中添加 """# 静态文件主要存放 CSS、JS、图片等STATIC_URL = '/
复制链接

扫一扫