openlayer : 地图 ： openlayer 加载互联网地图（谷歌地图/天地图） 和 遇到的问题

最新推荐文章于 2025-09-05 16:53:09 发布
原创 最新推荐文章于 2025-09-05 16:53:09 发布 · 3.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何使用OpenLayers加载天地图的地图服务，包括电子地图、卫星影像图及文字标注图层。解决了常见问题如权限类型错误、文字标注加载失败及卫星影像图显示异常等，同时提供了完整的代码示例。

 

1、怎么部署地图服务的？

 

2、openlayer 怎么连接 互联网地图？ 

 

   互联网地图是不是可以看出服务器是别人的而已，把原本的ip改成别人的ip就可以了。其他的不变？

 

3、报错：418

参考：天地图API及服务接口调用418错误

天地图官网 : https://www.tianditu.gov.cn/

天地图key：https://console.tianditu.gov.cn/api/key

注册好个人账户，并且新建一个应用后，获取对应的key后报错：

http://t0.tianditu.com/DataServer?T=vec_w&X=3&Y=2&L=2&tk=我的key

{"msg":"权限类型错误","r
最低0.47元/天 解锁文章
python网络爬虫笔记21：天地图解析服务调用教程
m1m2m3mmm的博客
07-09 883
解析地理编码接口，将地名地址解析为经纬度
Openlayers 教程 01 - 初始化（helloworld ）以及加载天地图底图示例
非科班Java出身GISer的博客
02-24 4034
Openlayers 教程，主要是平时项目中用的较多的功能方法的总结，可以根据这些文章对 openlayers 进行二次封装提供给自己项目使用。
调用天地图服务出现403错误的两种场景
popstarqq的博客
03-23 1万+
403错误403 Forbidden 是HTTP协议中的一个状态码（Status Code）。可以简单的理解为没有权限访问此站。就是说服务器理解了本次请求但是主动拒绝执行该任务 1 key问题导致 403问题 目前在使用天地图底图服务时，需要提供key值；如下需要在api后面接上key <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=81b9a9cf3e4b...
Cartopy调用天地图API，在服务器端实现。并解决调用出现的：418问题
longjs17のblog
02-13 2209
使用python 的 Cartopy 绘制底图时，其自带的分辨率较低，不能满足小区域绘制需求，因此调用天地图api实现清晰底图绘制。
postman调用天地图api出现“msg”“权限类型错误”“resolve”“key权限为浏览器端，请使用浏览器访问”“code”“12”
stoutwei的博客
10-10 3484
postman调用天地图api出现“msg”“权限类型错误”“resolve”“key权限为浏览器端，请使用浏览器访问”“code”“12”
天地图 权限类型错误 不支持的key类型 403 Forbiddened 问题解决
c_wengy的博客
12-13 6824
天地图 权限类型错误 不支持的key类型！ 403 ,Forbiddened.问题解决
Vue中openlayers加载天地图
u011671747的专栏
03-30 1720
<template> <div id="map" ref="rootmap"> <div id="mouse-position"></div> </div> </template> <script> import 'ol/ol.css' import {get as getProjection} f...
史上最全第三方地图服务汇总【天地图/高德/百度/腾讯/谷歌地图等】—— 附加载示例
YouGIS顽石工坊 - 传播GIS技术, 分享行业知识，欢迎关注！
05-16 9578
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}
OpenLayers 加载天地图
GIS之路
05-24 763
在创建好切片数据源和且排列图层后，可以有两种方式将天地图服务添加到OpenLayers地图上。第一种方法是在创建地图对象的过程中，直接在Map对象属性。加载天地图服务需要注意两个问题，一个是服务类型，一个是图层坐标系。注：加载天地图需要申请天地图TOKEN，若没有TOKEN，请先去官网申请。对于地图坐标来说，在天地图中用参数**_c。天地图服务可以作为且切片服务加载，在OpenLayers中。类是专门用于加载影像切片图层，需要创建且排列数据源，通过。加载，在创建完成地图对象和天地图切片图层后，使用。
ol xyz 加载天地图_OpenLayers 3 之 加载天地图
weixin_36486007的博客
12-29 391
要使用 OpenLayers 3 加载天地图，首先要弄清楚天地图发布的原理，以及遵循的发布规范，上一篇中我们提到了使用 OpenLayers 3 加载百度地图，我们提到一般网络地图为了加快访问速度，都采用缓存切片地图的方式，天地图也不例外，而且原理极其类似，但是其切片的索引组织方式还是有一些不同，虽然都是切片，但是切片的起始坐标原点不一致，百度地图是屏幕的左下角，而天地图是屏幕的左上角(与谷歌地图...
OpenLayers3加载谷歌地图
05-07
OpenLayers3加载谷歌地图，加载谷歌地图显示，实现效果很好，放大比例尺也能看得清楚。文章链接：https://blog.youkuaiyun.com/Gary_888/article/details/89914290
vue中利用openlayers加载天地图
热门推荐
xuerwang的博客
09-19 1万+
首先在vue中安装openlayes依赖，现在推荐使用ol，ol需要一个一个的引入，我嫌麻烦就直接用的openlayers，我把openlayrs定义为全局变量，下载完openlayers依赖包后，在main.js里面引入， import ol from 'openlayers; 然后设置成全局属性 Vue.prototype.$ol=ol; 使用ol时，只需要使用this.$ol就可以了...
天地图，根据经纬度查询位置信息，以及403报错、权限类型错误、不支持的key类型，code:为18，报错解决
mushi233的博客
09-05 753
摘要：天地图API常见问题解决方案 本文介绍了使用天地图API时遇到的403报错问题及解决方法。当出现"权限类型错误"、"不支持的key类型"（错误代码18）时，需检查以下两点：1）确保使用自己的有效KEY替换示例代码中的占位KEY；2）在天地图控制台中将调用IP加入白名单，并勾选"地理编码"和"逆地理编码"权限。文章提供了详细的配置截图和完整的HTML代码示例，包含地图显示、定位功能及响应式UI设计。通过正确配置KEY和权限设
vue之openlayers天地图的加载
gis_sss的博客
09-15 1711
一、矢量天地图 （1）导入依赖的文件 import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js'; import {XYZ,TileWMS,Vector as VectorSource,ImageWMS,Cluster} from 'ol/source.js'; （2）矢量天地图的函数封装 /** * 说明...
天地图加载 code:18 问题解决
qq_15692295的博客
07-29 1295
解决天地图加载 code:18问题
Vue + Openlayers 基本使用----加载天地图影像
A____t的博客
05-04 2347
前面学习了一些 Vue 的基本使用，接下来结合 Openlayers 进行 WebGIS 开发的相关内容学习！ 使用 Vue CLI 3 创建项目： vue create vue-openlayers 安装 Openlayers 框架 npm i -S ol 创建组件：Map.vue <template> <div id="map"> </div> </template> <script> //导入相关配置信息 impo
vue+openlayers学习：加载天地图
p1758133202的博客
10-19 1724
vue+openlayers学习：加载天地图创建项目1.创建webpack2.安装openlayers的依赖写代码更改App.vue运行 笔者本人是纯新手，学习的过程记录一下，也可以给像我一样学习openlayers的同学一些思路，欢迎各位大佬前来指正 创建项目 在创建项目之前，需安装node js和vue-cli，可以直接百度，上面介绍的安装很细 1.创建webpack 推荐使用vscode 打开vscode，然后【文件】>【打开文件夹】打开需要创建项目的文件夹 打开【终端】，在终端输入界面里
vue中集成openlayer+天地图实现地图打点和覆盖层加载
Christina0109的博客
10-13 1295
使用openlayer加载天地图，实现打点和覆盖层加载
Vue + OpenLayers: 实现天地图示例
laugh666的博客
09-04 692
接下来，我们创建了两个 TileLayer 层，分别加载天地图的矢量图层和注记图层。通过以上步骤，我们成功地在 Vue 中使用了 OpenLayers 加载天地图，并展示了一个示例应用。现在，我们需要在 App.vue 文件中使用 Map.vue 组件。在该文件中，我们可以创建一个简单的界面，并引入 Map.vue 组件。在 initMap 方法中，我们创建了一个新的 Map 对象，并将其绑定到页面上的 div 元素。通过在 App.vue 中引入 Map.vue 组件，并在模板中使用。
cesium除了可以加载arcgis地图和天地图之外，还可以加载哪些在线地图
最新发布
09-23
<think> 我们正在讨论Cesium中可加载的在线地图服务类型。根据提供的引用，我们已经知道Cesium可以加载ArcGIS地图和天地图（Tian Di Tu）。现在，用户希望了解除此之外的其他在线地图服务。 在Cesium中，加载地图主要是通过`ImageryProvider`类来实现的。Cesium支持多种类型的ImageryProvider，每种对应不同的地图服务。 以下是一些常见的在线地图服务，Cesium都可以通过相应的ImageryProvider加载： 1. **OpenStreetMap**：使用`OpenStreetMapImageryProvider`可以加载OSM地图。 2. **Bing地图**：使用`BingMapsImageryProvider`需要提供Bing地图的Key。 3. **Google Earth**：Google Earth Enterprise可以使用`GoogleEarthEnterpriseImageryProvider`加载。 4. **Mapbox**：使用`MapboxImageryProvider`，需要提供access token。 5. **WMS服务**：使用`WebMapServiceImageryProvider`可以加载符合OGC WMS标准的地图服务。 6. **WMTS服务**：使用`WebMapTileServiceImageryProvider`可以加载WMTS服务（如天地图）。 7. **XYZ瓦片服务**：使用`UrlTemplateImageryProvider`可以加载任何XYZ格式的瓦片地图，比如很多在线地图都支持这种格式。 8. **高德地图（Amap）**：可以通过`UrlTemplateImageryProvider`自定义URL模板来加载。 9. **腾讯地图**：同样可以通过`UrlTemplateImageryProvider`加载。 注意：对于国内的地图服务（如高德、腾讯、天地图等），由于坐标系可能有差异（例如使用GCJ-02或BD-09坐标系），在加载时可能需要使用特定的tilingScheme（如`WebMercatorTilingScheme`或`GeographicTilingScheme`）以及进行坐标转换。 下面我们给出几个示例代码： 1. 加载OpenStreetMap： ```javascript viewer.imageryLayers.addImageryProvider(new Cesium.OpenStreetMapImageryProvider({ url: 'https://a.tile.openstreetmap.org/' })); ``` 2. 加载Bing地图（需要key）： ```javascript viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({ url: 'https://dev.virtualearth.net', key: 'your Bing Maps Key', mapStyle: Cesium.BingMapsStyle.AERIAL })); ``` 3. 加载WMS服务： ```javascript viewer.imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({ url: 'https://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer', layers: '0', parameters: { transparent: true, format: 'image/png' } })); ``` 4. 加载高德地图（影像图）： ```javascript // 注意：高德地图使用的是Web墨卡托投影，因此使用WebMercatorTilingScheme，并且需要加上缩放等级、行列号等参数 viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({ url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', subdomains: ['1','2','3','4'], tilingScheme: new Cesium.WebMercatorTilingScheme(), maximumLevel: 18 })); ``` 5. 加载腾讯地图（地形图）： ```javascript viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({ url: 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0', tilingScheme: new Cesium.WebMercatorTilingScheme(), maximumLevel: 18 })); ``` 注意：以上示例中，腾讯地图的URL中的`{-y}`表示使用TMS标准的Y轴（与XYZ标准的Y轴相反）。 总结：Cesium支持加载多种在线地图服务，包括但不限于上述列举的几种。只要地图服务提供符合标准的服务接口（如WMTS、WMS、XYZ等），都可以在Cesium中加载。 另外，用户也可以使用第三方库（如proj4）来支持更多的坐标系，或者对已有地图服务进行坐标转换。 相关问题： 1. 如何在Cesium中加载百度地图？ 2. Cesium加载在线地图时如何解决跨域问题？ 3. Cesium中如何叠加多个不同的地图服务？ 4. Cesium加载地图服务时如何设置最大最小缩放级别？ 5. 如何为Cesium地图服务添加版权信息？ </think> 在Cesium中，除了ArcGIS地图和天地图（Tian Di Tu）外，还可加载多种在线地图服务。以下是常用的在线地图类型及实现方式： ### 1. **瓦片地图服务（TMS/XYZ）** 通过`UrlTemplateImageryProvider`加载标准XYZ瓦片服务： ```javascript // OpenStreetMap 示例 viewer.imageryLayers.add(Cesium.createOpenStreetMapImageryProvider({ url: 'https://{s}.tile.openstreetmap.org/' })); // 自定义XYZ服务（如高德、腾讯等） new Cesium.UrlTemplateImageryProvider({ url: "https://mt{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", subdomains: ['0','1','2','3'] }) ``` ### 2. **WMTS服务** 通过`WebMapTileServiceImageryProvider`加载（如自然资源部地图）： ```javascript new Cesium.WebMapTileServiceImageryProvider({ url: "https://service.cnpm.com.cn/wmts", layer: "terrain", style: "default", tileMatrixSetID: "EPSG:3857", format: "image/png" }) ``` ### 3. **WMS服务** 通过`WebMapServiceImageryProvider`加载OGC标准服务： ```javascript new Cesium.WebMapServiceImageryProvider({ url: 'https://geoserver.example.com/wms', layers: 'topo,roads', parameters: { transparent: true, format: 'image/png' } }) ``` ### 4. **Bing地图** 需使用Bing Maps API密钥： ```javascript viewer.imageryLayers.add(new Cesium.BingMapsImageryProvider({ url: 'https://dev.virtualearth.net', key: 'your_bing_key', mapStyle: Cesium.BingMapsStyle.AERIAL })); ``` ### 5. **Mapbox** 需配置access token： ```javascript new Cesium.MapboxImageryProvider({ mapId: 'mapbox.satellite', accessToken: 'your_mapbox_token' }) ``` ### 6. **特殊坐标系地图** 对于非WGS84坐标系（如CGCS2000），需指定`tilingScheme`： ```javascript new Cesium.WebMapTileServiceImageryProvider({ // ...其他参数 tilingScheme: new Cesium.GeographicTilingScheme({ ellipsoid: Cesium.Ellipsoid.CGCS2000 // 自定义坐标系 }) }) ``` --- ### 支持的主要地图类型汇总 | 地图类型 | 服务商示例 | Cesium ImageryProvider | |----------------|----------------------------------|-------------------------------------| | **标准XYZ** | OSM, Google, 高德, 腾讯 | `UrlTemplateImageryProvider` | | **WMTS** | 自然资源部, 各省天地图 | `WebMapTileServiceImageryProvider` | | **WMS** | GeoServer, MapServer | `WebMapServiceImageryProvider` | | **专有服务** | Bing Maps, Mapbox | `BingMapsImageryProvider`等 | | **离线/自定义**| 本地瓦片服务 | `UrlTemplateImageryProvider` | --- ### 关键技术点 1. **跨域问题**：若服务端未设置CORS，需通过代理解决 2. **坐标系适配**： - 全球地图使用`WebMercatorTilingScheme` - 中国区域常用`GCJ-02`或`CGCS2000`，需自定义`tilingScheme` 3. **性能优化**： - 设置`maximumLevel`限制最大缩放级别 - 使用`credit`参数声明版权信息避免水印遮挡 > 示例中引用的天地图参数配置展示了省级地图的特殊处理方式[^2]，其他服务可参考类似逻辑调整切片规则。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值