Cesium——天地图服务调用流程&文档&申请Key、token&代码

已于 2024-01-05 14:14:31 修改
阅读量3.4k 收藏 29
点赞数 22
文章标签： 前端
于 2024-01-05 13:42:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46127993/article/details/135407127
版权
本文详细介绍了如何在中国国家基础地理信息系统天地图上进行服务调用，包括登录、地图API的使用、申请Key、叠加影像、国界和地形服务，以及三维地名服务的集成。同时提到了服务调用的配额管理和注意事项。
摘要由CSDN通过智能技术生成

天地图服务调用

一、基础介绍

天地图是中国国家基础地理信息系统，由中国测绘地理信息局和国家地理信息公共服务平台共同开发和运营。它提供了包括地图数据、地理编码、路径规划、地理搜索等多项地理信息服务。天地图的目标是为各行业提供高质量、全面的地理信息数据和解决方案。

二、地址

国家地理信息公共服务平台 天地图

三、调用服务方法

1、先登录自己已有的账号，没有的可以先注册一个

登录&注册

2、地图API

进入天地图首页，往下滑，点击开发资源中的“地图API”。
在这里插入图片描述
天地图地图API，在地图API页面可以看到天地图所提供的地图服务列表（缩略图，图层名称，服务地址，投影类型）
在这里插入图片描述

地图服务简介：
天地图地图服务支持HTTP和HTTPS协议。天地图地图服务采用OGC WMTS标准，具体使用方法请参考OGC WMTS标准 中GetCapabilities 和GetTile。天地图地图服务对所有用户开放。使用本组服务之前，需要申请Key。

附申请key地址：申请key

3、申请Key流程

点击创建新应用
在这里插入图片描述
填写应用具体信息
在这里插入图片描述
申请完毕，可以查看新应用的key
在这里插入图片描述

4、服务调用

进入天地图帮助文档，可以查看如何添加天地图的影像服务，国界服务，地形服务以及三维地名服务。
需要用刚刚申请到的Key作为token。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>天地图三维服务接入</title>
    <script type="text/javascript" cesium="true" src="https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Cesium.js"></script>
    <script type="text/javascript" cesium="true" src="https://api.tianditu.gov.cn/cdn/plugins/cesium/Cesium_ext_min.js"></script>
    <script type="text/javascript" cesium="true" src="https://api.tianditu.gov.cn/cdn/plugins/cesium/long.min.js"></script>
    <script type="text/javascript" cesium="true" src="https://api.tianditu.gov.cn/cdn/plugins/cesium/bytebuffer.min.js"></script>
    <script type="text/javascript" cesium="true" src="https://api.tianditu.gov.cn/cdn/plugins/cesium/protobuf.min.js"></script>
    <link rel="stylesheet" cesium="true" href="https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Widgets/widgets.css">
    <style>
        html, body{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
        }

        #cesiumContainer .cesium-viewer-bottom{
            display: none;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
</body>
</html>

Javscript

<script>
    var token = '你申请的key';
    // 服务域名
    var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
    // 服务负载子域
    var subdomains=['0','1','2','3','4','5','6','7'];

    // cesium 初始化
    var viewer = new Cesium.Map('cesiumContainer', {
        shouldAnimate: true, //是否允许动画
        selectionIndicator: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        timeline: false,
        navigationHelpButton: false,
        navigationInstructionsInitiallyVisible: false,
        showRenderLoopErrors: false,
        shadows: false,
    });

    // 抗锯齿
    viewer.scene.fxaa = true;
    viewer.scene.postProcessStages.fxaa.enabled=false;
    // 水雾特效
    viewer.scene.globe.showGroundAtmosphere = true;
    // 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
    viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20);
    viewer.scene.screenSpaceCameraController.autoResetHeadingPitch = false;
    viewer.scene.screenSpaceCameraController.inertiaZoom = 0.5;
    viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;
    viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000;
    viewer.scene.screenSpaceCameraController.zoomEventTypes = [
        Cesium.CameraEventType.RIGHT_DRAG,
        Cesium.CameraEventType.WHEEL,
        Cesium.CameraEventType.PINCH,
    ];
    viewer.scene.screenSpaceCameraController.tiltEventTypes = [
        Cesium.CameraEventType.MIDDLE_DRAG,
        Cesium.CameraEventType.PINCH,
        {
            eventType: Cesium.CameraEventType.LEFT_DRAG,
            modifier: Cesium.KeyboardEventModifier.CTRL,
        },
        {
            eventType: Cesium.CameraEventType.RIGHT_DRAG,
            modifier: Cesium.KeyboardEventModifier.CTRL,
        },
    ];
    // 取消默认的双击事件
    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

    // 叠加影像服务
    var imgMap = new Cesium.UrlTemplateImageryProvider({
        url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
        subdomains: subdomains,
        tilingScheme : new Cesium.WebMercatorTilingScheme(),
        maximumLevel : 18
    });
    viewer.imageryLayers.addImageryProvider(imgMap); 

    // 叠加国界服务
    var iboMap = new Cesium.UrlTemplateImageryProvider({
        url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
        subdomains: subdomains,
        tilingScheme : new 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]) + 'mapservice/swdx?T=elv_c&tk=' + token;
        terrainUrls.push(url);
    }

    var provider = new Cesium.GeoTerrainProvider({
        urls: terrainUrls
    });

    viewer.terrainProvider = provider;

    // 将三维球定位到中国
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
        orientation: {
            heading :  Cesium.Math.toRadians(348.4202942851978),
            pitch : Cesium.Math.toRadians(-89.74026687972041),
            roll : Cesium.Math.toRadians(0)
        },
        complete:function callback() {
            // 定位完成之后的回调函数
        }
    });

    // 叠加三维地名服务
    var wtfs = new Cesium.GeoWTFS({
        viewer,
        //三维地名服务，使用wtfs服务
        subdomains:subdomains,
        metadata:{
            boundBox: {
                minX: -180,
                minY: -90,
                maxX: 180,
                maxY: 90
            },
            minLevel: 1,
            maxLevel: 20
        },
        depthTestOptimization: true,
        dTOElevation: 15000,
        dTOPitch: Cesium.Math.toRadians(-70),
        aotuCollide: true, //是否开启避让
        collisionPadding: [5, 10, 8, 5], //开启避让时，标注碰撞增加内边距，上、右、下、左
        serverFirstStyle: true, //服务端样式优先
        labelGraphics: {
            font:"28px sans-serif",
            fontSize: 28,
            fillColor:Cesium.Color.WHITE,
            scale: 0.5,
            outlineColor:Cesium.Color.BLACK,
            outlineWidth: 2,
            style:Cesium.LabelStyle.FILL_AND_OUTLINE,
            showBackground:false,
            backgroundColor:Cesium.Color.RED,
            backgroundPadding:new Cesium.Cartesian2(10, 10),
            horizontalOrigin:Cesium.HorizontalOrigin.LEFT,
            verticalOrigin:Cesium.VerticalOrigin.TOP,
            eyeOffset:Cesium.Cartesian3.ZERO,
            pixelOffset: new Cesium.Cartesian2(5, 5),
            disableDepthTestDistance:undefined
        },
        billboardGraphics: {
            horizontalOrigin:Cesium.HorizontalOrigin.CENTER,
            verticalOrigin:Cesium.VerticalOrigin.CENTER,
            eyeOffset:Cesium.Cartesian3.ZERO,
            pixelOffset:Cesium.Cartesian2.ZERO,
            alignedAxis:Cesium.Cartesian3.ZERO,
            color:Cesium.Color.WHITE,
            rotation:0,
            scale:1,
            width:18,
            height:18,
            disableDepthTestDistance:undefined
        }
    });

    //三维地名服务，使用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}}]);

</script>

5、服务调用配额说明

服务调用配额说明
注：（1）日服务调用超量会暂时拒绝访问，次日自动开启；
（2）如果服务调用过程中存在数据爬取或者下载行为，服务调用会被自动拒绝。

6、访问统计

访问统计
查看自己申请的某一个应用的Key还有多少的配额
在这里插入图片描述

RosyScript
关注
  • 22
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
申请cesium的token并使用
MYNAMEL的博客
10-09 2699
进行注册一个账号 网址：https://cesium.com/ion/signin/tokens 创建token 应用token Cesium.Ion.defaultAccessToken ="你的token"; 使用前后效果对比
arcgis使用天地图综合示例
02-28
前段时间研究了下arcgis，尝试了在arcgis中使用天地图资源，在网上找了不少资料，终于成功的在arcgis中用上了天地图。不过，貌似只用的到天地图提供的图层资源，用不上天地图的搜索查询服务。本例中，切换底图的功能访问的服务是我本地arcgis服务器上发布的图层服务，你们可能用不了，不过其他功能应该没问题。
JS 调用天地图地图服务
07-06
本人花费间整理的完全可用，根据需要可自行修改。
天地图地图服务调用
11-30
demo使用supermap for JavaScript调用天地图ogc服务，实现天地图定位等功能。demo可以直接运行使用。
02-Cesium-实现天地图标记
最新发布
m0_62785037的博客
05-19 537
首先天地图申请token，然后Cesium-实现天地图标记详细说明
Cesium Token申请
极限突破者的博客
07-11 9840
本文介绍了cesium框架的token申请过程
Vue项目使用天地图
weixin_46607967的博客
05-29 2834
然后在项目的 public/index.html 文件内 引入天地图官方提供的Script。
cesium 调用天地图的两种方式
liyan_gis的专栏
05-24 6364
Cesium调用天地图可以使用wmts方式加载，还可以使用url模板的方式加载，效果如图所示： 本文以天地图影像为例，如果想加矢量图或者地形晕圈图，可以私信我。 方式一：wmts的方式 看下官网的说明： 提供由兼容WMTS 1.0.0的服务器提供的平铺图像。此提供程序支持HTTP KVP编码和RESTful GetTile请求，但不支持SOAP编码。 下面标出了比较重要的构造参数的参数 下面是具体代码： viewer.imageryLayers.addImageryPr...
注册天地图Token教程
syzdev的博客
08-11 4920
1 获取天地图Token 进入天地图官网，打开“天地图应用开发许可升级说明”，使用天地图服务，也是要申请 Token 的，接下来注册天地图账号，打开注册页面，根据提示注册即可，注册完成后点击右上角的“控制台”： 点击右上角的“创建新应用”，由于天地图系统对 Token 严格区分，所以我们就在“应用类型”里选择“浏览器端”。 2 使用天地图Token 创建成功后，复制 Token，接下来在 Cesium 中加载天地图服务，在第10行的 url 中，将末尾的“你的Token”更换为你自己刚刚创建的 Toke
如何获得cesium的token
qq_35452726的博客
01-05 859
如何获得cesium的token
天地图调用
WwLK123的博客
04-25 468
完整代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>HELLO WORLD</title> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script> <scri
天地图开发指南
q4717529的博客
08-28 448
天地图开发指南
Cesium 添加必应地图无需申请key
04-26
大家都知道，Cesium通过本身的工具就提供了bing必应地图的加载，但是，需要自己申请key，如果不想那么麻烦申请key，就可以通过下面的代码实现，官方沙箱实例就可以运行啊，需要的下载，有问题联系我
70.（cesium篇）cesium接入天地图影像与注记（经纬度）.zip
12-22
在本教程中，我们将深入探讨如何使用Cesium库来接入天地图的影像和注记，并在Web应用中显示经纬度信息。Cesium是一个强大的开源JavaScript库，专为创建交互式的3D地球视图而设计。天地图是中国国家基础地理信息中心...
slider.rar cesium加载天地图实现地图卷帘
07-21
请注意，你需要替换URL中的`your_token`为你从天地图申请到的实际令牌。 然后，我们可以创建一个Cesium的`Viewer`实例，并将其imageryProvider设置为我们刚刚创建的`tianDiTuProvider`： ```javascript var viewer...
cesium加载天地图、高德地图以及水经注导出的瓦片地图
02-18
在本文中，我们将深入探讨如何使用Cesium JavaScript库来加载天地图、高德地图以及水经注导出的瓦片地图。Cesium是一款强大的开源Web GIS框架，它基于JavaScript和WebGL，能够实现3D地球可视化。对于初学者来说，...
69.（cesium篇）cesium接入天地图影像（经纬度）.zip
12-21
这段代码创建了一个`UrlTemplateImageryProvider`实例，设置了天地图影像服务的URL，并将其添加到Cesium的影像图层中。`{z}`, `{y}`, 和`{x}`是TMS的层级和像素坐标，Cesium会自动处理这些参数来请求正确的地图切片...
如何申请星图地球token并在水经微图中加载地图
04-06 465
如何申请星图地球token并在水经微图中加载地图
天地图(一）vue3+TS项目嵌入天地图，动态获取秘钥并创建标注点位和信息窗口
m0_73110566的博客
10-14 862
vue3+TS项目嵌入天地图，动态获取秘钥并创建标注点位和信息窗口
如何使用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中加载天地图影像服务。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值