OpenLayers实战，OpenLayers获取用户定位位置并高亮显示用户所在行政区划

已于 2023-10-31 18:32:53 修改
阅读量549 收藏 1
点赞数 1
分类专栏： Vue+OpenLayers6入门到实战 # Vue+OpenLayers6实战 OpenLayers6一本通 文章标签： 前端 javascript vue.js 获取手机位置 geojson Openlayers 定位到行政区划
于 2023-10-26 19:28:30 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/134062756
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 10 订阅 ¥159.90 ¥99.00
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥99.00
订阅专栏
Vue+OpenLayers6实战
53 篇文章 34 订阅 ¥69.90 ¥99.00
订阅专栏

专栏目录：
OpenLayers实战进阶专栏目录

前言

本篇文章通过国内的省、自治区和直辖市的GeoJson数据作为行政区划边界数据，然后根据用户定位位置，通过OpenLayers计算得到用户所在行政区划，并使用OpenLayers高亮显示用户所在行政区划边界。
openlayers
本章是综合应用场景，所以代码稍稍有些复杂，对于新入门读者可能难以上手，因此下面提供本文中使用到的技术，方便大家拆分参考，容易上手：

  1. 加载GeoJson数据渲染行政区划边界参考文章
    OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上

  2. 获取用户定位位置参考文章
    OpenLayers实战，Openlayers获取浏览器当前用户的经纬度位置并定位到对应位置

  3. 行政区划边界显示参考文章
    OpenLayers入门，OpenLayers从vue的assets资源路径加载geojson文件并解析数据叠加到地图上

了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
OpenLayers6实战，OpenLayers获取移动端精确定位，OpenLayers适配App混合H5方式调用手机定位位置并定位到指定点
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-04 762
本章讲解OpenLayers如何获取移动端精确定位位置。不使用任何native本地方法，只使用纯js实现。本篇文章适用于App混合H5方式调用手机精确定位，打包时需要选择GPS位置权限，手机获取定位过程中会弹出是否允许定位的权限提示。
OpenLayers入门，OpenLayers鼠标移动事件使用，实现鼠标移动到点位上方后高亮显示点位要素
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-29 1354
本章主要讲解OpenLayers鼠标移动事件的使用，并简单实现鼠标移动到点位上方后高亮显示点位要素的功能，带领大家快速上手OpenLayers鼠标移动事件的应用。
openlayers 入门教程（十二）：定位与轨迹
大剑师兰特的GIS世界
04-11 2060
在OpenLayers中实现定位和轨迹的功能通常涉及到地图上的点标记（Marker）动态更新位置以及记录和显示轨迹路径。
openlayers 实现区域选择（点击区域高亮，再次点击取消；放大层级显示街道图层，同样可以选择取消）
qq_23830005的博客
05-29 339
放大层级后会显示街道边界，保存选择街道信息到streetList中，然后筛选出相应的坐标数据，渲染到地图上。主要通过geojson数据实现边界显示，选择区域的同时加载街道边界，取消区域择清除街道边界。
OpenLayers6/7使用GeoJSON进行行政区裁剪
hjt1201的博客
07-13 599
OpenLayers6/7使用GeoJSON进行底图裁剪
Vue+Openlayer实现实时定位
08-31 1019
参考：https://blog.csdn.net/weixin_39340061/article/details/108196570 效果图： 实现代码： <template> <div id="map" style="width: 100vw; height: 100vh"></div> </template> <script> import "ol/ol.css"; import GeoJSON from "ol/for
基于Openlayers 6实现地图局部（高亮）优雅显示
weixin_51965860的博客
01-17 3575
修改于2021/1/17 索引1、地图局部显示2、地图局部高亮 公共地图资源基本都是全国范围或者全球范围数据，但具体业务需求往往只是需要显示局部范围或者局部高亮显示。本案例基于Openlayers实现世界地图内蒙古区域的局部显示以及呼伦贝尔、阿荣旗的高亮显示。 1、地图局部显示 加载天地图影像图层、道路中文注记图层。 道路中文注记图层渲染后根据内蒙古边界范围进行局部裁剪。此处使用canvas的复合操作（globalCompositeOperation），在源图像中显示目标图像（destination-in
Openlayers显示地理位置坐标的方法
10-14
当用户在地图上移动鼠标时，`MousePosition`控件会实时显示当前位置的经纬度坐标。 以上是使用OpenLayers显示地理位置坐标的完整过程。通过这个示例，我们可以学习到如何设置地图、创建自定义控件以及处理地理坐标...
openlayers实现图标拖动获取坐标
10-14
在OpenLayers中，实现图标拖动获取坐标的功能是一项常见的需求，尤其对于地图应用开发者来说，这一功能能够允许用户通过拖动地图上的图标来获取其精确的地理位置信息。本篇文章将详细解析如何使用OpenLayers实现这一...
openlayers加载本地切片、高亮显示
04-01
在这个主题中，我们将深入探讨如何利用OpenLayers加载本地切片，并实现高亮显示。 首先，我们需要理解什么是地图切片。地图切片是一种将大尺寸地图分割成多个小块（通常为正方形）的方法，便于更高效地在网络上传输...
Openlayers根据geojson格式数据渲染聚合图
01-06
geojson作为webGIS较常用的数据格式，没有给定如何将geojson格式渲染为聚合图的示例，因此本示例将Openlayers官网提供的geojson格式数据加载示例与聚合图渲染示例结合，形成根据geojson格式数据渲染聚合图的示例。
基于OpenLayers实战地理信息系统教程（教学视频）
10-08
里面是教学视频，共五章，基于OpenLayers实战地理信息系统教程，基于OpenLayers实战地理信息系统教程基于OpenLayers实战地理信息系统教程基于OpenLayers实战地理信息系统教程
Openlayers实现地图全屏显示
10-14
在OpenLayers中，实现地图全屏显示是通过集成全屏控制（FullScreen Control）来完成的，这使得用户可以轻松地将地图扩展到整个浏览器窗口，提高地图的可读性和用户体验。 首先，为了使用OpenLayers库，我们需要在...
OpenLayers 5 使用GeoJSON进行行政区划剪裁（clip, not mask or filter），非矢量图层覆盖
老胡的CSDN博客
10-17 4300
常规的行政区划剪裁是使用一个中空的多边形做一个遮罩，这种方法的问题是无法实现多种类型图层信息的叠加。 OpenLayer 5提供了几个ol.render类里面的静态函数，用来在canvas上绘制一些要素、几何，利用这个机制，下面实现了一个根据GeoJSON数据进行行政区划剪裁的实例。 代码很简单，一看就懂。 <!doctype html> <html lan...
【前端小记】--OpenLayers--2.地图进行移动并放大视野动画后定位到一个点
am_xiao_hui的博客
09-14 1524
在地图的图层中，有些需要和用户进行交互，比如现在有个需求：列表中是点位名称，点击列表的某一行后在地图上定位到所点击到点位，这个过程需要有一个缩放移动视野的动画。
使用openlayers加载地图行政区域（结合百度云地图）
零- -！
01-13 4062
在某一个项目中，需要在一张地图上叠加中国行政区域，提供省、市两级行政区域的范围，由于自己的数据源不全，不能保证数据的完整性，所以采用调用百度云地图的API来实现在地图上显示行政区划范围；项目中使用的技术框架为：以Openlayers来地图控制类，以Jquery做为基本的DOM操控工具，整个处理过程如下：   一、工具准备：        首先在页面上引入jquery、OpenLayers...
Web 性能入门指南 - 2.2 理解和改进最大内容绘制 (LCP)
最新发布
weixin_43303603的博客
07-15 403
最大内容绘制 (LCP) 衡量的是页面上最大视觉元素的渲染时间。为了让 Google 满意，请将 LCP 时间控制在 2 秒以内。
openlayers获取用户获取用户当前详细地理位置
03-29
OpenLayers本身不能直接获取用户的详细地理位置，但可以使用浏览器的Geolocation API来获取用户的经纬度坐标，然后使用第三方的地理信息服务（如OpenStreetMap、Google Maps等）来获取用户的详细地理位置。 以下是一个使用Geolocation和OpenStreetMap获取用户当前位置并在地图上显示的示例代码： ```html <!DOCTYPE html> <html> <head> <title>OpenLayers Geolocation Example</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script> </head> <body> <div id="map" style="width: 100%; height: 500px;"></div> <script> // 创建地图 var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 2 }) }); // 获取用户位置 navigator.geolocation.getCurrentPosition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // 将用户位置转换为OpenLayers的坐标系 var point = ol.proj.fromLonLat([longitude, latitude]); // 在地图上添加一个标记，表示用户位置 var marker = new ol.Feature({ geometry: new ol.geom.Point(point) }); var layer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [marker] }), style: new ol.style.Style({ image: new ol.style.Icon({ src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png' }) }) }); map.addLayer(layer); // 使用OpenStreetMap的Nominatim服务获取用户详细位置并显示在页面上 var url = 'https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=' + latitude + '&lon=' + longitude; fetch(url) .then(function(response) { return response.json(); }) .then(function(data) { var address = data.display_name; document.getElementById('location').innerHTML = 'Your location: ' + address; }); }); </script> <div id="location"></div> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值