Openlayers之加载高德地图

最新推荐文章于 2024-03-16 12:33:34 发布
VIP文章 最新推荐文章于 2024-03-16 12:33:34 发布
阅读量2.1w 收藏 11
点赞数 1
分类专栏： OpenLayers3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SmileCoffin/article/details/72831580
版权

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元/天 解锁文章
桃李不言_下自成蹊
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
openlayers 4.2 加载百度 高德
08-19
openlayers 4.2 加载百度地图（在线 离线） 高德地图（在线 离线）
使用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实现路径导航效果
最新发布
ThinkLess404的专栏
03-16 572
最近做项目遇到一个需求，要显示采集的用户的行动轨迹，类似导航软件的规划路径，有起点终点，路径上通过箭头指向到终点位置。前端通过openlayers实现。路径的styleFunction,可以设定轨迹颜色，轨迹宽度，箭头密度，箭头颜色，箭头大小等参数动态获取styleFunction，满足不同要求。
GIS学习之WebGIS开发基础(一)：引入高德JS API资源文件详细过程
m0_49392966的博客
02-16 966
GIS平台，也叫基础平台，系统平台，是指Map info、Arc info、Supermap、MapGIS等GIS平台，是成型的商品软件。这些软件具有强大的通用的GIS功能，也可以在其上用开发工具.NET、JAVA Delphi等等，开发出各种GIS软件。然而GIS的开发平台众多、开发平台也各有优势、在进行GS开发过程中、选择一个好的平台无疑是尤为重要的。有些GIS应用方向会提供自己的平台，比如，地图导航应用高德开放平台(JS API)、百度地图开放平台，这些平台面向大众提供开放的API接口服务。
openlayers6 解决调用百度地图之瓦片偏移、坐标偏移、无限拖动裂缝偏移问题
Gisdream的博客
08-02 5029
openlayers6调用百度地图，解决各种瓦片偏移、坐标偏移（国内外）、左右无限拖动裂缝偏移问题
Angular2地图的使用、地图画线、高德底图切换、图标变换等
对雪书空武
09-05 460
&#13; 一、map.service文件 import { Injectable } from '@angular/core';   import * as ol from 'openlayers'; import * as coordtransform from 'coordtransform';   import { DITU_SERVER_URL, CQ_DITU_S...
openLayers加载高德地图
weixin_30914981的博客
11-22 1048
之前用openlayers对高德，百度，腾讯，bing,supermap,天地图，arcgis,google等地图进行了对接，今天简单介绍一下openlayers+高德: 在Openlayers.Layer.XYZ.js中有如下更改：（百度兴趣点下载工具：http://www.cnblogs.com/songjiang6940/p/baiduPOI.html） 1 * boun...
使用OpenLayers库展示高德瓦片地图
k1121568的博客
11-24 1049
使用第三方库OpenLayers，展示高德的瓦片地图
openlayers中巧用canvas滤镜，自由切换你的地图风格
此爱如少年
08-21 4661
前言 高德地图、百度地图等等图商现在都提供一些自定义地图风格，用户可以自己设计地图样式，这样使得地图使用灵活了很多。 百度地图个性化编辑平台 高德地图自定义地图 从openlayers3开始，其底层渲染从SVG切换到了canvas，据说渲染效率提高了不少。在canvas上，我们可以实现很多比较炫酷的可视化操作，如之前的空气质量态势图、动态风场等等。 ...
020：vue+openlayers设置显示全屏功能（示例代码）
大剑师兰特的GIS世界
08-10 963
本示例的目的是介绍演示如何在openlayers中使添加使用全屏控件，呈现全屏和还原的效果。直接复制 vue+openlayers源代码，操作2分钟即可运行实现效果
使用openlayers加载离线地图实例
10-06
使用openlayers加载离线地图实例，可通过mui打包成app。简单，易上手
openlayers 加载天地图示例
02-24
openlayers 加载天地图示例
OpenLayers3加载谷歌地图
05-07
OpenLayers3加载谷歌地图，加载谷歌地图显示，实现效果很好，放大比例尺也能看得清楚。文章链接：https://blog.csdn.net/Gary_888/article/details/89914290
openlayers加载静态图片地图
10-31
openlayers加载静态图片作为底图，操作图片流畅，可控显示范围和等级
OpenLayers 6 绘制高德导航路径的蚂蚁线样式并实现箭头动画——VectorContext的重度使用
weixin_44519342的博客
04-26 2906
OpenLayers 6 绘制高德导航路径的蚂蚁线样式并实现箭头动画——VectorContext的重度使用
OpenLayers记录（六）模糊查询数据，列表显示并点击定位
qq_42590021的博客
07-26 922
OpenLayers记录（六）模糊查询数据，列表显示并点击定位 1实现效果 2实现代码 /**************模糊查询**************/ //监听回车事件 function onKey(e) { var eve = e || window.event; if (eve.keyCode == 13) { // layer.msg('监听成功'); fuzzySearch() } }; //查询功能 function fuzzy
openlayers案例
GIS笔记
12-30 3221
1.openlayers案例一 这个例子是我创建gs项目区域预警gis功能的原型demo，在此demo上学到了基本的html知识和openlayers项目搭建；是一个很不错的demo。 文章分为以下五个部分： 序例子运行图示调用OpenLayers 用来包含地图 JavaScript来创建map 2.全球地震系统的可视化 这个例子，从wms请求、地图图层分类、设置基本环境、生成矢
webgis高德地图
小菜鸟的博客
02-23 619
webgis高德地图
openlayers在线地图：高德地图、天地图、谷歌、geoq(智图)
The Words OF GIANT
04-25 1万+
-----------------2019年修订 天地图服务接口调用需要申请开发许可（Key）（自己去官网注册），添加到请求地址后即可 ----------------------------------------------------------------------------------------------------------------------------------...
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、付费专栏及课程。

余额充值