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

已于 2023-11-07 23:35:56 修改
阅读量653 收藏 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 篇文章 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格式数据，解析渲染GeoJson格式中国省级行政区划边界数据，并且实现鼠标经过省级区域高亮显示省级区域边界的功能。
openlayers

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

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

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

二、依赖和使用

"ol"
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 9
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
openlayers：实现行政区划边界绘制（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 190
openlayers：实现行政区划边界绘制（附完整源码）
openLayer-GeoJSON
最新发布
zhushanlin的博客
04-27 102
就是带空间信息的json数据GeoJSON是一种基于JSON的地理空间数据交换格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据。
OpenLayers 5 使用GeoJSON数据渲染热力图
老胡的CSDN博客
05-08 4928
GIS开发中会遇到需要使用热力图Heatmap的时候，openlayers5官方示例给出的是kml文件描述的热力图数据，开发中接触更多的还是GeoJSON格式，本文就使用GeoJSON格式来实现一个热力图。 一、实现思路 https://openlayers.org/en/latest/examples/heatmap-earthquakes.html 官方例子是从一个kml文件解析出生成的热力...
OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 993
本章介绍一下使用OpenLayers如何使用GeoJson数据，GeoJson数据格式可以参考博主另一篇文章《GIS开发入门，GeoJSON是什么？GeoJSON格式标准介绍》，那么废话少谈，让我们立刻开始加载GeoJson数据并叠加OpenLayers的矢量图层上。
在openlayers地图中加载矢量数据（shp文件）
weixin_55684685的博客
05-13 2915
我们要知道，在ArcGIS、QGIS中经常使用的矢量数据一般为shp格式数据，相当于地图中的layer图层，里面无非就是点、线、面数据，但是在openlayers里面加载的时候只能加载geojson数据，所以我们想加载shp格式数据，第一步就是将shp数据格式转换为geojson数据格式。另外，还要注意坐标系的问题，一定要注意矢量数据的坐标系要和openlayers里面加载的地图的坐标系一致，通常都是用WGS84坐标系（即EPSG:4326），防止出现偏移。矢量数据找要素里面的投影。
Openlayers根据geojson格式数据渲染聚合图
01-06
geojson作为webGIS较常用的数据格式，没有给定如何将geojson格式渲染为聚合图的示例，因此本示例将Openlayers官网提供的geojson格式数据加载示例与聚合图渲染示例结合，形成根据geojson格式数据渲染聚合图的示例。
OpenLayers3实现鼠标移动显示坐标
10-14
主要为大家详细介绍了OpenLayers3实现鼠标移动显示坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue集成openlayers加载geojson并实现点击弹窗教程
01-22
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程，供大家参考，具体内容如下 第一步：安装vue-cli cnpm install -g @vue/cli 第二步：新建一个项目 1.新建项目 （vue-openlayers为项目名）,并...
openlayers防geojson.io 采集geojson的weob工具
12-06
在OpenLayers中，你可以加载GeoJSON数据，并通过各种图层样式展示这些特征，实现地图的个性化定制。 OpenLayers提供了丰富的API，允许开发者进行复杂的地图操作，如缩放、平移、添加图层、绘制几何对象等。对于描述...
openlayers6【十七】vue VectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解
@必意玲
07-20 7996
文章目录1. VectorLayer矢量图层的理解2. openlayers通过坐标点画中国地图2.1 准备边界的 data 数据2.2 准备 china.json 的数据文件3.3 实现区域描边方法详解3.4 完整代码4. 画省，市，区边界，道理一样，只需要换成对应的 geo边界数据文件即可4.1 如：四川省（下载对应的geo json数据）4.2 如：成都市，金牛区（下载对应的geo json数据）5. 画多个省份，或者市区的边界数据 1. VectorLayer矢量图层的理解 在我们做什么事情之前，如
openlayers学习——5、openlayers添加GeoJSON
记录生活点滴
01-10 3721
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
vue中利用openlayer加载geojson
qq_46160082的博客
02-25 1769
环境搭建的事就不多提了昂 安装一下 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加载坐标数据，将数据点绘制渲染出行政区边界图形。
Anonymous996的博客
12-14 912
收到一个文本文件，里面都是经纬度信息。说是一打开地图就加载行政区的矩形来，图形信息在这个文件中。通过绘制方式来实现。 最终效果图 源文件长这样，串信息是以逗号隔开 export const XzqPosArr = `108.622001617963 29.8682975813846,108.617103555458 29.8696002688859,108.611000055452 29.8668899563833,108.603111242945 29.8645400813811,108.5978011
OpenLayers入门，OpenLayers如何加载GeoJson多边形、线段、点和区域范围等数据并叠加到OpenLayers矢量图层上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-28 548
前面两章已经讲了OpenLayers如何加载GeoJson数据到矢量图层和webgl图层上，前面两章也是可以支持多边形、线段、点和区域范围灯数据加载的，只是没有设置样式，所以只能看到点，本章就相当于完整版本，可以将所有图形都详细展示出来。
Openlayers 使用 GeoJSON
大鱼的博客
08-24 3845
GeoJSON 是一种标准的地理信息通信格式。本文简单介绍什么是 GeoJSON， 以及如何使用 Openlayers 提供的 API 读取、解析和展示 GeoJSON 描述的信息。
OpenLayers实战，OpenLayers获取用户定位位置并高亮显示用户所在行政区划
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-26 549
本篇文章通过国内的省、自治区和直辖市的GeoJson数据作为行政区划边界数据，然后根据用户定位位置，通过OpenLayers计算得到用户所在行政区划，并使用OpenLayers高亮显示用户所在行政区划边界。本章是综合应用场景，所以代码稍稍有些复杂，对于新入门读者可能难以上手，因此下面提供本文中使用到的技术，方便大家拆分参考，容易上手：加载GeoJson数据渲染行政区划边界参考文章OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上。
openlayers高亮显示和点击（包含去除默认高亮显示样式）
chpswg的专栏
04-08 4481
由于项目之前使用的是ol4，所以这里主要是在ol4中如何实现高亮显示和点击 主要是使用ol.interaction.Select 首先要初始化，指定要高亮显示和选择的图层，然后添加到地图上，添加高亮显示和点击事件 //初始化高亮显示和选择工具 initSelTool : function() { this.selTool = new ol.interaction.Select({//...
OpenLayers6入门，OpenLayers如何加载百万数据量的GeoJson点数据并叠加到webgl渲染图层上，百万海量点数据叠加不卡
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 1401
上一章中《OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上》，我们讲解了少量数据加载并叠加到OpenLayers矢量图层上，如果数量特别大，浏览器就会很卡，所以需要用到webgl图层进行加载，本章就讲解使用webgl图层叠加海量GeoJson点数据。
openlayers显示GeoJson合适的点线面
04-27
OpenLayers是一个开源的JavaScript库，用于在Web上显示地图和地理数据。它提供了丰富的功能和灵活的API，可以用于显示各种地理数据，包括点、线和面。 要在OpenLayers中显示GeoJSON的点、线和面，可以按照以下步骤...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值