自定义地图示例 天地图（一）

最新推荐文章于 2025-06-19 14:43:02 发布
原创 最新推荐文章于 2025-06-19 14:43:02 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何自定义天地图，包括理解地图服务器的分片方法，如Google地图和Bing地图的相似性，以及如何使用Microsoft Network Monitor获取天地图的URL规则。示例中展示了天地图在不同缩放级别的构成，并强调了确定地图图片URL规则的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

前文说过，引路蜂地图开发包除了支持自带的20多种地图类型外，还支持自定义地图类型。要支持自定义地图类型，首先要了解你需要支持的地图服务器的分片方法，目前几种主流的地图服务如Google地图，Bing地图，MapAbc地图地图分片方法基本类似，具体可以参考Bing地图地图分片方法。一般地图缩放级别为1-17级，每片图片为256X256大小的PNG图像。

中国推出了天地图 http://www.tianditu.com/map/index.jsp 。这里不想对其好坏和用意做评价，只是用它来做例子说明自定义地图的用法。

使用Microsoft Network Monitor 可以得到天地图矢量地图的URL生成规则如下：
最低0.47元/天 解锁文章

200万优质内容无限畅学
Openlayers实战：加载天地图
大剑师兰特的GIS世界
07-14 1250
国家地理信息公共服务平台“天地图”（以下简称“天地图“）是国家基础地理信息中心建设的网络化地理信息共享与服务门户。其属于国家队的，有一定的权威性。在Openlayers中如何加载天地图呢，方法很简单，用XYZ的形式。它分为底图和标注，可以灵活的做配合使用。
Cesium 实战 00 - Cesium 加载天地图影像图示例
非科班Java出身GISer的博客
10-10 3623
Cesium 加载天地图资源。
天地图的实例
01-13
一个基于天地图的小实例，希望可以帮到大家。
自定义地图示例：天地图（一）
mapdigit
07-06 6274
前文说过，引路蜂地图开发包除了支持自带的20多种地图类型外，还支持自定义地图类型。要支持自定义地图类型，首先要了解你需要支持的地图服务器的分片方法，目前几种主流的地图服务如Google地图，Bing地图，MapAbc地图地图分片方法基本类似，具体可以参考Bing地图地图分片方法。一般地图缩放级别为1-17级，每片图片为256X256大小的PNG图像。 中国推出了天地图 http://www.ti...
探索自定义地图样式，打造应用专属个性化地图
最新发布
weixin_36548360的博客
06-19 13
不同应用的开发者对地图样式的展示需求差异很大。例如，物流类应用希望地图样式简洁一些，重点突出城市分布和快递路径；AR游戏类应用中的地图色彩需要和游戏UI适配，做的更酷炫一些；景区导览应用中的地图样式要景区特色相结合，重点呈现关键景点。这就要求地图样式为开发者提供多种地图样式供选择，包括简洁风格、酷炫风格、特色风格等，让开发者可以根据自己的需求自定义地图样式，包括颜色、标注、线条等元素，以实现更加个性化的展示效果，以满足不同应用的需求。（Map Kit）提供了。
天地图开发实例
12-12
里边是web项目中天地图的实例jsp，包括的功能有在天地图上增加控件，增加tmarker，tlabel，线等，且对事件的绑定做了自己的处理，以供参考。
openlayers 加载天地图示例
02-24
在"Openlayers 加载天地图示例"中，`Openlayers-tianditu.html`很可能是主HTML文件，它会引入OpenLayers库以及我们自定义的`tiandituLayers.js`脚本来实现天地图的加载。在HTML文件中，我们可能会看到一个`<div>`...
Openlayers 教程 15 - openlayers 设置蓝黑色底图，自定义修改天地图颜色
热门推荐
非科班Java出身GISer的博客
09-15 1万+
项目大屏展示添加动态地图，获取瓦片，修改颜色来实现加载天地图蓝黑色底图。
Arcgis for javascript 加载天地图及自定义图
11-13
本话题主要聚焦于如何利用ArcGIS for JavaScript加载天地图以及添加自定义图层。 首先，让我们深入了解ArcGIS for JavaScript的核心概念。它基于ESRI的地理信息系统技术，提供了丰富的API接口，可以实现地图的创建...
完整的arcgis for js调用天地图示例
07-27
本文将深入探讨如何使用ArcGIS for JavaScript API来调用天地图，提供详细的步骤和示例，帮助开发者快速掌握这一技术。 首先，我们需要了解ArcGIS for JavaScript的基础。ArcGIS API for JavaScript是Esri公司提供...
vue3 集成天地图，完美实例
cesske的博客
07-18 4174
在Vue 3中，你可以使用天地图JavaScript API进行集成。以下是一个基本的例子，展示了如何在Vue 3组件中集成天地图并添加一个地图实例： 1、首先，确保你已经在你的项目中包含了天地图的JavaScript API。你可以通过以下方式添加： <!-- 在你的index.html或者相应的模板文件中 --> <script src="http://api.tianditu.gov.cn/api?v=4.0&tk==你的天地图key"></script>
天地图电子地图符号与注记样式
04-23
国家基础地理信息中心初版天地图电子地图符号与注记样式，包含注记分级显示内容、矢量地图符号与注记样式、影像地图符号与注记样式
地形图图例识别
06-09
地形图要素分类与代码 数据分类分层 图层名称 图层代码 备注 测量控制点 KZD 居民地和垣栅 JMD 工矿建筑物及其它设施 DLDW 交通及附属设施 DLSS 管线及附属设施 GXYZ 水系及附属设施 SXSS 境界 JJ ……
地图中常见的各种图例图标
01-06
地图中常见的各种图例图标 如学校、医院、宾馆饭店以及还有省和市等各种图例图标 地图中常见的各种图例图标
Openlayers 教程 01 - 初始化（helloworld ）以及加载天地图底图示例
非科班Java出身GISer的博客
02-24 3729
Openlayers 教程，主要是平时项目中用的较多的功能方法的总结，可以根据这些文章对 openlayers 进行二次封装提供给自己项目使用。
vue中天地图使用实例
xiaowu_1997的博客
07-02 1632
<style> .mapContent{ position: relative; } .menuMap{ position: absolute; top: 10px; left: 200px; z-index: 100; width: 690px; } .menuMap .ivu-btn{ padding: 0 15px; hei
Vue项目使用天地图的方法（Vue引入天地图，创建地图实例）
Wuyo_7的博客
07-10 1万+
最近项目需要用到天地图，要引入到Vue项目中，鉴于官网没有相关的说明文档，在这里我记录一下我所使用的引入方法，可能不是很好，希望有更好的方法大佬能教一下我。 第一步，在Vue项目文件夹public下的index.html入口文件中加入天地图API JS文件。 引入天地图JavaScript API文件 <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></scrip
史上最全第三方地图服务汇总【天地图/高德/百度/腾讯/谷歌地图等】—— 附加载示例
优吉斯(YouGIS) - 传播GIS技术, 分享行业知识，欢迎关注！
05-16 8960
Webgis开发过程中，我们一般使用第三方地图服务作为底图。本篇博文给大家介绍市面上常用的第三方地图服务，应该算的上是史上最全。如果需要转账，请注明转载出处： 1. 天地图 矢量图 地图 http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk= 标注 http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}
OL4叠加显示天地图地图服务之XYZ实例
pdw521的专栏
11-20 2876
1.天地图 var tdtter = "http://t6.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}"; var tdtras = "http://t6.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}"; var tdtrod = "http://t6.tianditu.com/Da
cesium如何通过天地图设置自定义地图
03-27
<think>嗯，用户想在Cesium中使用天地图服务设置自定义地图，我需要根据提供的引用内容来解答。首先，引用[1]提到了在Vue3中加载天地图的矢量地图和影像地图，以及地图叠加。这可能涉及如何构造天地图的URL，并配置Cesium的图层。 然后，引用[2]中提到Mapbox自定义地图需要styleId，但天地图可能不同，可能需要不同的参数，比如服务地址、图层类型和密钥。引用[3]则提到了地形服务的加载方法，虽然主要是地形，但可能对图层配置有帮助，比如使用fromUrl方法。 我需要先确认天地图服务的URL结构。通常天地图需要key参数，并且不同的服务类型（矢量、影像）对应不同的URL。例如，矢量地图可能是vec_w，影像地图是img_w，标注是cia_w。然后，在Cesium中创建UrlTemplateImageryProvider，设置对应的URL模板，并包含token参数。 另外，需要注意跨域问题，可能需要配置Cesium的代理，但引用中没有提到，可能需要提醒用户。另外，确保用户已经申请了天地图的密钥，并正确替换代码中的key。 还需要检查Cesium的版本是否支持这些配置，可能需要在Viewer中正确添加图层。示例代码结构是否正确，比如使用ImageryLayer和UrlTemplateImageryProvider。最后，可能还需要叠加不同图层，如矢量底图加标注层，影像底图加标注层，并调整顺序。 可能的问题包括URL是否正确，密钥是否有效，图层顺序是否正确，以及跨域设置。需要将这些步骤详细说明，并给出代码示例。同时，生成相关问题时，可以考虑优化方法、跨域处理、不同地图服务比较等。</think>### Cesium中使用天地图服务的自定义地图配置步骤 在Cesium中加载天地图服务需通过`UrlTemplateImageryProvider`实现，以下是具体实现方法： 1. **获取天地图服务密钥** 注册[天地图开放平台](https://www.tianditu.gov.cn/)账号，申请`服务密钥`（key参数）[^1] 2. **配置矢量地图图层** ```javascript const tdtVecLayer = viewer.imageryLayers.addImageryProvider( new Cesium.UrlTemplateImageryProvider({ url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=YOUR_KEY", layer: "vec", style: "default", format: "tiles", tileMatrixSetID: "w", maximumLevel: 18 }) ); ``` 3. **叠加标注图层（必加）** ```javascript const tdtCiaLayer = viewer.imageryLayers.addImageryProvider( new Cesium.UrlTemplateImageryProvider({ url: "http://t0.tianditu.gov.cn/cia_w/wmts?tk=YOUR_KEY", layer: "cia", style: "default", format: "tiles", tileMatrixSetID: "w" }) ); ``` 4. **影像地图配置（可选）** ```javascript const tdtImgLayer = viewer.imageryLayers.addImageryProvider( new Cesium.UrlTemplateImageryProvider({ url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=YOUR_KEY", layer: "img", style: "default", format: "tiles", tileMatrixSetID: "w" }) ); ``` **关键参数说明**： - `YOUR_KEY`需替换为实际申请的密钥 - 图层叠加顺序遵循`后添加在上层`原则 - 影像地图需配合`img`+`cia`组合使用 - 服务地址支持`http/https`协议，需注意跨域配置 **完整示例组合**： $$ \begin{cases} \text{矢量地图} & \Rightarrow vec\_w + cia\_w \\ \text{影像地图} & \Rightarrow img\_w + cia\_w \\ \text{地形服务} & \Rightarrow Cesium.createWorldTerrain() \end{cases} $$
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值