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

已于 2023-10-31 18:32:53 修改
阅读量744 收藏 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 篇文章 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
123 篇文章 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6实战
55 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍如何使用OpenLayers结合GeoJson数据，获取用户定位并确定其所在的行政区划，通过代码实现行政区划边界高亮显示。内容包括获取用户经纬度、计算行政区划交集及地图展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

前言

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

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

  2. 获取用户定位位置参考文章
    OpenLayers实战&#

了解本专栏 订阅专栏 解锁全文
openlayers6/7 行政区划裁剪 只显示某个区域 示例为天地图
qq_36287830的博客
02-23 2257
openlayers6/7 行政区划裁剪 只显示某个区域 示例为天地图。
Openlayers 教程 12 - 地图中的各种定位：定位点、线、面以及图层等
linzi19900517的博客
03-17 6665
地图定位是非常常用的功能，本教程介绍定位到点、范围、图形要素 feature、图层 layer。
百度地图api(javascript)--高亮显示所选行政区划
weixin_34346099的博客
09-12 527
var map = new BMap.Map("map_container");function initMap(map, "长沙市") { var point = new BMap.Point(112.987402, 28.201509); // 创建点坐标 112.987402, 28.201509 map.centerAndZoom(point, 8);...
OpenLayers中加载WMS图层并实现定位功能
最新发布
l10103的博客
03-20 299
我们在通过OpenLayers加载WMS服务后发现OpenLayers没有现成的定位到WMS图层的方法，这时候我们需要自己去获取到图层extents来自己手动定位到该位置，下面是实现方法。
三、openlayers官网示例Advanced View Positioning解析——根据地图上的矢量地块定位
aaa_div的博客
05-08 1448
一般来说，一个项目中会加载很多图层，如果把每个图层的source、layer、每个地图的View都提为全局变量那太多了，容易看不清楚。是一个几何对象，描述了要素的几何形状，它的属性值一般有点的坐标、线的路径、面的边界等。以北京的朝阳区为例，一个区是两块不相连的地块组成，这种情况下使用一个地区对应一个Polygon就不够了，因为一个多边形的起点和终点必须是闭合的。点开其中一个，可以看见很多属性，Feature其实就是一个描述地块属性的类，里面有很多属性代表不同的东西，可以理解为一个很大的对象。
用Openlayers实现实时定位
01-19
小马看Gis--用Openlayers实现实时定位 服务端服务方法用来生成GeoJSon串的jar包的源文件。
小马看Gis--通过Openlayers实现实时定位
热门推荐
不知道是谁的博客
01-19 2万+
通过Openlayers实现实时定位
openlayers地图要素或图层定位
gaoyi00的博客
09-25 2507
openlayes中的地图使用zoomToExtent 进行定位，参数bounds是要素或图层的范围,要素可以通过feature.geometry.getBounds()得到范围，图层可以通过layer.getDataExtent();得到范围，得到范围后就可以进行定位了...
OpenLayers实战，OpenLayers解析渲染TopoJson格式区划边界数据和实现鼠标经过高亮显示区划边界和文字
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-30 427
本章使用OpenLayers实现从vue项目中加载assets资源目录中的TopoJson格式数据，解析渲染TopoJson格式行政区划边界数据，并且实现鼠标经过区域高亮显示区划边界和文字的功能。
OpenLayers实战，OpenLayers实现GeoJson格式的省级区划数据渲染和鼠标点击省界自动选中并高亮显示省界范围，点击空白区域取消高亮
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-07 599
本章使用OpenLayers实现从vue项目中加载assets资源目录中的GeoJson格式数据，实现鼠标点击区划边界范围内时选并高亮显示，点击区划边界区域外取消高亮的功能。本章是综合应用，为方便大家理解代码，拆分为简单的单一技术可以看下面的入门内容：1、如何监听鼠标点击事件OpenLayers入门，OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度2、如何从vue项目中加载assets资源目录中的GeoJson格式数据。
Vue+OpenLayers6实战进阶专栏目录，Vue+OpenLayers实战案例，Vue+OpenLayers6实战教程
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-31 2268
本篇作为Vue整合OpenLayers实战进阶教程的目录，用于整理汇总专栏所有文章，方便查找。本专栏是讲解主流前端框架Vue整合前端最流行的JS二维地图引擎之一OpenLayers的实战教程。
OpenLayers实战，OpenLayers结合TopoJson区划边界数据，下拉菜单实现城市切换，动态切换城市边界到地图视图视角范围内
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-02 380
本章是OpenLayers综合实战案例，使用OpenLayers结合下拉菜单实现城市切换，动态切换城市边界到地图视图视角范围内。本章需要使用到ElementUI的下拉框组件和OpenLayers的TopoJson格式解析地市边界数据并负责渲染，通过动态创建style样式来切换城市区划边界高亮效果。如何从vue项目中加载assets资源目录中的TopoJson格式数据。
Openlayers 点击地图 行政地区高亮显示
happyforever的博客
03-18 5211
选择的地区高亮
openlayers：实现地理定位（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 212
openlayers：实现地理定位（附完整源码）
openlayers：实现地理定位 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-29 132
openlayers：实现地理定位 (附完整源码）
openlayers学习——6、openlayers地块定位点定位
记录生活点滴
01-11 4646
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
OpenLayers4 省界鼠标滑动特效（高亮省份加声音）
qq_35796916的博客
01-25 2500
Vector Layer   //style样式 灰色 黑色字体 白色边界 var style = new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.9)' }),
openlayers 入门教程（十二）：定位与轨迹
大剑师兰特的GIS世界
04-11 3559
在OpenLayers中实现定位和轨迹的功能通常涉及到地图上的点标记（Marker）动态更新位置以及记录和显示轨迹路径。
OpenLayers6实战，OpenLayers获取移动端精确定位，OpenLayers适配App混合H5方式调用手机定位位置并定位到指定点
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-04 945
本章讲解OpenLayers如何获取移动端精确定位位置。不使用任何native本地方法，只使用纯js实现。本篇文章适用于App混合H5方式调用手机精确定位，打包时需要选择GPS位置权限，手机获取定位过程中会弹出是否允许定位的权限提示。
Openlayers实现地图行政区划遮罩显示示例
遮罩通常用于显示或隐藏特定区域的数据，以便用户可以集中查看某个特定的地理范围或行政区划。本案例中，使用了GeoJSON数据文件来定义行政区域的边界，并通过OpenLayers库中的Canvas渲染引擎来实现遮罩效果。 **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值