三维地图Cesium加载天地图

最新推荐文章于 2024-09-03 21:44:01 发布
最新推荐文章于 2024-09-03 21:44:01 发布
阅读量5.3k 收藏 18
点赞数 2
分类专栏： Cesium 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34297387/article/details/118341049
版权

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 = token

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

时间的情敌
关注
  • 2
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
Cesium 实战 00 - Cesium 加载天地图影像图示例
linzi19900517的博客
10-10 2741
Cesium 加载天地图资源。
cesium 调用天地图的两种方式
liyan_gis的专栏
05-24 6441
Cesium调用天地图可以使用wmts方式加载，还可以使用url模板的方式加载，效果如图所示： 本文以天地图影像为例，如果想加矢量图或者地形晕圈图，可以私信我。 方式一：wmts的方式 看下官网的说明： 提供由兼容WMTS 1.0.0的服务器提供的平铺图像。此提供程序支持HTTP KVP编码和RESTful GetTile请求，但不支持SOAP编码。 下面标出了比较重要的构造参数的参数 下面是具体代码： viewer.imageryLayers.addImageryPr...
Cesium加载天地图
lyxkgc的博客
06-01 675
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加载天地图（有代码）
吴道简的博客
10-22 8475
天地图官网上写了cesium加载天地图的方法，http://lbs.tianditu.gov.cn/docs/#/sanwei/，但读起来，写起来，的确令人费解。 下面写一段非常简单的代码，用cesium加载天地图影像和影像注记，并且飞行到中国。 效果如下： 代码非常简单，把其中的cesiumAsset换成在cesium官网注册的asset，tiandituTk换成在天地图官网上注册的tk就行。 <!DOCTYPE html> <html lang="en"> &lt
三维地图之cesium入门使用
热门推荐
吴道简的博客
08-10 1万+
三维地图与三维空间建模，目前来看，应用还是在可视化层面，因为硬件设备的限制，可视化的效果也不尽如人意。只要加载的数据量一大，或者非本地数据网络不极速，渲染就会非常卡顿，呈现出满屏后现代主义的拼贴风格。 做三维地图的桌面端软件有Google earth，但Google earth做出来的东西只能自己看，不太好共享，如果想做一个能共享的web应用，还得使用前端技术，cesium就可以。 当然卡顿的问题，哪里都存在，这个得靠摩尔定律来解决了。 一、什么是cesium cesium.js是一个开源的前.
vue3+ts+vite+cesium 加载天地图影像、标注等多服务器随机加载切换版本
04-02
示例中的底图和注记图层来自中国的在线地图服务平台天地图，提供丰富的地理信息。代码禁用了全屏按钮、地理编码器等，隐藏了版权信息，以优化用户体验。 Vue.js 是一个流行的 JavaScript 前端框架，可以帮助开发者...
slider.rar cesium加载天地图实现地图卷帘
07-21
在这个主题中，我们将深入探讨如何利用Cesium加载天地图，并实现地图卷帘功能。 首先，我们要明白“天地图”是中国的一个国家级地理信息公共服务平台，它提供了丰富的地图服务，包括基础地图、地形数据、卫星影像等...
70.（cesium篇）cesium接入天地图影像与注记（经纬度）.zip
12-22
- 可以通过`Cesium.GeoJsonDataSource`或`Cesium.KmlDataSource`加载天地图的注记数据。数据源加载完成后，使用`viewer.dataSources.add()`将其添加到场景中。 3. **显示经纬度信息**： - Cesium提供了鼠标悬停时...
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中添加天地图底图
tjx1997的博客
08-16 2346
天地图主要使用的是WGS84坐标系，并提供了矢量、影像、地形等多种底图。可以利用cesium的WebMapTileServiceImageryProvider完成天地图底图的加载。
Vue前端路由详解——以Ruoyi框架为案例学习
最新发布
警警的博客
09-03 1050
Ruoyi框架前端路由通过Vue Router实现，支持静态路由和动态路由的配置，通过路由守卫实现权限控制等需求，采用路由懒加载提高应用性能，并通过路由元信息存储自定义信息。这些特性共同构成了Ruoyi框架前端路由的完整体系，为开发者提供了灵活、强大的路由管理能力。
如何使用cesium加载天地图影像服务
03-22
您可以使用以下代码来使用Cesium加载天地图影像服务： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var imageryProvider = new Cesium.WebMapTileServiceImageryProvider({ url: '...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时间的情敌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值