OpenLayers实战，OpenLayers实现GeoJson格式的省级区划数据渲染和鼠标点击省界自动选中并高亮显示省界范围，点击空白区域取消高亮

已于 2023-11-08 14:31:50 修改
阅读量436 收藏 1
点赞数 5
分类专栏： Vue+OpenLayers6入门到实战 # Vue+OpenLayers6实战 OpenLayers6一本通 文章标签： 前端 javascript vue.js OpenLayers 加载GeoJson格式数据 加载GeoJson省界 点击高亮省界
于 2023-11-07 23:48:24 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/134278813
版权
OpenLayers6一本通 同时被 3 个专栏收录 该专栏为热销专栏榜 第30名
132 篇文章 13 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6实战
53 篇文章 35 订阅 ¥69.90 ¥99.00
订阅专栏
本文介绍如何使用OpenLayers在Vue项目中加载GeoJson省级区划数据，实现点击省界自动高亮及点击空白区域取消高亮的功能。详细讲解了依赖引入、数据加载、事件监听和代码实现过程。
摘要由CSDN通过智能技术生成

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

前言

本章使用OpenLayers实现从vue项目中加载assets资源目录中的GeoJson格式数据，实现鼠标点击区划边界范围内时选并高亮显示，点击区划边界区域外取消高亮的功能。

openlayers

本章是综合应用，为方便大家理解代码，拆分为简单的单一技术可以看下面的入门内容：

1、如何监听鼠标点击事件
OpenLayers入门，OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度

2、如何从vue项目中加载assets资源目录中的GeoJson格式数据
OpenLayers入门，OpenLayers从vue的assets资源路径加载geojson文件并解析数据叠加到地图上，以加载世界各国边界为例

二、依赖和使用

"ol"
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
OpenLayers实战，OpenLayers获取用户定位位置并高亮显示用户所在行政区划
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-26 585
本篇文章通过国内的省、自治区和直辖市的GeoJson数据作为行政区划边界数据，然后根据用户定位位置，通过OpenLayers计算得到用户所在行政区划，并使用OpenLayers高亮显示用户所在行政区划边界。本章是综合应用场景，所以代码稍稍有些复杂，对于新入门读者可能难以上手，因此下面提供本文中使用到的技术，方便大家拆分参考，容易上手：加载GeoJson数据渲染行政区划边界参考文章OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上。
Openlayers根据geojson格式数据渲染聚合图
01-06
geojson作为webGIS较常用的数据格式，没有给定如何将geojson格式渲染为聚合图的示例，因此本示例将Openlayers官网提供的geojson格式数据加载示例与聚合图渲染示例结合，形成根据geojson格式数据渲染聚合图的示例。
vue + openlayers 实现省市区的描边界与区域填充 (后续)
JunRoyal
07-28 1432
<div class="cityList"> <div :class="numIndex === i ? 'item tdSelected' : 'item'" v-for="(item, i) in cityList" :key="i" @click=" tabClick(i); childClick(item);"> {{ item.features[0].properties.name }}
OpenLayers - Vector绘制地图省市区（十）
小小的前端
02-20 1223
简介 本文讲解经常在开发中出现的功能，绘制地图省市区。主要使用Vector图层通过绘制多边行的方法，绘制出省市区的多边行，把该图层添加到地图图层上，就实现了绘制省市区图形。 Vector 矢量图层： 在客户端呈现的矢量数据。构成一个矢量图层需要一个数据源(source)和一个样式(style)，数据源构成矢量图层的要素，样式规定要素显示的方式和外观。一个矢量图层包含一个到多个要素(feature)，每个要素由地理属(geometry)和其他属性组成。 常用于从数据库中请求数据，接受数据，并将接收的数据解析
openlayer 图层点击事件 鼠标单击
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
06-27 1048
一个图层创建好了，接下来我们要做的是，如何通过鼠标点击打开点击对象的详情弹框？详情弹框做点击按钮效果。
OpenLayers6入门，OpenLayers如何加载百万数据量的GeoJson点数据并叠加到webgl渲染图层上，百万海量点数据叠加不卡
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 1504
上一章中《OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上》，我们讲解了少量数据加载并叠加到OpenLayers矢量图层上，如果数量特别大，浏览器就会很卡，所以需要用到webgl图层进行加载，本章就讲解使用webgl图层叠加海量GeoJson点数据。
openlayers：实现加载geojson并实现点击弹窗（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 112
openlayers：实现加载geojson并实现点击弹窗（附完整源码）
OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 1031
本章介绍一下使用OpenLayers如何使用GeoJson数据，GeoJson数据格式可以参考博主另一篇文章《GIS开发入门，GeoJSON是什么？GeoJSON格式标准介绍》，那么废话少谈，让我们立刻开始加载GeoJson数据并叠加OpenLayers的矢量图层上。
模拟实现疫情分布图 openlayer+Geojson
平凡人的博客
02-20 1534
原始数据来源：http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4 解释个鸡儿，直接上代码（为了防止抄袭，还是解释8，有需求直接私信）： 版本一： 1、首先读取geojson数据： //数据是网上下的http://datav.a...
vue集成openlayers加载geojson并实现点击弹窗教程
01-22
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程，供大家参考，具体内容如下 第一步：安装vue-cli cnpm install -g @vue/cli 第二步：新建一个项目 1.新建项目 （vue-openlayers为项目名）,并...
OpenLayers3实现鼠标移动显示坐标
10-14
本篇知识点着重介绍在OpenLayers3中，如何实现鼠标移动显示坐标的功能，包括实现的基本思路和具体代码示例。 ### 实现思路： 1. **加载地图瓦片图层**：首先，需要加载一个基础的地图瓦片图层，常用的是OSM（Open...
中国国界和省界的GeoJson格式数据
02-13
- 地图渲染：将GeoJson数据导入GIS软件或在线地图平台（如Google Maps, Mapbox, OpenLayers等），绘制出中国国界和省界地图。 - 数据分析：通过编程语言（如Python的geopandas或JavaScript的turf.js库）处理GeoJson...
Openlayers 点击地图 行政地区高亮显示
happyforever的博客
03-18 4779
选择的地区高亮
10. Openlayers加载GeoJSON、含文件（结合vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-18 4161
欢迎来到 OpenLayers 的学习之旅！今天我们将深入探讨如何在 OpenLayers 地图中加载 GeoJSON 数据。你会看到代码是如何通过层层叠加的方式来建立这个功能，以及如何制定自定义样式来展示独特的 GeoJSON 数据。
openlayers.js加载geojson时绑定单击事件，点击空白处选中最接近的要素（比如一个线性图形下面有个多边形，在线性图形空白处点击时会选中多边形，而你想要选中线性图形）
weixin_43747076的博客
05-13 423
背景：之前我写过一篇文章解决这个问题的点击此处查看，所以就不在这里详细介绍问题了，但是呢不够官方，是我自己凭空想象而来的，下面我要介绍的就比较官方了，因为是比对官方文档api来获取的 第一步：首先咱们依旧需要遍历所有feature 这次参考官方apiol/source/Vector的getFeatures()方法去获取所有feature 直接获取是获取不到的，我也说不了这个是异步的还是说图层加载完成之后才能获取，所以我干脆就直接来个定时器 代码： if(timer){ clearInterval(ti
地图上有多个geojson图层时，如何筛选图层实现点击事件（过滤图层） Openlayers+Vue2（附点击出现popup弹窗源码）
m0_73548338的博客
04-14 349
地图上有多个geojson图层时，如何筛选图层实现点击事件（过滤图层） openlayer+Vue2（附点击出现popup弹窗源码）
基于Openlayers 6实现地图局部（高亮）优雅显示
weixin_51965860的博客
01-17 3619
修改于2021/1/17 索引1、地图局部显示2、地图局部高亮 公共地图资源基本都是全国范围或者全球范围数据，但具体业务需求往往只是需要显示局部范围或者局部高亮显示。本案例基于Openlayers实现世界地图内蒙古区域的局部显示以及呼伦贝尔、阿荣旗的高亮显示。 1、地图局部显示 加载天地图影像图层、道路中文注记图层。 道路中文注记图层渲染后根据内蒙古边界范围进行局部裁剪。此处使用canvas的复合操作（globalCompositeOperation），在源图像中显示目标图像（destination-in
在vue2中，如何使用openlayers将geojson点数据渲染？当鼠标点击某个点的时候，该点图标变成一个图片的图标，并显示一些信息
07-12
在Vue 2中使用OpenLayers渲染GeoJSON点数据并实现点击事件可以按照以下步骤进行： 1. 安装OpenLayers库： 在项目中安装OpenLayers库，可以使用npm或者yarn命令进行安装： ```bash npm install ol 或者 yarn ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值