Openlayers高级交互（12/20）：利用高德逆地理编码，点击位置，显示坐标和地址

最新推荐文章于 2025-05-27 20:50:48 发布

还是大剑师兰特

最新推荐文章于 2025-05-27 20:50:48 发布

阅读量766

点赞数 58

CC 4.0 BY-SA版权

分类专栏： # Openlayers 高级应用20例文章标签： Openlayers教程大剑师 Openlayers高级 Openlayers示例 1024程序员节

本文链接：https://blog.youkuaiyun.com/cuclife/article/details/143117810

Openlayers 高级应用20例专栏收录该内容

21 篇文章 ¥99.90 ¥299.90

订阅专栏

本示例介绍演示如何在vue+openlayers中利用高德逆地理编码，点击地图，弹出某点坐标和地址信息。这里要仔细阅读高德地图的逆编码API，同时要注意的是，这种转换在中国很好用，到了欧美国家就不好使了。这里要使用到高德地图的api，要有key。

效果图

专栏名称	内容介绍
Openlayers基础实战（72篇）	专栏提供73篇文章，为小白群体提供基础知识及示例演示，能解决基础的开发问题
Openlayers高级应用（20篇）

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

还是大剑师兰特

关注关注

58
点赞
踩
30

收藏

觉得还不错? 一键收藏
32
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

256：vue+openlayers利用高德逆地理编码，点击地图，弹出某点坐标和地址信息

大剑师兰特的GIS世界

01-26

1000

本示例的目的是介绍演示如何在vue+openlayers中利用高德逆地理编码，点击地图，弹出某点坐标和地址信息。这里要仔细阅读高德地图的逆编码API，同时要注意的是，这种转换在中国很好用，到了欧美国家就不好使了。

Openlayers实战：地图上显示经纬度坐标

大剑师兰特的GIS世界

07-05

769

Openlayers地图中，鼠标移动，其位置的经纬度坐会经常显示在页面中。在我们的实战课程里，详细讲一下其做法，成为一个主力的应用。

32 条评论您还未登录，请先登录后发表或查看评论

OpenLayers实现根据经纬度范围在地图上定位并画出区域

第七天堂

03-29

6390

昨天完成了在页面上展现WMS服务地图。之后的业务是在地图上定位数据的显示区域。用于定位的元数据在新建时会初始化一个经纬度范围，定位的原理是根据这个经纬度范围确定在地图上显示的范围，并将区域用一个矩形框起来。由于是头一次做地图定位，走了很多的冤枉路。下面把过程记录下来，和大家一起分享。尝试1：在得到经纬度（四个点，分别是东经，西经，南纬，北纬），根据上述的经纬度取区域中心点的经纬度，然后根据这个...

OpenLayers 加载高德地图

最新发布

GIS之路

05-27

424

注：当前使用的是 ol版本，天地图使用的key请到天地图官网申请，并替换为自己的key随着GIS应用的不断发展，Web地图也越来越丰富，除了像ESRI、超图、中地数码这样GIS厂商有各自的数据源格式，也有Google、百度、高德、腾讯提供的GIS资源，如何加载各种GIS数据源，是WebGIS开发要解决的一个关键问题。本节主要介绍加载地图数据。

使用OpenLayers根据经纬度对地图进行多个标点，以及点击标点弹框的实现（从后台数据库获取经纬度数据）

爱吃鸡腿的明仔

04-16

6258

说明：根据前面的知识，我们已经简单实现了离线地图以及根据经纬度单点标注地图且弹框的功能。具体实现操作请参照我的另外两篇博文：使用OpenLayers发布离线地图和使用OpenLayers根据经纬度对地图进行单个标点，以及点击标点弹框的实现（没有从后台获取经纬度数据） 1.拿到实际项目应用来说，根据经纬度来进行地图标点，一般情况下都是从后台数据库来拿到数据，前端离线地图再来进行显示标注并弹框，那我们...

249：vue+openlayers 经纬度坐标转化为地址信息，点击后在弹窗显示

大剑师兰特的GIS世界

12-06

912

本示例是演示如何在vue+openlayers项目中点击某点，转化经纬度坐标为地址信息，弹窗显示。通过点击地图，获取到经纬度坐标，然后通过调取mapbox的地址转换API，将经纬度坐标转化为地址信息，通过overlay的方式，在弹窗中展示出来。

Openlayers高级交互（10/20）：绘制矩形,截取对应部分的地图并保存

大剑师兰特的GIS世界

10-28

565

是一个有用的工具，用于测量时间流逝，特别是在需要根据时间差更新动画或物理模拟的场景中。通过使用getDelta()方法，可以确保动画在不同设备上表现一致，从而提高用户体验。在开发三维应用时，合理使用可以帮助实现更加流畅和自然的动画效果。

20个 openlayers 高级交互应用（包含示例效果图和源代码）

大剑师兰特的GIS世界

10-15

1641

本专栏列出Openlayers的高级应用20个示例，对有一定基础的Openlayers开发者帮助非常大。除了本高级应用外，作者还有提供Openlayers另两个专栏供学习。https://dajianshi.blog.youkuaiyun.com/article/details/132230735https://blog.youkuaiyun.com/cuclife/article/details/127420739https://blog.youkuaiyun.com/cuclife/article/details/126779219ht

openlayers 4.2 加载百度高德

08-19

OpenLayers 是一个流行的开源JavaScript库，用于在网页上创建交互式的地图应用。版本4.2是该库的一个重要里程碑，提供了丰富的功能和优化，使得开发者能够轻松地集成各种地图服务，包括在线和离线的地图数据。本文将...

Vue 使用高德地图，添加点标记 + 点击地图获取坐标 + 带搜索（即地理编码 + 逆地理编码） - 附完整示例

m0_48968874的博客

07-10

8564

与真实世界联通 - 高德开放平台为开发者赋能，将地图精致地呈现在您的应用中无论基于哪种平台，都可以通过高德开放平台API和SDK，轻松地完成地图的构建工作地图 | 高德地图API地图，地图sdk，地图JS API，地图定制，自定义地图，地图覆盖物，地图绘制，路线规划，坐标转换，距离/面积计算，距离测量，室内地图，地图显示，地图个性化，地图开发，室内定位。

vue 高德地图地图选点 + 获取当前定位 + 地址逆解析

我的小鱼干呢！

05-10

5099

本文主要介绍了如何使用高德地图在 vue 中实现地图选点、获取定位、地址逆解析等功能。

openlayers：实现有经纬线的地图（附完整源码）

希望我的博客，能帮上你解决学习中工作中所遇到的问题

01-31

168

openlayers：实现有经纬线的地图（附完整源码）

Openlayers实战：地理位置搜索定位

大剑师兰特的GIS世界

08-11

1099

不论是google地图，异或是百度等其他地图，都有个搜索功能，可以填写搜索词做一个定位。本文调用一个插件，在openlayers中实现地理位置搜索定位，虽不是非常好用，但也能起到一定的帮助。

openlayers：实现地理定位方向（附完整源码）

希望我的博客，能帮上你解决学习中工作中所遇到的问题

01-31

174

openlayers：实现地理定位方向（附完整源码）

openlayer4入门系列一(地图描绘经纬度点)

why

11-13

5754

openlayer结合地图描绘经纬点 openlayer入门案列

openlayers学习——6、openlayers地块定位点定位

记录生活点滴

01-11

4773

openlayers添加GeoJSON 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。本人不是专业GIS开发，只是记录，方便后续查找。参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint

Vue+OpenLayers6扩展插件进阶系列汇总目录：常用OpenLayers地图扩展组件ol-ext、ol-cesium、ol-layerswitcher、ol-geocoder和ol-wind

GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程

03-19

1684

OpenLayers 是一个开源的 JavaScript 库，用于在 Web 上创建交互式地图。它本身提供了丰富的功能和组件，但也有一些扩展库可以为其增加更多功能或简化特定任务的实现。以下是一些常见的 OpenLayers 扩展库：ol-ext、ol-cesium、ol-layerswitcher、ol-popup、ol-geocoder和ol-wind等常见扩展库。

OpenLayers 学习（五）根据经纬度用Marker在地图上添加标记

热门推荐

Stonesk的博客

06-09

1万+

根据经纬度在地图上添加标记 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } var basePath = '198.165.26.54'; var jsonStr='{"M

openlayers坐标、经纬度之间的转换

weixin_46520957的博客

11-15

4113

import {fromLonLat, toLonLat,transformExtent, transform } from 'ol/proj' fromLonLat(coordinate,'EPSG:4326') 经纬度转换为指定坐标系下坐标 (第二个参数为坐标系统epsg值) toLonLat(coordinate,'EPSG:4326'); 坐标转化为经纬度 transform(coordinate,'EPSG:4326','EPSG:3857') 坐标系之间 from xx to xx.

openlayers加载高德地图和谷歌地图

10-31

OpenLayers是一个强大的开源JavaScript库，用于创建交互式的在线地图应用。它支持多种地图提供者，包括高德地图和谷歌地图。要在OpenLayers中加载这两种地图，你需要按照以下步骤操作： 1. **添加依赖**: - 对于高德地图，你需要从高德地图开放平台获取API key，并将其包含在你的项目中。官方文档通常会指导如何集成。 - 谷歌地图则需要引入Google Maps JavaScript API，这通常通过`<script>`标签在HTML文件中引用`https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap`。 2. **初始化地图**: 使用OpenLayers创建一个新的`OL.Map`实例，并指定容器元素ID和地图类型。例如，对于高德地图: ```javascript const map = new ol.Map({ target: 'map', // 容器元素ID layers: [ new ol.layer.Tile({ source: new ol.source.GeoJSON({ url: 'your_amap_layer_url' // 高德地图的GeoJSON服务URL }) }), ], view: new ol.View({ center: [116.404, 39.9], // 北京坐标 zoom: 10 }) }); ``` 对于谷歌地图，可以使用`ol.layer.Google`： ```javascript const googleLayer = new ol.layer.Google('ROADMAP'); // 或其他类型如HYBRID、SATELLITE等 ``` 3. **加载地图**: 谷歌地图API会在页面加载完成后自动初始化，而高德地图可能需要你在回调函数里初始化： ```javascript function initMap() { const map = new ol.Map(...); } ``` 4. **注册地图源**: 需要将地图API key作为参数传递给地图源，这通常是通过高德地图提供的配置选项完成。注意，使用第三方地图服务可能会遇到版权和使用协议的问题，确保遵守相关规定。