Openlayers之加载高德地图

最新推荐文章于 2024-07-28 10:40:51 发布
最新推荐文章于 2024-07-28 10:40:51 发布
阅读量2.1w 收藏 11
点赞数 1
分类专栏： OpenLayers3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smilecoffin/article/details/72831580
版权
本文介绍了如何利用OpenLayers加载高德地图。通过分析高德地图的瓦片URL，发现卫星图底图可以通过调整style参数获取。通用瓦片URL为http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}，并提供了加载高德地图的代码实现。
摘要由CSDN通过智能技术生成

1、高德地图瓦片URL构成

我们打开高德地图，然后按下F12键查看其网络资源，结果很不巧，高德改变了使用XYZ瓦片加载的方式，不过没关系，我们切换到卫星图，可以看到卫星图的底图仍是瓦片，不过没有任何标注信息，这个可以更改URL中的style的值，最终我们可以得到其通用瓦片URL：http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}，下面我们就来加载高德地图；



2、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<
最低0.47元/天 解锁文章
桃李不言_下自成蹊
关注
专栏目录
openlayers：实现加载高德地图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 907
openlayers：实现加载高德地图（附完整源码）
前端-基于Vue，Openlayer进行地图展示，支持OSM，高德
GIS摆渡人
04-22 599
文章目录组件安装Vue代码展示 组件安装 cnpm i ol -S Vue代码 <template> <div id="map" ref="rootmap"></div> </template> <script> import 'ol/ol.css' import { Map, View } from 'ol' import TileLayer from 'ol/layer/Tile' import OSM from 'ol/source
openlayers 4.2 加载百度 高德
08-19
openlayers 4.2 加载百度地图（在线 离线） 高德地图（在线 离线）
A005：Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
最新发布
jiadsadfasfs的博客
07-28 1738
penlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
Openlayers实战：加载高德地图
大剑师兰特的GIS世界
07-14 1056
在国内地图市场上，高德地图占据了重要的地位。Openlayers可以加载高德地图，这其中根据不同的参数，可以显示遥感地图，矢量地图等，可以显示中文，英文。
vue 项目安装 openlayer 加载高德地图
大家好，我是+V
03-22 2900
vue 项目安装 openlayer 今天呢，稍微说一下关于 vue 项目使用 openlayer 的一些操作，我也是刚开始学习，在摸索。 比较讨厌的一点就是他的官网说明文档啥的都是英文的，对英语不好的很不友好，我也看不懂，但是我下了一个有道翻译，关键是刚接触，不了解，都不知道怎么检索能得到答案，没目的性，很难受。但是没关系，等我以后有钱了，我就收购了openlayer，然后拿着刀架在那群开发的洋鬼子脖子上逼他们把开发文档一个词一个词的给你们翻译成中文的。加油！ 相关资料 openlayer 官网：http
009：vue+openlayer加载高德地图（4种形式）
大剑师兰特的GIS世界
08-09 1422
本示例的目的是介绍演示如何在vue+openlayers中添加高德地图，并且含多种的表现形式。直接复制 vue+openlayers源代码，操作2分钟即可运行实现效果
基于vue利用openlayers加载天地图，高德地图
weixin_44614518的博客
11-19 4207
是得好好记录一下这个曲折的过程 看了n篇博客，没一个是代码复制过来能显示地图的。这对于0基础但是急需快速弄出个地图显示出来及其不友好！！ 而且很多博客都是一样的，不知道那些直接去复制别人的博客过来的人是怎么想的，这么做有什么意义吗。 表示很无语，但是废话不多说，进入正题！ 天地图部分 1、首先默认你会用vue了，然后去openlayers官网简单做个了解，知道基础用法。 2、加载天地图得有一个key，先去天地图官网搞一个，具体步骤看我的另一篇文章，说到这个也是没有几篇博客写得很清楚的，就很。。。无助。 3
openlayer 加载高德地图（EPSG:3857）和GeoJSON图层（EPSG:4326）
imxiezy的博客
12-26 1087
基于openlayer实现高德底图（墨卡托投影，3857）和GeoJSON图层（4326坐标系）的叠加显示，并实现GeoJSON图层的数据变换。
openlayers切换加载天地图和高德地图
ssy001128的博客
06-09 1185
openlayers切换加载天地图和高德地图
2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1万+
本文介绍了如何在 OpenLayers 中加载不同类型的地图数据源，包括天地图、百度地图、高德地图、ArcGIS、Bing Maps、OpenStreetMap (OSM) 和 Google 地图。针对每种数据源，本文提供了相应的示例代码，展示了如何使用专用加载器或通用加载器实现底图加载。通过遵循本文的示例和指南，您可以轻松地将各种地图数据源添加到您的 OpenLayers 项目中，并根据自己的需求进行修改和调整。
openlayer加载离线高德
longshiyue2的博客
11-18 291
不多说，直接上代码 <!DOCTYPE html> <html> <head> <title>离线高德+点</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> ...
通过npm安装OpenLayers库，vue3+ts环境下OpenLayers实现加载本地高德离线地图并添加标记点、标记点气泡及标记点气泡按钮事件
chenchuang0128的博客
07-04 625
在Vue 3和TypeScript的环境下使用OpenLayers来加载高德地图的离线瓦片，并添加标记点、标记点气泡以及处理气泡上的按钮事件，涉及到几个步骤。首先，需要明确高德地图的瓦片数据格式和如何配置OpenLayers以使用这些瓦片。接着，我们需要在Vue组件中实现这些功能。
openlayers以及arcgis js 加载高德实时路况图层的方法；
傲骨雄风的博客
09-08 1760
1.openlayers加载高德实时路况图层的方法； <!DOCTYPE html> <html> <head> <title>Draw Shapes</title> <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css"> <style> #map {
（openlayer）openlayer添加高德地图
weixin_43742167的博客
03-07 1138
openlayer加载高德底图坐标系不同产生的偏移问题
使用OpenLayers加载高德离线地图简单实用
热门推荐
qq_25552049的博客
03-06 2万+
转载请标注：http://blog.csdn.net/qq_25552049/article/details/79453414概述  OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLay...
OpenLayers入门①（引入的是一个高德地图）
Mmj_mmj的博客
04-29 1421
【代码】OpenLayers入门①（引入的是一个高德地图）
OpenLayers6学习笔记（四）—— 使用XYZ的方式加载高德地图
weixin_44030304的博客
11-04 4059
        OpenLayers提供ol.source.XYZ类来加载在线瓦片地图数据源，通常情况下，要加载不同的在线瓦片地图源，只需要更改ol.source.XYZ的参数url即可。 高德在线瓦片地址： http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&
openlayers加载移动端高德地图
05-17
要在移动端使用OpenLayers加载高德地图，可以使用OpenLayers自带的插件ol.source.XYZ和高德地图的URL模板。以下是一个简单的示例代码： ```javascript var gaodeLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}' }) }); var map = new ol.Map({ target: 'map', layers: [gaodeLayer], view: new ol.View({ center: ol.proj.fromLonLat([116.3975, 39.9085]), zoom: 12 }) }); ``` 在该示例中，我们创建了一个`ol.layer.Tile`图层，并使用`ol.source.XYZ`作为数据源，向高德地图的URL模板提供x、y、z参数来获取地图切片。然后，我们将该图层添加到地图中，并设置一个初始视图中心和缩放级别。 需要注意的是，高德地图的URL模板可能会发生变化，如果无法加载地图，请检查URL是否正确。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值