三维地图Cesium加载天地图

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加载天地图方法，希望对各位有所帮助，不懂的地方可以随时下方评论

三维地图Cesium加载天地图相关推荐

VUE中实现三维地图Cesium加载全国地质管地质地图
1.Vue中使用脚手架npm安装Cesium,安装命令:npm install cesium,加载三维地图Cesium,下载Cesium相关文件,安装成功后如下图所示: <div id=&quo ...
三维地图之cesium加载天地图（有代码）
天地图官网上写了cesium加载天地图的方法,http://lbs.tianditu.gov.cn/docs/#/sanwei/,但读起来,写起来,的确令人费解. 下面写一段非常简单的代码,用cesi ...
Cesium 加载天地图
网上有很多就是没说加载天地图需要开发者秘钥,这个需要去天地图官网申请一个就可以了,下面贴上源码还有就是Cesium也是需要token的哈 <!DOCTYPE html> <ht ...
如何使用Autodesk InfraWorks 360在三维地图上加载矢量道路
之前有介绍过如何使用Autodesk InfraWorks 360加载水经注万能地图下载器下载的卫星地图和高程数据制作三维地图,在后续的设计中,针对现成的路网,可以不用再去画,可以通过万能地 ...
Cesium加载天地图山东WMTS服务（weixin公众号【图说GIS】）
前言有网友在群里说天地图山东的山东省线划电子地图暗色版服务加载不成功,抱着好奇及帮助别人的心态去试了下,结果可以,并记录下. 实现过程查看服务元数据访问http://124.128.48.215 ...
Cesium加载天地图
目录项目地址实现效果实现方法项目地址 https://github.com/zhengjie9510/webgis-demo 实现效果实现方法采用WebMapTileServiceImag ...
自己写的Cesium加载天地图数据服务的方法（亲测可用）
前提条件 1.首先需要了解天地图都有哪些数据服务,具体详见天地图API介绍,如下图所示: 如下地址我将加粗的"vec_c"成为图层标签. http://t0.tianditu.go ...
奥维地图中加载天地图方法
一.申请天地图 key 在天地图官网(https://www.tianditu.gov.cn/),点击页面左上角的[注册] [开发资源].[地图API].[申请Key] 不详细说明,把key记下来二 ...
Leaflet 和 Cesium 加载天地图在线瓦片，天地图在线瓦片地址
天地图地址天地图在线瓦片有两种访问方式. //t{s}.tianditu.gov.cn/DataServer?t={t}&x={x}&y={y}&l={z}&tk={ ...
Cesium加载无偏移百度、高德地图
前言使用cesium加载地图服务时,cesium默认的地理坐标系是WGS84坐标,一般添加天地图的地图服务时不会发生地图偏移的情况(其实也有,但是可以忽略不计),直接加载就可以,但在添加百度.高德地 ...

三维地图Cesium加载天地图

三维地图Cesium加载天地图相关推荐

最新文章

热门文章