Openlayers v6.x 学习记录（二）高德地图

最新推荐文章于 2024-04-29 23:30:27 发布
最新推荐文章于 2024-04-29 23:30:27 发布
阅读量394 收藏 1
点赞数
分类专栏： Openlayers 6.x学习 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdkdlingfeng/article/details/122510333
版权

高德瓦片地址：

https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}

代码：

new TileLayer({
  source: new XYZ({
    url:"https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
})

效果图：

 

CoderXbl
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用openlayer6同时加载高德和百度（openlayers篇）
weixin_44523653的博客
06-03 2087
vue中使用openlayer6同时加载高德和百度 //html <template> <div> <div id="map" ref="mymap"></div> </div> </template> openlayer使用到的依赖 import { Map, View } from "ol"; import { Tile as TileLayer, Vector as VectorLayer } from "ol/
OpenLayers 6加载各种地图源的方法(天地图、百度、高德、ArcGIS、Bing、OSM、Google等)
热门推荐
liu2004051957的博客
11-18 1万+
OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持多种常用的地图来源，包括天地图、百度地图、高德地图、ArcGIS地图、Bing地图、OSM地图、Google地图等。
openlayers 调用百度地图
08-19
openlayers 调用百度地图
OpenLayers入门①（引入的是一个高德地图）
最新发布
Mmj_mmj的博客
04-29 1048
【代码】OpenLayers入门①（引入的是一个高德地图）
高德WMTS瓦片地图服务地图图源规律
qq_46372045的博客
11-30 2867
高德WMTS瓦片地图服务地图图源规律
openlayers6 解决调用百度地图之瓦片偏移、坐标偏移、无限拖动裂缝偏移问题
Gisdream的博客
08-02 5366
openlayers6调用百度地图，解决各种瓦片偏移、坐标偏移（国内外）、左右无限拖动裂缝偏移问题
免下载，unity通过代码动态加载高德瓦片地图
羽阿呆的博客
07-26 918
因为瓦片地图的常用分辨率为256*256.所以我们这里也设置为256.2.新建canvas，panel，给panel挂载脚本。给脚本赋值，tile zoom是瓦片地图的层级。1.新建一个image设置参数如下。3.调整摄像机位置展示地图。
使用OpenLayer加载百度地图（无偏移）
weixin_41769441的博客
06-17 5384
本文使用OpenLayers最新版本V5.3.0演示：如何使用OpenLayer完美无偏移加载百度离线瓦片地图。OpenLayers 5.3.0下载地址为：https://github.com/openlayers/openlayers/releases/download/v5.3.0/v5.3.0-dist.zip。 使用OpenLayer加载百度地图离线瓦片地图 任意新建空目录命名为geTileMap；解压v5.3.0-dist.zip并复制其中ol.js、ol.css文件至geTil...
OpenLayers 3.x Cookbook - Second Edition 随书代码
02-27
OpenLayers 3.x Cookbook - Second Edition 随书代码。 OpenLayers 3 is one of the most important and complete open source JavaScript mapping libraries today. Throughout this book, you will go through ...
openlayers-978-1-7852-8775-6:OpenLayers 3.x Cookbook - 第二版
05-30
《OpenLayers 3.x Cookbook - 第二版》是关于JavaScript地图库OpenLayers 3的一本实战指南，旨在帮助开发者深入理解和高效使用这个强大的开源库。OpenLayers是一个用于在Web上展示地图的JavaScript库，它允许开发者...
openlayers中文.rar
08-20
通过阅读这份中文手册，开发者不仅可以了解OpenLayers的基本概念，还能学习如何在实际项目中应用OpenLayers，从而构建出功能丰富的地图应用。不断实践和研究，将使你成为OpenLayers的熟练使用者。
openlayers地图.rar
08-22
openlayers地图.rar
ngx-openlayers:适用于Openlayers 4.x的Angular2 +组件
05-04
这是一个“最小”地图示例，该示例从OpenStreetMap获取图块并将地图居中于Meylan（法国）： 在app.module.ts ： ... import { AngularOpenlayersModule } from "ngx-openlayers" ; ... @ NgModule ( { imports : ...
地图服务商瓦片数据链接地址
weixin_45728126的博客
07-23 7484
地图服务商瓦片数据链接地址 截图： 对应顺序链接： 1） http://online0.map.bdimg.com/onlinelabel/?qt=tile&x=49310&y=10244&z=18 2） http://online1.map.bdimg.com/onlinelabel/?qt=tile&x=49310&y=10244&z=18 3） http://online2.map.bdimg.com/onlinelabel/?qt=tile&amp
数字地球各类贴图资源下载地址
qq_19312255的博客
03-18 1076
原文连接：https://blog.csdn.net/zouxin_88/article/details/107425436?spm=1001.2014.3001.5501 以下url中： Z-瓦片层级，一般支持0-18级，越大代表越清晰； X-瓦片列号，从西向东（0->360），依次0，1，2，……； Y-瓦片行号，从北向南（有些也可能是从南向北），依次0，1，2，……； cesium中通过UrlTemplateImageryProvider类访问： new Cesium.UrlTemp
【转】高德WMTS瓦片地图服务地图图源规律
GIS，加油呀~
12-28 5417
各种公开的互联网地图给我们提供了巨大的免费可用的地图资源(此处应有掌声)，但是各大厂商发布地图服务的规则和方式各有不同，今天我们来扒一扒高德的瓦片地图服务的发布规则。 高德地图服务地址规则 先来看一个典型的高德地图的瓦片请求： https://wprd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x=...
Cesium 在线地图访问总结
engineer_he的博客
11-02 6329
在线资源包括：天地图、谷歌地图、BingMap、OSM、Mapbox等 参考：https://deyihu.github.io/src/maptalks-tileLayercollection/examples/?tdsourcetag=s_pcqq_aiomsg 以下url中： Z-瓦片层级，一般支持0-18级，越大代表越清晰； X-瓦片列号，从西向东（0->360），依次0，1，...
内网走nginx代理访问高德webapi2.0
邹玉杰（邹琼俊）的专栏
11-16 1914
需求：客户的电脑都只能访问内，服务器可以访问外网，客户电脑使用的项目中用到了高德webapi2.0。10.200.31.45:32100是我们的web服务器。 网上基本上都是对高德webapi1.4的配置方式，而web2.0有一些差别。 1.前端修改高德地图的js应用 如果是index.html引入， 修改之前的应用： <script type="text/javascript"...
WPF编程--地图控件GMap使用
02-05 1972
WPF编程--地图控件GMap使用
openlayers ol.source.xyz
08-10
OpenLayers是一个开源的JavaScript库，提供了丰富的地图功能和交互性，包括地图的展示、数据的加载与处理、视图的控制等。ol.source.xyz是OpenLayers中用于加载XYZ瓦片图层的数据源。 XYZ瓦片是一种常见的地图数据切片方式，其中X表示图层缩放级别，Y表示竖直方向的切片索引，Z表示水平方向的切片索引。ol.source.xyz可以通过指定瓦片图层的URL模板，从网络上加载XYZ瓦片数据，并在地图上进行展示。 在使用ol.source.xyz时，需要提供一个URL模板，以告诉OpenLayers如何获取瓦片数据。URL模板是一个包含占位符的字符串，OpenLayers会根据地图当前缩放级别、瓦片索引等参数替换占位符，从而构建出实际的瓦片图层URL。 例如，可以使用"https://example.com/tiles/{z}/{x}/{y}.png"作为URL模板，其中"{z}"、"{x}"和"{y}"分别会被当前缩放级别、水平切片索引和竖直切片索引替换。这样OpenLayers就可以根据需要动态加载相应的瓦片数据。 除了URL模板，ol.source.xyz还可以通过属性进行配置，如最小缩放级别、最大缩放级别、瓦片大小等。这些属性可以根据具体需求进行设置，以便实现对瓦片图层的更精细的控制。 总之，ol.source.xyz是OpenLayers中用于加载XYZ瓦片图层的数据源，提供了灵活可配置的方式用于加载和展示瓦片图层数据。使用ol.source.xyz可以方便地在地图上加载和呈现各种瓦片地图数据，为地图开发提供了丰富的选择。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值