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

已于 2023-11-08 14:31:50 修改
阅读量414 收藏 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 个专栏收录
132 篇文章 10 订阅 ¥159.90 ¥99.00
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥99.00
订阅专栏
Vue+OpenLayers6实战
53 篇文章 34 订阅 ¥69.90 ¥99.00
订阅专栏

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

前言

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

openlayers

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

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

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

二、依赖和使用

"ol"
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 993
本章介绍一下使用OpenLayers如何使用GeoJson数据，GeoJson数据格式可以参考博主另一篇文章《GIS开发入门，GeoJSON是什么？GeoJSON格式标准介绍》，那么废话少谈，让我们立刻开始加载GeoJson数据并叠加OpenLayers的矢量图层上。
OpenLayers实战，OpenLayers获取用户定位位置并高亮显示用户所在行政区划
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-26 549
本篇文章通过国内的省、自治区和直辖市的GeoJson数据作为行政区划边界数据，然后根据用户定位位置，通过OpenLayers计算得到用户所在行政区划，并使用OpenLayers高亮显示用户所在行政区划边界。本章是综合应用场景，所以代码稍稍有些复杂，对于新入门读者可能难以上手，因此下面提供本文中使用到的技术，方便大家拆分参考，容易上手：加载GeoJson数据渲染行政区划边界参考文章OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上。
OpenLayers - Vector绘制地图省市区（十）
小小的前端
02-20 1210
简介 本文讲解经常在开发中出现的功能，绘制地图省市区。主要使用Vector图层通过绘制多边行的方法，绘制出省市区的多边行，把该图层添加到地图图层上，就实现了绘制省市区图形。 Vector 矢量图层： 在客户端呈现的矢量数据。构成一个矢量图层需要一个数据源(source)和一个样式(style)，数据源构成矢量图层的要素，样式规定要素显示的方式和外观。一个矢量图层包含一个到多个要素(feature)，每个要素由地理属(geometry)和其他属性组成。 常用于从数据库中请求数据，接受数据，并将接收的数据解析
vue + openlayers 实现省市区的描边界与区域填充 (后续)
JunRoyal
07-28 1415
<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 点击地图 行政地区高亮显示
happyforever的博客
03-18 4751
选择的地区高亮
模拟实现疫情分布图 openlayer+Geojson
平凡人的博客
02-20 1524
原始数据来源：http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4 解释个鸡儿，直接上代码（为了防止抄袭，还是解释8，有需求直接私信）： 版本一： 1、首先读取geojson数据： //数据是网上下的http://datav.a...
openlayers 实现鼠标移动要矢量要素上高亮显示
gis_sss的博客
09-06 6263
一、鼠标移动到矢量要素上实现高亮显示的思路 （1）建立一个高亮的图层，鼠标移动获取的数据添加到高亮图层上边，鼠标移除，将改要素从高亮图层中删除，这种方式会影响点击事件，点击获取的永远是高亮图层要素，要是地图当前只有一个图层有点击事件影响不是很大，但是多个图层存在点击事件会受到影响，需要建立多个高亮图层进行分类显示属性信息。 （2）利用js的浅拷贝特性进行数据存储，鼠标移动获取的要素赋值给一个变...
Openlayers的交互功能（三）——Feature的选中Select控件
m0_46410110的博客
08-30 2387
本文对Feature的选中功能进行了介绍，后续将继续更新Feature的添加、删除、平移、框选平移等操作。如有错误，请批评指正！欢迎关注星林社区文章将同步更新在星林社区中！
Openlayers根据geojson格式数据渲染聚合图
01-06
geojson作为webGIS较常用的数据格式，没有给定如何将geojson格式渲染为聚合图的示例，因此本示例将Openlayers官网提供的geojson格式数据加载示例与聚合图渲染示例结合，形成根据geojson格式数据渲染聚合图的示例。
vue集成openlayers加载geojson并实现点击弹窗教程
01-22
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程，供大家参考，具体内容如下 第一步：安装vue-cli cnpm install -g @vue/cli 第二步：新建一个项目 1.新建项目 （vue-openlayers为项目名）,并...
OpenLayers3实现鼠标移动显示坐标
10-14
主要为大家详细介绍了OpenLayers3实现鼠标移动显示坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
中国国界和省界的GeoJson格式数据
02-13
- 地图渲染：将GeoJson数据导入GIS软件或在线地图平台（如Google Maps, Mapbox, OpenLayers等），绘制出中国国界和省界地图。 - 数据分析：通过编程语言（如Python的geopandas或JavaScript的turf.js库）处理GeoJson...
OpenLayers6/7使用GeoJSON进行行政区裁剪
hjt1201的博客
07-13 599
OpenLayers6/7使用GeoJSON进行底图裁剪
openlayers6/7 行政区划裁剪 只显示某个区域 示例为天地图
qq_36287830的博客
02-23 1116
openlayers6/7 行政区划裁剪 只显示某个区域 示例为天地图。
OpenLayers6入门，OpenLayers如何加载百万数据量的GeoJson点数据并叠加到webgl渲染图层上，百万海量点数据叠加不卡
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 1401
上一章中《OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上》，我们讲解了少量数据加载并叠加到OpenLayers矢量图层上，如果数量特别大，浏览器就会很卡，所以需要用到webgl图层进行加载，本章就讲解使用webgl图层叠加海量GeoJson点数据。
openlayers：实现加载geojson并实现点击弹窗（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 95
openlayers：实现加载geojson并实现点击弹窗（附完整源码）
10. Openlayers加载GeoJSON、含文件（结合vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-18 3844
欢迎来到 OpenLayers 的学习之旅！今天我们将深入探讨如何在 OpenLayers 地图中加载 GeoJSON 数据。你会看到代码是如何通过层层叠加的方式来建立这个功能，以及如何制定自定义样式来展示独特的 GeoJSON 数据。
Web 性能入门指南 - 2.2 理解和改进最大内容绘制 (LCP)
最新发布
weixin_43303603的博客
07-15 403
最大内容绘制 (LCP) 衡量的是页面上最大视觉元素的渲染时间。为了让 Google 满意，请将 LCP 时间控制在 2 秒以内。
在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、付费专栏及课程。

余额充值