本文介绍: 案例代码基于 Vue3 和 Cesium 开发一个地图三维地球应用。在组件挂载后,通过 Cesium.Viewer 创建一个三维地球实例,并设置了一系列界面控件参数例如动画组件、底图组件全屏组件时间轴等。接着,使用地图的 WebMapTileServiceImageryProvider 添加了四个不同图层,包括矢量底图、矢量注记、影像底图和影像注记。最后,将实例挂载到组件模板中的 div 元素中,使用户可以页面看到一个完整的天地图三维地球应用界面

案例说明

案例代码基于 Vue3 和 Cesium 开发一个地图三维地球应用。在组件挂载后,通过 Cesium.Viewer 创建一个三维地球实例,并设置了一系列界面控件参数,例如动画小组件、底图组件、全屏组件、时间轴等。接着,使用天地图的 WebMapTileServiceImageryProvider 添加了四个不同图层,包括矢量底图、矢量注记、影像底图和影像注记。最后,将实例挂载到组件模板中的 div 元素中,使用户可以页面看到一个完整的天地图三维地球应用界面
此代码中使用了 TypeScript,使代码更加规范、易于维护。同时,使用了 Vue3 的新特性 setup(),提供了更加灵活的组件配置方式,避免了传统 Vue2 中使用 Options API 时可能出现的一些问题。同时,使用了 Cesium 的 API,可以很方便地实现三维地球应用的开发

一、效果图

22232.gif
Snipaste_2023-04-02_11-39-53.jpg

二、天地图TK注册获取

  1. 打开地图开放平台官网网址https://console.tianditu.gov.cn/.
  2. 点击页面右上角的“注册按钮进入注册页面,填写个人信息完成注册

image.png

  1. 注册完成后,在开放平台控制台左侧菜单栏选择“应用管理”,创建一个新的应用程序,并填写相关信息

image.png

  1. 创建应用程序后,您可以在应用程序设置页面中获取应用程序的AK(Access Key)和SK(Secret Key),其中AK即为TK。

image.png
需要注意的是,获取天地图的TK需要注册并创建应用程序每个应用程序有一个唯一的AK,用于标识该应用程序的身份可以用来调用天地图的服务。此外,天地图还有许多其他服务,您可以根据自己需求选择使用不同服务

三、cesium集成天地图

在 Cesium 中加载天地图的底图和注记图层需要使用 WebMapTileServiceImageryProvider 类,该类可以通过 WMTS 服务来获取地图瓦片数据。以下是加载矢量底图和矢量注记的示例代码:

let tiandituKey = ""//需要自己申请天地图的key

  //矢量底图
  viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + tiandituKey,
    layer: "tdtVecBasicLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
  }));
  //矢量注记
  viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + tiandituKey,
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible"
  }));
  //影像底图
  viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.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=" + tiandituKey,
    layer: "tdtBasicLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
  }));

  //影像注记
  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&tk=" + tiandituKey,
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
  }));

源码地址https://download.csdn.net/download/u012425087/87642527

原文地址:https://blog.csdn.net/u012425087/article/details/129909012

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_43934.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注