Cesium加载天地图

最新推荐文章于 2024-07-18 17:31:17 发布
最新推荐文章于 2024-07-18 17:31:17 发布
阅读量675 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyxkgc/article/details/130993368
版权

天地图

天地图官网网址，申请key。个人申请或企业申请。
在这里插入图片描述

加载墨卡托投影投影

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // 首先得去网站申请一个token，如果你要用cesium 自带的影像和OSM模型的话: https://cesium.com/ion/tokens.
    // 用自己的token 替代`your_access_token` .
    Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4ZjNhMDU4NC0wNWMxLTRhNmEtYWI4Yy01M2EzMzY2NTY0ZTYiLCJpZCI6MTkzMTksInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzUzNTUxMzJ9.zO0b6MjVkjfRDD9bHG1ffvTVbTA0WQ1JU16X9cndyv0";;

    // 初始化一个id为 `cesiumContainer`的HTML元素作为我们的容器，这里不传ID传DO .
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });    
    // 加载OSM建筑，也就是一些城市的白膜建筑，只有形状没有纹理的模型.
    // const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   
    // 所有的视图都在viewer中，后期的教程也基本围绕viewer展开，这里我们调用相机的fltTo函数，输入经纬度和高度，俯仰角等，需要注意的是
    // 经纬度需要我们转换成cesium的Cartesian3，同理heading，pitch也需要从角度转成弧度，否则你会看到奇奇怪怪的视角.
    viewer.camera.flyTo({
      destination : Cesium.Cartesian3.fromDegrees(121.67754, 29.75614, 60000),
    });

    var TDU_Key = "f0175927031c1e12cb804b0c3b8cc***"//天地图申请的**

	   //在线天地图影像服务地址(墨卡托投影)
	        var TDT_IMG_W = "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=" + TDU_Key;
	        //在线天地图矢量地图服务(墨卡托投影) 
	        var TDT_VEC_W = "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=" + TDU_Key;
	        //在线天地图影像中文标记服务(墨卡托投影)  
	        var TDT_CIA_W = "http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
	            "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
	            "&style=default.jpg&tk=" + TDU_Key
	        //在线天地图矢量中文标记服务(墨卡托投影)            
	        var TDT_CVA_W = "http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
	            "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
	            "&style=default.jpg&tk=" + TDU_Key;
	 
	
	 
	        let Img = new Cesium.WebMapTileServiceImageryProvider({   //调用影响中文服务
	            url: TDT_VEC_W,//url地址，换影像还是矢量，随便你喜欢
	            layer: "img_w",    //WMTS请求的层名称
	            style: "default",//WMTS请求的样式名称
	            format: "tiles",//MIME类型，用于从服务器检索图像
	            tileMatrixSetID: "GoogleMapsCompatible",//    用于WMTS请求的TileMatrixSet的标识符
	            subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地图8个服务器
	            minimumLevel: 0,//最小层级
	            maximumLevel: 18,//最大层级
	        })
	 
	        viewer.imageryLayers.addImageryProvider(Img)//添加到cesium图层上
	 
	 
	        let cia = new Cesium.WebMapTileServiceImageryProvider({   //调用影响中文注记服务
	            url: TDT_CVA_W,
	            layer: "cia_w",
	            style: "default",
	            format: "tiles",
	            tileMatrixSetID: "GoogleMapsCompatible",
	            subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地图8个服务器
	            minimumLevel: 0,
	            maximumLevel: 18,
	        })
	 
	        // viewer.imageryLayers.addImageryProvider(cia)//添加到cesium图层上
	        viewer.scene.globe.depthTestAgainstTerrain = !0;
	 
	        // 没有影像图层时地球的底色
	        viewer.scene.globe.baseColor = Cesium.Color.BLACK;
	        // viewer.camera.flyTo({
	        //     destination: new Cesium.Cartesian3.fromDegrees(116.435314, 22.960521, 2000.0),
	        //     duration:2
	        // });
	
	
  </script>
 </div>
</body>
</html>

加载经纬度投影

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // 首先得去网站申请一个token，如果你要用cesium 自带的影像和OSM模型的话: https://cesium.com/ion/tokens.
    // 用自己的token 替代`your_access_token` .
    Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4ZjNhMDU4NC0wNWMxLTRhNmEtYWI4Yy01M2EzMzY2NTY0ZTYiLCJpZCI6MTkzMTksInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzUzNTUxMzJ9.zO0b6MjVkjfRDD9bHG1ffvTVbTA0WQ1JU16X9cndyv0";;

    // 初始化一个id为 `cesiumContainer`的HTML元素作为我们的容器，这里不传ID传DO .
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });    
    // 加载OSM建筑，也就是一些城市的白膜建筑，只有形状没有纹理的模型.
    // const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   
    // 所有的视图都在viewer中，后期的教程也基本围绕viewer展开，这里我们调用相机的fltTo函数，输入经纬度和高度，俯仰角等，需要注意的是
    // 经纬度需要我们转换成cesium的Cartesian3，同理heading，pitch也需要从角度转成弧度，否则你会看到奇奇怪怪的视角.
    viewer.camera.flyTo({
      destination : Cesium.Cartesian3.fromDegrees(121.67754, 29.75614, 60000),
    });

    var TDU_Key = "f0175927031c1e12cb804b0c3b8c****"//天地图申请的**

			
	viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
	   url: "http://t0.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
	          TDU_Key,
	        format: 'tiles',
	   tileMatrixSetID: 'c',
	   tilingScheme: new Cesium.GeographicTilingScheme(),
	   tileMatrixLabels: ['1', '2', '3', '4',
	   '5', '6', '7', '8', '9', '10','11',
	   '12', '13', '14', '15', '16', '17', '18'],
	   layer: "tdtImgAnnoLayer",
	   style: "default",
	   show: false
	 }));
	 
	 // viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
	 //    url: "http://t0.tianditu.gov.cn/cva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
	 //      TDU_Key,
	 //      format: 'tiles',
	 //    tileMatrixSetID: 'c',
	 //    tilingScheme: new Cesium.GeographicTilingScheme(),
	 //    tileMatrixLabels: ['1', '2', '3', '4',
	 //    '5', '6', '7', '8', '9', '10','11',
	 //    '12', '13', '14', '15', '16', '17', '18'],
	 //    layer: "tdtImgAnnoLayer",
	 //    style: "default",
	 //    show: false
	 //  }));
	 
	 
  </script>
 </div>
</body>
</html>

经纬度投影为例，如何使用官网图层，加载矢量底图
在这里插入图片描述

 http://t0.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=

在这里插入图片描述
把img_c 更换成vec_c ; img更换成vec ,即可。

九霄123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2.（cesium篇）cesium接入百度地图
地图之家
05-20 9086
2.（cesium篇）cesium接入百度地图
70.（cesium篇）cesium接入天地图影像与注记（经纬度）.zip
12-22
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122077463
cesium加载高层级离线影像地图瓦片（天地图、19级Arcgis）
OuNuo5280的博客
04-17 4050
下载高清离线地图瓦片，并cesium加载
cesium加载天地图
最新发布
半路转行的Giser
07-18 740
天地图提供了经纬度投影和球面墨卡托投影两种服务，该示例使用了球面墨卡托投影服务。其中的切片方案tilingScheme使用cesium提供的web墨卡托切片方案new Cesium.WebMercatorTilingScheme()在地图服务简介中，提示要想使用底图服务，需要申请key，点击申请key，跳转到如下页面。天地图地图服务采用OGC WMTS标准，可以使用下面两个类来实现底图的加载。在开发资源中找到地图API,可以查看到天地图提供的底图服务资源。要想使用天地图提供的地图资源，需要登陆。
Cesium--加载天地图
JessicaLi的博客
05-09 984
背景：vue-admin-temlate + cesium +天地图。1,天地图使用方法（点击开发资源即可看到此页面）最要为了获取key （后面使用是token）步骤一：申请成为天地图开发者，创建应用。步骤二：cesium加载天地图。2,点击控制台-登录账号。
cesium加载天地图、高德地图以及水经注导出的瓦片地图
02-18
在本文中，我们将深入探讨如何使用Cesium JavaScript库来加载天地图、高德地图以及水经注导出的瓦片地图。Cesium是一款强大的开源Web GIS框架，它基于JavaScript和WebGL，能够实现3D地球可视化。对于初学者来说，...
vue3+ts+vite+cesium 加载天地图影像、标注等多服务器随机加载切换版本
04-02
示例中的底图和注记图层来自中国的在线地图服务平台天地图，提供丰富的地理信息。代码禁用了全屏按钮、地理编码器等，隐藏了版权信息，以优化用户体验。 Vue.js 是一个流行的 JavaScript 前端框架，可以帮助开发者...
Cesium 实战 00 - Cesium 加载天地图影像图示例
linzi19900517的博客
10-10 2741
Cesium 加载天地图资源。
slider.rar cesium加载天地图实现地图卷帘
07-21
在这个主题中，我们将深入探讨如何利用Cesium加载天地图，并实现地图卷帘功能。 首先，我们要明白“天地图”是中国的一个国家级地理信息公共服务平台，它提供了丰富的地图服务，包括基础地图、地形数据、卫星影像等...
cesium加载天地图矢量地图设置为暗黑系风格地图【独门秘方】
福尔摩雷的博客
03-24 7292
const imageryProvider = new Cesium.WebMapTileServiceImageryProvider({ url: '天地图矢量地图url', subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], layer: name, style: 'default', format: 'image/jpeg', tileMatrixSetID: 'GoogleMapsCompatible', maxi.
三维地图Cesium加载天地图
On the way
06-29 5355
1、首先去天地图官网申请key码，http://lbs.tianditu.gov.cn/server/MapService.html 2、下载Cesium静态资源包文件，如图 3、引入并加载 <div class="background" > <div id="cesiumContainer"></div> </div> initMap(){ var token = '7b56038c276128a86a5b946404bf
cesium中添加天地图底图
tjx1997的博客
08-16 2346
天地图主要使用的是WGS84坐标系，并提供了矢量、影像、地形等多种底图。可以利用cesium的WebMapTileServiceImageryProvider完成天地图底图的加载。
cesium加载天地图、OSM、谷歌底图
qq_44897914的博客
07-10 563
以上示例是加载矢量底图，若要加载影像或者其他只需要更换相应的url，在WebMapTileServiceImageryProvider中还要更改layer参数。url中’‘vec_w’，一些其他风格，基于CRAT渲染，两种方法效果差别不大。有两种方法加载天地图分别是。对应投影样式，具体可看。还要谷歌的一些卫星底图。
Cesium 加载天地图
weixin_34090562的博客
06-13 490
网上有很多 就是没说 加载天地图需要开发者秘钥，这个需要去天地图官网申请一个就可以了，下面贴上源码 还有就是Cesium也是需要token的哈 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=...
如何使用cesium加载天地图影像服务
03-22
您可以使用以下代码来使用Cesium加载天地图影像服务： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var imageryProvider = new Cesium.WebMapTileServiceImageryProvider({ url: 'http://t0.tianditu.gov.cn/img_w/wmts', layer: 'img', style: 'default', format: 'tiles', tileMatrixSetID: 'w', maximumLevel: 18, credit: new Cesium.Credit('天地图影像服务'), subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'] }); viewer.imageryLayers.addImageryProvider(imageryProvider); ``` 这将在Cesium Viewer中加载天地图影像服务。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值