OpenLayers实战，OpenLayers实现TopoJson格式区划边界鼠标点击选中高亮显示，点击空白区域取消高亮

最新推荐文章于 2024-07-18 13:56:07 发布
最新推荐文章于 2024-07-18 13:56:07 发布
阅读量278 收藏 1
点赞数 2
分类专栏： Vue+OpenLayers6入门到实战 # Vue+OpenLayers6实战 OpenLayers6一本通 文章标签： vue.js 前端 javascript OpenLayers TopoJson边界叠加 地图点击高亮显示
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/134138483
版权
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资源目录中的TopoJson格式数据，实现鼠标点击区划边界范围内时选并高亮显示，点击区划边界区域外取消高亮的功能。
openlayers

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

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

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

二、依赖和使用

"ol"
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Openlayers 点击地图 行政地区高亮显示
happyforever的博客
03-18 4751
选择的地区高亮
react+openlayers如何设置点击地图要素时，要素高亮显示与否？
qq_37967853的博客
01-11 577
react+openlayers如何设置点击地图要素时，要素高亮显示与否？
openlayers6 添加道路图层 并点击道路高亮显示
m0_65607651的博客
05-14 1528
openlayers6 添加道路图层 并点击道路高亮显示
openlayers高亮显示和点击（包含去除默认高亮显示样式）
chpswg的专栏
04-08 4481
由于项目之前使用的是ol4，所以这里主要是在ol4中如何实现高亮显示和点击 主要是使用ol.interaction.Select 首先要初始化，指定要高亮显示和选择的图层，然后添加到地图上，添加高亮显示和点击事件 //初始化高亮显示和选择工具 initSelTool : function() { this.selTool = new ol.interaction.Select({//...
OpenLayers3实现鼠标移动显示坐标
10-14
主要为大家详细介绍了OpenLayers3实现鼠标移动显示坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers加载本地切片、高亮显示
04-01
在这个主题中，我们将深入探讨如何利用OpenLayers加载本地切片，并实现高亮显示。 首先，我们需要理解什么是地图切片。地图切片是一种将大尺寸地图分割成多个小块（通常为正方形）的方法，便于更高效地在网络上传输...
vue集成openlayers加载geojson并实现点击弹窗教程
01-22
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程，供大家参考，具体内容如下 第一步：安装vue-cli cnpm install -g @vue/cli 第二步：新建一个项目 1.新建项目 （vue-openlayers为项目名）,并...
Openlayers实现地图全屏显示
10-14
在OpenLayers中，实现地图全屏显示是通过集成全屏控制（FullScreen Control）来完成的，这使得用户可以轻松地将地图扩展到整个浏览器窗口，提高地图的可读性和用户体验。 首先，为了使用OpenLayers库，我们需要在...
vue2+openLayers实现点击高亮，及数据展示
06-26
实现地图点击高亮，及展示每个省份的数据
vue3【详解】单文件组件 SFC（含SFC的优点、缺点、使用场景、原理、使用预处理器、＜script setup＞语法详解、资源拆分）
朝阳39的博客
07-16 598
自定义指令必须遵循命名规范（自定义指令名的首字母必须是v，后续跟首字母大写的自定义指令名称 ）// 在元素上做些操作 } } < template > < h1 v-my-directive > This is a Heading const。
【Vue】 style中的scoped
DX390609的博客
07-15 171
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 565
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
vuejs v-for和v-if同时使用报变量未定义
业余程序猿
07-14 320
vue3中v-if优先级高，v-if使用v-for循环体数据时数据还未加载，就报未定义了。vue2中v-for优先级高，同时使用v-if可以直接使用v-for的循环体数据。无论时vue2还是3，官方都不建议两者一起使用，建议通过template嵌套。vue3和vue2 v-if和v-for同时使用时渲染优先级变了。查了下官方文档才找到问题所在。风格指南 — Vue.js。
vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序
shengmeshi的博客
07-17 137
vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序
使用 Vue 和 ECharts 打造动态数据可视化图表
最新发布
liyananweb的博客
07-18 712
通过本文，我们了解了如何使用 Vue 和 ECharts 来创建一个简单的柱状图，并实现了动态数据更新。Vue 的响应式数据绑定和 ECharts 的强大图表功能相结合，使得我们可以轻松地构建出功能强大且美观的数据可视化应用。希望这篇文章对你有所帮助。如果你有任何问题或建议，欢迎在评论区留言。百万大学生都在用的AI论文写作工具，篇篇无重复👉:AI论文写作。
7.17（nodejs、vue、SSH服务、SSH免密登录）
m0_71589190的博客
07-17 893
nodejs、vue、SSH服务、SSH免密登录
关于vue环境变量的使用
m0_53912016的博客
07-15 226
1、创建在根目录下2、命名格式：命名分为 开发环境、测试环境、生产环境。
openlayers加载wms服务，点击高亮单个要素
06-09
要实现点击高亮单个要素，可以使用OpenLayers的Select Interaction和WMSGetFeatureInfo控件。具体步骤如下： 1. 创建Select Interaction，用于监听地图点击事件并获取点击位置的要素信息。 ``` var select = new ol.interaction.Select({ condition: ol.events.condition.singleClick, layers: [wmsLayer] }); map.addInteraction(select); ``` 2. 创建WMSGetFeatureInfo控件，用于发送GetFeatureInfo请求并获取点击位置的要素信息。 ``` var info = new ol.control.WMSGetFeatureInfo({ url: wmsUrl, layers: [wmsLayerName], infoFormat: 'application/json', queryVisible: true }); map.addControl(info); ``` 3. 监听Select Interaction的select事件，获取选中的要素并发送GetFeatureInfo请求。 ``` select.on('select', function(e) { var features = e.target.getFeatures(); if (features.getLength() > 0) { var coords = features.item(0).getGeometry().getCoordinates(); info.showInfo(coords); } }); ``` 4. 解析GetFeatureInfo请求返回的要素信息，并将选中的要素高亮显示。 ``` info.on('getfeatureinfo', function(e) { var features = new ol.format.GeoJSON().readFeatures(e.features); if (features.length > 0) { var highlightStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 2 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }) }); features[0].setStyle(highlightStyle); wmsLayer.getSource().addFeatures(features); } }); ``` 这样，当用户在地图上点击一个要素时，该要素将被高亮显示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值