三维地图Cesium加载天地图

article/2025/6/8 10:49:01

1、首先去天地图官网申请key码，http://lbs.tianditu.gov.cn/server/MapService.html
2、下载Cesium静态资源包文件，如图
在这里插入图片描述
3、引入并加载

<div class="background"  ><div id="cesiumContainer"></div></div>

initMap(){var token = '7b56038c276128a86a5b946404bf4df4';// 服务域名var tdtUrl = 'https://t{s}.tianditu.gov.cn/';// 服务负载子域var subdomains=['0','1','2','3','4','5','6','7'];// Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkNjUxMzVjOC01ODVlLTRkZGMtODg0Ni1kM2M2MmUyNTQ2ZjUiLCJpZCI6NTIxNjEsImlhdCI6MTYxODQ2OTkxMX0.t4W6qrHOFm2WIA5WK82xpVBfFt524Cf94GR0NiRhZBk";// Cesium.Ion.defaultAccessToken = tokenvar viewer = new Cesium.Viewer('cesiumContainer',{shouldAnimate: true,selectionIndicator:true,animation:false,       //动画homeButton:false,       //home键geocoder:false,         //地址编码baseLayerPicker:false, //图层选择控件timeline:false,        //时间轴fullscreenButton:false, //全屏显示infoBox:false,         //点击要素之后浮窗sceneModePicker:false,  //投影方式  三维/二维navigationInstructionsInitiallyVisible:false, //导航指令navigationHelpButton:false,     //帮助信息selectionIndicator:false, // 选择imageryProvider: new window.Cesium.WebMapTileServiceImageryProvider({//影像底图url: "http://t{s}.tianditu.com/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="+token,subdomains: subdomains,layer: "tdtImgLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式show: true}),//// terrainProvider: new window.Cesium.CesiumTerrainProvider({//   url: window.Cesium.IonResource.fromAssetId(1),// }),});viewer._cesiumWidget._creditContainer.style.display = "none"// 叠加影像服务var imgMap = new window.Cesium.UrlTemplateImageryProvider({url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,subdomains: subdomains,format: "image/jpeg",tilingScheme : new window.Cesium.WebMercatorTilingScheme(),// maximumLevel : 18});viewer.imageryLayers.addImageryProvider(imgMap);// viewer._cesiumWidget._creditContainer.style.display = "none";  // 隐藏cesium ionviewer.imageryLayers.addImageryProvider(new window.Cesium.WebMapTileServiceImageryProvider({//影像注记url: "http://t{s}.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&tk="+token,subdomains: subdomains,layer: "tdtCiaLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",show: true}));// // 叠加国界服务var iboMap = new window.Cesium.UrlTemplateImageryProvider({url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,subdomains: subdomains,tilingScheme : new window.Cesium.WebMercatorTilingScheme(),maximumLevel : 10});viewer.imageryLayers.addImageryProvider(iboMap);// 叠加地形服务var terrainUrls = new Array();for (var i = 0; i < subdomains.length; i++){var url = tdtUrl.replace('{s}', subdomains[i]) + 'DataServer?T=elv_c&tk=' + token;terrainUrls.push(url);}var provider = new window.Cesium.GeoTerrainProvider({urls: terrainUrls});viewer.terrainProvider = provider;// 将三维球定位到中国let that = this;setTimeout(() => {viewer.camera.flyTo({destination: window.Cesium.Cartesian3.fromDegrees(106.780712691818,35.684390871705,//  106.782949654136,//  35.6862154317569),orientation: {heading :  window.Cesium.Math.toRadians(348.4202942851978),pitch : window.Cesium.Math.toRadians(-89.74026687972041),roll : window.Cesium.Math.toRadians(0)},complete:function callback() {// 定位完成之后的回调函数that.NavigaOn();}});                                                 }, 2300);// 叠加三维地名服务var wtfs = new window.Cesium.GeoWTFS({viewer,subdomains:subdomains,metadata:{boundBox: {minX: -180,minY: -90,maxX: 180,maxY: 90},minLevel: 1,maxLevel: 20},aotuCollide: true, //是否开启避让collisionPadding: [5, 10, 8, 5], //开启避让时，标注碰撞增加内边距，上、右、下、左serverFirstStyle: true, //服务端样式优先labelGraphics: {font:"28px sans-serif",fontSize: 28,fillColor:window.Cesium.Color.WHITE,scale: 0.5,outlineColor:window.Cesium.Color.BLACK,outlineWidth: 5,style:window.Cesium.LabelStyle.FILL_AND_OUTLINE,showBackground:false,backgroundColor:window.Cesium.Color.RED,backgroundPadding:new window.Cesium.Cartesian2(10, 10),horizontalOrigin:window.Cesium.HorizontalOrigin.MIDDLE,verticalOrigin:window.Cesium.VerticalOrigin.TOP,eyeOffset:window.Cesium.Cartesian3.ZERO,pixelOffset:new window.Cesium.Cartesian2(0, 8)},billboardGraphics: {horizontalOrigin:window.Cesium.HorizontalOrigin.CENTER,verticalOrigin:window.Cesium.VerticalOrigin.CENTER,eyeOffset:window.Cesium.Cartesian3.ZERO,pixelOffset:window.Cesium.Cartesian2.ZERO,alignedAxis:window.Cesium.Cartesian3.ZERO,color:window.Cesium.Color.WHITE,rotation:0,scale:1,width:18,height:18}});//三维地名服务，使用wtfs服务wtfs.getTileUrl = function(){return tdtUrl + 'mapservice/GetTiles?lxys={z},{x},{y}&tk='+ token;}wtfs.getIcoUrl = function(){return tdtUrl + 'mapservice/GetIcon?id={id}&tk='+ token;}wtfs.initTDT([{"x":6,"y":1,"level":2,"boundBox":{"minX":90,"minY":0,"maxX":135,"maxY":45}},{"x":7,"y":1,"level":2,"boundBox":{"minX":135,"minY":0,"maxX":180,"maxY":45}},{"x":6,"y":0,"level":2,"boundBox":{"minX":90,"minY":45,"maxX":135,"maxY":90}},{"x":7,"y":0,"level":2,"boundBox":{"minX":135,"minY":45,"maxX":180,"maxY":90}},{"x":5,"y":1,"level":2,"boundBox":{"minX":45,"minY":0,"maxX":90,"maxY":45}},{"x":4,"y":1,"level":2,"boundBox":{"minX":0,"minY":0,"maxX":45,"maxY":45}},{"x":5,"y":0,"level":2,"boundBox":{"minX":45,"minY":45,"maxX":90,"maxY":90}},{"x":4,"y":0,"level":2,"boundBox":{"minX":0,"minY":45,"maxX":45,"maxY":90}},{"x":6,"y":2,"level":2,"boundBox":{"minX":90,"minY":-45,"maxX":135,"maxY":0}},{"x":6,"y":3,"level":2,"boundBox":{"minX":90,"minY":-90,"maxX":135,"maxY":-45}},{"x":7,"y":2,"level":2,"boundBox":{"minX":135,"minY":-45,"maxX":180,"maxY":0}},{"x":5,"y":2,"level":2,"boundBox":{"minX":45,"minY":-45,"maxX":90,"maxY":0}},{"x":4,"y":2,"level":2,"boundBox":{"minX":0,"minY":-45,"maxX":45,"maxY":0}},{"x":3,"y":1,"level":2,"boundBox":{"minX":-45,"minY":0,"maxX":0,"maxY":45}},{"x":3,"y":0,"level":2,"boundBox":{"minX":-45,"minY":45,"maxX":0,"maxY":90}},{"x":2,"y":0,"level":2,"boundBox":{"minX":-90,"minY":45,"maxX":-45,"maxY":90}},{"x":0,"y":1,"level":2,"boundBox":{"minX":-180,"minY":0,"maxX":-135,"maxY":45}},{"x":1,"y":0,"level":2,"boundBox":{"minX":-135,"minY":45,"maxX":-90,"maxY":90}},{"x":0,"y":0,"level":2,"boundBox":{"minX":-180,"minY":45,"maxX":-135,"maxY":90}}]);}

  #cesiumContainer {width: 100%;height: 1000px;}#cesiumContainer .cesium-viewer-bottom{display: none;}

如图
在这里插入图片描述
以上就是Cesium加载天地图方法，希望对各位有所帮助，不懂的地方可以随时下方评论


http://chatgpt.dhexx.cn/article/HiPA7wQB.shtml

相关文章

如何使用ArcGIS Pro制作三维地图

如何使用ArcGIS Pro制作三维地图

概述 随着设备性能提升和程序的升级&#xff0c;三维地图开始逐步登入主流地图&#xff0c;网上有很多使用ArcGIS制作三维地图的教程&#xff0c;这里给大家介绍一下使用ArcGIS Pro制作三维地图的方法&#xff0c;希望能对大家有所帮助。 数据来源 本教程所使用的数据是从水…
阅读更多...
03 三维地图添加切片图层

03 三维地图添加切片图层

在介绍了创建二维、三维地图之后，我们接下来介绍三维地图如何添加切片图层。地图添加切片图层的最终结果如下图所示，在此过程中默认实现了将业务图层居中显示的效果： 具体操作如下所示： 1 创建HTML基本架构，创建div和引入相关的文件，然后设置div的基本样式，如下： …
阅读更多...
三维pcd地图转二维栅格地图

三维pcd地图转二维栅格地图

1.概述 在使用导航时&#xff0c;通常会根据二维栅格地图做路径规划&#xff0c;需要将三维点云地图转化成栅格地图。 本文采用滤波及投影的方法&#xff0c; 主要步骤包括 对输入点云进行直通滤波&#xff0c;获取限定高度范围的数据在进行半径滤波&#xff0c;去除部分孤立…
阅读更多...
【python数据处理】替代Excel三维地图依据经纬度坐标的绘制热力地图的方式

【python数据处理】替代Excel三维地图依据经纬度坐标的绘制热力地图的方式

替代Excel三维地图依据经纬度坐标的绘制热力地图的方式 背景pyecharts绘制 背景 由于某人访问了某地&#xff0c;即便是调整电脑中的区域为别的国家或者地区时候&#xff0c;excel三维地图选择时候依然会弹出很抱歉&#xff0c;三维地图当前不在你的国家/地区使用。这个“当前…
阅读更多...
三维地图3D可视化应用案例

三维地图3D可视化应用案例

1、如何搭建离线地图开发环境 2、下载离线地图数据(金字塔瓦片数据&#xff09; 3、下载离线地图地形数据库&#xff08;实现地表高低起伏&#xff09; 4、添加离线地图数据到本地服务器 &#xff08;含3D&#xff09; 5、离线地图二次开发接口&#xff08;离线地图API&#…
阅读更多...
BlenderGIS生成三维地图白模

BlenderGIS生成三维地图白模

目录 简介安装配置处理选点建模后记 简介 BlenderBlenderGISOpenTopography 可以实现地图选点并获取对应三维白模 安装 安装 blender&#xff08;版本不要太新&#xff0c;我用的是 3.0&#xff09;&#xff1a;https://www.blender.org/download/ 获取 blender-gis&#xf…
阅读更多...
很抱歉，三维地图当前不能在你的国家/地区使用 Excel绘制三维地图问题解决

很抱歉，三维地图当前不能在你的国家/地区使用 Excel绘制三维地图问题解决

手动反爬虫&#xff1a;原博地址 https://blog.csdn.net/lys_828/article/details/123585838 知识梳理不易&#xff0c;请尊重劳动成果&#xff0c;文章仅发布在CSDN网站上&#xff0c;在其他网站看到该博文均属于未经作者授权的恶意爬取信息问题 之前在利用Excel进行三维地图…
阅读更多...
MATLAB绘制三维地图

MATLAB绘制三维地图

1、meshgrid&#xff1a;生成格点矩阵&#xff0c;类似于给定坐标空间 [x,y]meshgrid(1:10); 2、interp插值法 插值法又称“内插法”&#xff0c;是利用函数f (x)在某区间中已知的若干点的函数值&#xff0c;作出适当的特定函数&#xff0c;在区间的其他点上用这特定函数的值作…
阅读更多...
说说基于BS架构的三维地图引擎如arcgis以及三维引擎cesium等在数字孪生三维可视化项目中踩过的那些坑

说说基于BS架构的三维地图引擎如arcgis以及三维引擎cesium等在数字孪生三维可视化项目中踩过的那些坑

不知从何年何月BS架构的系统在PC端领域占据了大半壁江山&#xff0c;众多的软件公司为了迎合客户&#xff0c;在项目中纷纷采用BS架构&#xff0c;也因此导致培养了一大批相应的程序员技术人才。 然而&#xff0c;在移动端、手机领域&#xff0c;却又出现另一番景象&#…
阅读更多...
ESMap三维地图开发流程

ESMap三维地图开发流程

易景地图&#xff08;ESMap&#xff09;是一款三维地图在线开发平台&#xff0c;常被用来做智慧城市数据可视化的在线快速开发&#xff0c;广泛应用于室内外定位导航和数字孪生技术场景。下面就简单介绍一下ESMap三维地图的开发流程&#xff1a; 一、场景搭建 进入官网&#…
阅读更多...
html加载三维地图,Cesium加载三维地形及WMS地图，并实现动态控制显示

html加载三维地图,Cesium加载三维地形及WMS地图，并实现动态控制显示

写在前面： 本次工程主要实现的是cesium基础三维地形加载、视角控制、经纬度显示；重点是实现cesium加载wms图层，并对wms图层进行参数更新，实现动态控制，进一步实现时间地图的展示目的。为时间地图可视化提供了三维显示的思路。中间进行参数控制的时候，需要销毁provider，目…
阅读更多...
实景三维数据也可以免费下载

实景三维数据也可以免费下载

之前分享过不少影像&#xff0c;矢量、DEM…数据下载方法。 随着实景三维的火热&#xff0c;一些实景三维数据可以免费下载吗&#xff1f; 有&#xff01;但可下载的真的不多… 今天我们就来看看怎么才能下载到免费的实景三维数据。 全国地理信息资源目录服务系统 https://…
阅读更多...
ArcScene：构建三维地图

ArcScene：构建三维地图

主要介绍一下使用ArcScene来制作三维地图&#xff0c;下面是主要的步骤 1.打开ArcGIS下面的ArcScene&#xff0c;将研究区域的DEM和矢量边界数据添加进来&#xff1a; 2.右键DEM&#xff0c;点击属性->基本高度&#xff0c;选择“在自定义表面上浮动”&#xff0c;该路径选…
阅读更多...
【Echarts】三维地图叠加柱状图

【Echarts】三维地图叠加柱状图

代码如下所示&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta http-equiv"Content-Type" content"text/html; charsetGBK" /><title>echarts 地图</title><script src"https://cdn.sta…
阅读更多...
三维地图可视化应用教程

三维地图可视化应用教程

1、如何搭建离线地图开发环境 2、下载离线地图数据(金字塔瓦片数据&#xff09; 3、下载离线地图地形数据库&#xff08;实现地表高低起伏&#xff09; 4、添加离线地图数据到本地服务器 &#xff08;含3D&#xff09; 5、离线地图二次开发接口&#xff08;离线地图API&#…
阅读更多...
三维地图看世界

三维地图看世界

随着当今社会的不断发展&#xff0c;人们的需求以及对效率质量的要求也在不断提高。城市建设也越来越密集&#xff0c;城市规划要求越来越高&#xff0c;城市管理中对人流、车流的控制也越来越精细&#xff0c;地图作为记录地理信息的一种图形语言形式&#xff0c;不仅为人们的…
阅读更多...
三维地图下载，3D地图下载，谷歌地球三维地形图查看

三维地图下载，3D地图下载，谷歌地球三维地形图查看

更多示例代码&#xff1a;http://www.bigemap.com/offlinemaps/gl.html 3D地球依据高程数据等对地表进行渲染&#xff0c;实现地表的起伏&#xff0c;模拟出真实的三维场景&#xff0c;让你有如身临其境般的感觉。 &#xff08;注&#xff1a;Bigemap 3D地球是一个三维地图浏览…
阅读更多...
关于如何下载E都市三维地图的教程

关于如何下载E都市三维地图的教程

原文转载&#xff1a;http://www.arceyes.com/bbs/thread-18338-1-1.html 下载安装水经注E都市三维地图下载器&#xff0c;如果你没有安装&#xff0c;请百度“水经注软件”到官网下载。 软件安装后&#xff0c;启动界面如下图所示。 在软件的左边列出了可以下载E都市三维地图…
阅读更多...
主题 10：如何将工作中的创新点转化为专利

主题 10：如何将工作中的创新点转化为专利

1. 引言 很多工程师有技术情怀，在工作中也很注重用新方法、新思路解决问题，但却很少将工作中的创新转化为专利，无形中错失了进一步创造价值的机会。 专利的价值是多方面的，专利储备数量在一定程度上可以反映企业的技术实力；通过专利授权、转让可以带来可观的经济效益；专…
阅读更多...
来自创新之国以色列的 Emerge 基金会给中国带来什么？

来自创新之国以色列的 Emerge 基金会给中国带来什么？

当创新和实干深入整个民族的血液&#xff0c;人口小国成为创新大国也就不足为奇了。 7 月 20 日&#xff0c;以色列风投公司 Emerge 在北京召开了新基金 Emerge Fund II 的主题发布会——以色列&#xff1a;创新国度的创新尖兵&#xff0c;发布会上&#xff0c;前以色列首席科学…
阅读更多...
推荐文章

Copyright @ 2022~2023