OpenLayers实战，OpenLayers解析渲染GeoJson格式中国省级边界并实现鼠标经过区划高亮显示省级边界

已于 2023-11-07 23:35:56 修改
阅读量813 收藏 1
点赞数 9
分类专栏： Vue+OpenLayers6入门到实战 # Vue+OpenLayers6实战 OpenLayers6一本通 文章标签： 前端 javascript vue.js GeoJson加载 GeoJson行政区划边界渲染 GeoJson区域渲染 鼠标经过高亮显示
于 2023-11-07 23:34:52 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/134278689
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
123 篇文章 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6实战
55 篇文章 ¥59.90 ¥99.00
订阅专栏
本篇博客通过OpenLayers在vue项目中加载GeoJson格式的中国省级行政区划边界数据，详细讲解了如何解析渲染边界，并实现鼠标经过时省级区域边界的高亮显示。内容包括依赖安装、数据加载、样式创建和事件监听等关键步骤，最终展示测试效果。

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

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

前言

本章使用OpenLayers实现从vue项目中加载assets资源目录中的GeoJson格式数据，解析渲染GeoJson格式中国省级行政区划边界数据，并且实现鼠标经过省级区域高亮显示省级区域边界的功能。
openlayers

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

1、如何监听鼠标监听事件
OpenLayers入门，OpenLayers鼠标移动事件使用，实现鼠标移动到点位上方后高亮显示点位要素

2、如何从vue项目中加载assets资源目录中的GeoJson格式数据
OpenLayers入门，OpenLayers从vue的assets资源路径加载geojs

了解本专栏 订阅专栏 解锁全文
openLayer-GeoJSON
zhushanlin的博客
04-27 181
就是带空间信息的json数据GeoJSON是一种基于JSON的地理空间数据交换格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据。
OpenLayers实战，OpenLayers实现GeoJson格式的省级区划数据渲染和鼠标点击省界自动选中并高亮显示省界范围，点击空白区域取消高亮
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-07 601
本章使用OpenLayers实现从vue项目中加载assets资源目录中的GeoJson格式数据，实现鼠标点击区划边界范围内时选并高亮显示，点击区划边界区域外取消高亮的功能。本章是综合应用，为方便大家理解代码，拆分为简单的单一技术可以看下面的入门内容：1、如何监听鼠标点击事件OpenLayers入门，OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度2、如何从vue项目中加载assets资源目录中的GeoJson格式数据。
Openlayers 使用 GeoJSON
大鱼的博客
08-24 4220
GeoJSON 是一种标准的地理信息通信格式。本文简单介绍什么是 GeoJSON， 以及如何使用 Openlayers 提供的 API 读取、解析和展示 GeoJSON 描述的信息。
openlayers+geojson
xuhaiyan8825的专栏
11-10 2361
/** 必须设置一个vector图层为基层图层，不能加鹰眼，否则vector里的对象显示不了，但是鹰眼里可以显示，奇怪？ 如果加多个vector，鹰眼中会显示基础图层，地图中不显示，其他图层可以正常显示 * 使用了openlayers、xuhy.VT.js, */ var xuhy = xuhy ? xuhy : {}; xuhy.Map = xuhy.Map ? xu
10. Openlayers加载GeoJSON、含文件（结合vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-18 4884
欢迎来到 OpenLayers 的学习之旅！今天我们将深入探讨如何在 OpenLayers 地图中加载 GeoJSON 数据。你会看到代码是如何通过层层叠加的方式来建立这个功能，以及如何制定自定义样式来展示独特的 GeoJSON 数据。
OpenLayers、geojson矢量图
Felix南南
06-18 656
OpenLayers的官网，下面简称ol。 官方的描述：OpenLayers可以轻松地在任何网页中放置动态地图。它可以显示从任何来源加载的地图图块，矢量数据和标记。开发OpenLayers是为了进一步使用各种地理信息。它是完全免费的开源JavaScript，根据2条款BSD许可证（也称为FreeBSD）发布。 官网的有关于矢量图的例子，大概长这样子： 官方例子代码部分： <!DOCTYPE html> <html> <head> <title>
OpenLayers实战，OpenLayers获取用户定位位置并高亮显示用户所在行政区划
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-26 751
本篇文章通过国内的省、自治区和直辖市的GeoJson数据作为行政区划边界数据，然后根据用户定位位置，通过OpenLayers计算得到用户所在行政区划，并使用OpenLayers高亮显示用户所在行政区划边界。本章是综合应用场景，所以代码稍稍有些复杂，对于新入门读者可能难以上手，因此下面提供本文中使用到的技术，方便大家拆分参考，容易上手：加载GeoJson数据渲染行政区划边界参考文章OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上。
Vue+OpenLayers6实战进阶专栏目录，Vue+OpenLayers实战案例，Vue+OpenLayers6实战教程
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-31 2269
本篇作为Vue整合OpenLayers实战进阶教程的目录，用于整理汇总专栏所有文章，方便查找。本专栏是讲解主流前端框架Vue整合前端最流行的JS二维地图引擎之一OpenLayers的实战教程。
适合GIS专业学生和前端webgis小白快速上手的Vue+OpenLayers6入门到实战教程，OpenLayers6中文文档手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-23 1744
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
openlayers 实现鼠标移动要矢量要素上高亮显示
gis_sss的博客
09-06 6722
一、鼠标移动到矢量要素上实现高亮显示的思路 （1）建立一个高亮的图层，鼠标移动获取的数据添加到高亮图层上边，鼠标移除，将改要素从高亮图层中删除，这种方式会影响点击事件，点击获取的永远是高亮图层要素，要是地图当前只有一个图层有点击事件影响不是很大，但是多个图层存在点击事件会受到影响，需要建立多个高亮图层进行分类显示属性信息。 （2）利用js的浅拷贝特性进行数据存储，鼠标移动获取的要素赋值给一个变...
openlayers 中文文档
07-02
OpenLayers中文学习文档，原始文档是.md格式的转换成Html后转换成了chm格式，感谢原文作者。
openlayers01——使用openlayers展示GeoJSON数据
sheyueyu的博客
02-05 1269
【代码】openlayers01——使用openlayers展示GeoJSON数据。
OpenLayers-加载Geojson数据
giser__z的博客
03-09 951
地址可以是本地geojson文件，也可以是网络geojson格式的数据服务。加载完成后可以对数据要素进行遍历。值得注意的是，加载网络服务的行为（如geoserver发布的数据服务）属于异步，不能直接获得要素。下面代码是我解决此问题的一种思路，通过VectorSource的。事件(在要素完成加载时触发)
openlayers加载geoJson格式文件（并加载json中的样式）
qq_40482342的博客
01-21 8181
openlayers加载geoJson格式文件（并加载json中的样式） 样式如下图: 话不多说直接上代码和注释（geojson文件可以在我的CSDN中下载） 分享不易：点赞支持 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./ol/ol.css" type="text/css"> <script src="
openlayers摸爬滚打 4.GeoJSON
CSDN已弃用
04-27 448
GeoJSON是一种用于编码各种地理数据结构的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。 一个完整的GeoJSON数据结构总是一个JSON对象，符合JSON规范。 GeoJSON官网：https://geojson.org 官网对Ge...
OpenLayers4 省界鼠标滑动特效（高亮省份加声音）
qq_35796916的博客
01-25 2501
Vector Layer   //style样式 灰色 黑色字体 白色边界 var style = new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.9)' }),
11-openlayers加载geojson数据
最新发布
fxshy的博客
05-14 268
11-加载geojson数据
openlayers：实现加载GeoJson文件显示地图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-12 249
openlayers：实现加载GeoJson文件显示地图（附完整源码）
vue中利用openlayer加载geojson
qq_46160082的博客
02-25 1930
环境搭建的事就不多提了昂 安装一下 npm i ol 算啦，直接贴代码，实在点 <template> <div> <div id="map"></div> </div> </template> <script> import { Map, View } from "ol"; import { Vector as VectorLayer, Tile } from "ol/layer"; import .
Openlayers实现GeoJSON数据聚合图渲染教程
在探讨如何使用OpenLayers根据geojson格式数据渲染聚合图之前，首先需要了解GeoJSON数据格式以及OpenLayers的基本概念。GeoJSON是一种基于JSON格式的地理数据交换格式，它用于编码各种地理数据结构，包括点、线、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值