Cesium加载天地图在线卫星切片，中文标注，防止视角钻入底下，加载超图在线地形服务

最新推荐文章于 2024-06-26 09:48:16 发布
最新推荐文章于 2024-06-26 09:48:16 发布
阅读量4.3k 收藏 9
点赞数 1
分类专栏： Cesium 文章标签： Cesium  天地图切片服务 地形服务 视角入底下
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo_buzhidao/article/details/84141161
版权

本代码展示加载天地图服务卫星和中文标志

加载超图地形服务

解决视角钻入底下的问题

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超图加载在线地形数据stk</title>
		<link rel="stylesheet" href="../Build/Widgets/widgets.css" />
		<script type="text/javascript" src="../Build/Cesium.js" ></script>
	</head>
	<body>
		<div  id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div>
	</body>
	<script>
	    var url="https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path";
		var vtxfTerrainProvider = new Cesium.CesiumTerrainProvider({
        url : url,
        requestVertexNormals : true
        });
	    var viewer = new Cesium.Viewer('cesiumContainer', {
	    terrainProvider: vtxfTerrainProvider,
	    imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
				          url: 'http://t0.tianditu.com/img_w/wmts?',
				          layer: 'img',
				          style: 'default',
				          format: 'tiles',
				          tileMatrixSetID: 'w',
				          credit: new Cesium.Credit('天地图全球影像服务'),
				          maximumLevel: 18
		 })
		});
			  //全球影像中文注记服务
	   	viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
		    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
		    layer: "tdtAnnoLayer",
		    style: "default",
		    format: "image/jpeg",
		    tileMatrixSetID: "GoogleMapsCompatible",
		    show: false
		}));
		
		viewer.scene.preRender.addEventListener(this.undergroundMode);
		  //禁止摄像头入地
	    function  undergroundMode() {
	      let { viewer } = this;
	      if (viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
	        //地下浏览
	        viewer.camera._suspendTerrainAdjustment = false;
	        viewer.scene.screenSpaceCameraController.enableCollisionDetection = true;
	        viewer.camera._adjustHeightForTerrain();
	      }
	    },
	</script>
</html>

在这里插入图片描述

一个修理地球的人
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
104.（cesium篇）cesium卫星轨道模拟
GIS之家家长
04-12 374
104.（cesium篇）cesium卫星轨道模拟
Cesium使用鼠标中键，视角不进入地下
07-31
使用Cesium的同志们，肯定会被拖动鼠标中键时，一不小心视角就会进入地下的问题所困扰，因为Cesium地球引擎并没有处理这个问题。这个问题已经解决，希望能给大家带来帮助
CesiumJS加载天地图数据后，可以实现什么效果？
最新发布
贝格前端工场的博客
06-26 882
说起地图，大家耳熟能详的百度地图、高德地图、腾讯地图等，由于授权的原因，使用起来心惊胆战的，而天地图就没有这方面的困扰，本文介绍下如何在cesium中时候用天地图数据，已经能够实现哪些交互效果。
Cesium加载天地图中文标注服务和谷歌影像服务
wo_buzhidao的博客
11-22 2971
Cesium加载天地图中文标注服务和谷歌影像服务直接上代码 自从天地图使用token之后，之前写的Cesium添加天地图图层服务的就无法使用了，所以重新写一个可以使用的。 直接上代码 // 关闭全球光照 --默认为关闭 this.viewer.scene.globe.enableLighting = false; //删除其他栅格图层 this.viewer.im...
cesium添加高德路网中文注记图及高德在线地图介绍
专注GIS开发
02-17 5096
cesium添加高德路网中文注记及高德在线地图介绍
Cesium--加载天地图
JessicaLi的博客
05-09 850
背景：vue-admin-temlate + cesium +天地图。1,天地图使用方法（点击开发资源即可看到此页面）最要为了获取key （后面使用是token）步骤一：申请成为天地图开发者，创建应用。步骤二：cesium加载天地图。2,点击控制台-登录账号。
Cesium禁止相机进入地下(地形穿透)问题
Tankic的博客
01-07 8398
Cesium滚动鼠标的 地形穿透问题 亲测可行的解决方法 问题描述： Cesium的地形图中，滚动鼠标滚轮会出现鼠标滚轮进入地形之下 在设置了 scene.screenSpaceCameraController.minimumZoomDistance=100; 之后，在地形还在加载的过程中旋转地球，依然会出现上述问题。 解决方案 监控相机的pitch值 pitch&amp;amp;amp;amp;amp;amp;gt;0的时候就禁止地球旋转事...
vue3+ts+vite+cesium 加载天地图影像、标注等多服务器随机加载切换版本
04-02
示例中的底图和注记图层来自中国的在线地图服务平台天地图，提供丰富的地理信息。代码禁用了全屏按钮、地理编码器等，隐藏了版权信息，以优化用户体验。 Vue.js 是一个流行的 JavaScript 前端框架，可以帮助开发者...
cesium加载天地图、高德地图以及水经注导出的瓦片地图
02-18
天地图、高德地图和水经注都是知名的在线地图服务提供商，它们提供了丰富的地图数据和API供开发者使用。 集成天地图到Cesium，我们需要使用TiledMapServiceImageryProvider。这个类允许我们指定天地图的服务URL以及...
Cesium加载超图S3M
01-11
S3M文件包含了地形、建筑物、植被等多类型三维对象，适用于大规模三维地图服务。 接下来，我们要讨论如何在Cesium中加载S3M数据。由于Cesium本身并不直接支持S3M格式，我们需要借助超图的iClient三维Web服务或者...
cesium加载百度地图
05-20
本教程将详细讲解如何在Cesium中加载百度地图，帮助开发者实现更丰富的地图展示效果。 首先，我们需要理解Cesium的基本工作原理。Cesium基于WebGL技术，能够在浏览器中生成高精度、高性能的3D地形和建筑物模型。它...
Cesium画点线添加标注和描述
04-02
Cesium画点线，添加标注，添加后弹窗输入描述等。。。
SuperMap、Cesium叠加ArcGIS,高德，谷歌二维，卫星地图实现二三维地图切换
01-03
webGl加载二三维底图实例。可用于super Map二三维一体化实现。 https://mp.csdn.net/postedit/85681487
cesium实现底图和地形动态切换及supermap三维服务加载（官网demo）
08-22
function1：cesium实现天地图影像、矢量动态切换；function2：实现supermap三维地形服务动态加载及卸载；function3：实现supermap倾斜摄像服务动态加载
70.（cesium篇）cesium接入天地图影像与注记（经纬度）.zip
12-22
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122077463
ruoyi 若依 集成 cesium supermap 超图 加载地图倾斜摄影
08-21
然后，可以通过`Cesium.WebMapServiceImageryProvider`或`Cesium.WebMapTileServiceImageryProvider`来加载supermap的地图服务。 4. **集成倾斜摄影**：倾斜摄影是通过多个角度拍摄建筑物，然后进行三维重建的技术...
地图下钻功能
weixin_43839531的博客
10-19 186
<template> <div id="main" style="width: 100%; height:500px;"></div> </template> <script> import $echarts from 'echarts'; import cityMap from '@/js/citymap.js'; import $axios from 'axios'; const provinces = { //23个省 .
【Cesium】在地球上绘制标注
~~~
03-03 4525
cesium在地球上进行标注。其中传入的viewer就是初始化cesium创建的视图容器，它提供了创建和控制3D场景所需的所有基本功能，包括加载3D模型、添加图像覆盖物、设置相机位置和方向、处理用户输入等。cesium提供了自带的PointPrimitiveCollection点集合，可以在集合中添加和删除点，并显示到地球上。封装相应标注站点位置的方法，点击确定时，调用drawSite方法并把当前选中的经纬度传入即可。点击选取按钮时，获取鼠标的实时经纬度和高度信息，传入绘制标注方法即可。
Cesium加载天地图代码
weixin_33939380的博客
11-24 389
var viewer = new Cesium.Viewer('cesiumContainer', { animation: false, baseLayerPicker: false, geocoder: true, timeline: false, sceneModePicker: true, navigationHelpB...
写代码如何实现cesium加载天地图离线切片
07-14
要在Cesium中加载天地图的离线切片，你需要执行以下步骤： 1. 下载离线切片数据：首先，你需要从天地图官网或其他渠道下载离线切片数据。确保下载的数据是符合天地图切片规范的。 2. 将切片数据转换为Cesium可用的格式：Cesium使用的切片数据格式是TMS（Tiled Map Service）或WMTS（Web Map Tile Service）。如果你下载的切片数据不是这两种格式，你需要将其转换为相应格式。你可以使用GDAL或其他切片转换工具来完成这个步骤。 3. 创建Cesium Viewer对象：在Cesium中，你需要创建一个Viewer对象来显示地图。你可以使用以下代码创建一个基本的Viewer对象： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); ``` 这里的 'cesiumContainer' 是一个HTML元素的ID，它将用于显示Cesium地图。 4. 添加离线切片图层：接下来，你需要将离线切片图层添加到Cesium Viewer中。你可以使用以下代码将切片图层添加到Viewer中： ```javascript var offlineLayer = new Cesium.UrlTemplateImageryProvider({ url: 'path/to/your/tiles/{z}/{x}/{y}.png', }); viewer.imageryLayers.addImageryProvider(offlineLayer); ``` 这里的 'path/to/your/tiles/{z}/{x}/{y}.png' 是你离线切片数据的路径。确保将路径正确指向离线切片数据的存储位置。 5. 设置初始视图：最后，你可以使用以下代码设置地图的初始视图： ```javascript viewer.camera.setView({ destination : Cesium.Cartesian3.fromDegrees(lon, lat, height), orientation : { heading : Cesium.Math.toRadians(heading), pitch : Cesium.Math.toRadians(pitch), roll : Cesium.Math.toRadians(roll), } }); ``` 在上面的代码中，lon、lat和height是地图的经度、纬度和高度，heading、pitch和roll是地图的视角。 完成这些步骤后，你应该能够在Cesium中加载并显示天地图的离线切片数据了。记得根据你的实际情况调整代码中的路径和初始视图参数。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值