OpenLayers实战，OpenLayers解析渲染TopoJson格式区划边界数据和实现鼠标经过高亮显示区划边界和文字

已于 2023-10-30 18:38:47 修改
阅读量248 收藏 1
点赞数 2
分类专栏： Vue+OpenLayers6入门到实战 # Vue+OpenLayers6实战 文章标签： 前端 javascript OpenLayers vue.js 加载TopoJson 鼠标经过高亮显示 高亮显示边界
于 2023-10-30 18:34:19 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/134125255
版权
Vue+OpenLayers6入门到实战 同时被 2 个专栏收录
120 篇文章 56 订阅 ¥119.90 ¥99.00
订阅专栏
Vue+OpenLayers6实战
52 篇文章 33 订阅 ¥69.90 ¥99.00
订阅专栏

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

前言

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

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

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

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

二、依赖和使用

"ol"
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
基于openlayers和canvas绘制海量数据的实现
01-26
基于openlayers和canvas绘制海量数据的实现
Openlayers实现地图全屏显示
10-14
主要为大家详细介绍了Openlayers实现地图全屏显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
OpenLayers3实现鼠标移动显示坐标
10-14
主要为大家详细介绍了OpenLayers3实现鼠标移动显示坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Openlayers根据geojson格式数据渲染聚合图
01-06
geojson作为webGIS较常用的数据格式，没有给定如何将geojson格式渲染为聚合图的示例，因此本示例将Openlayers官网提供的geojson格式数据加载示例与聚合图渲染示例结合，形成根据geojson格式数据渲染聚合图的示例。
1.openlayer6.9.0版本整合vue开发环境教程
qq_34687787的博客
07-24 730
openlayers6.9.0版本结合vue开发
Openlayers实例详解
08-09
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
openlayers点标记只在视图内展示，视图外不展示，用于大量数据展示
mf_717714的博客
09-06 446
通过判断坐标是否在当前视图内，若在则显示，反之不显示。然后根据移动，放大或缩小地图，改变视图，展示新的点标记。如下图所示：图1，移动前只有视图内标记显示图2，移动后，新的视图内显示视频openlayers点标记只在视图内展示，视图外不展示。
openlayers只获取显示区域范围中的featrues
Anonymous996的博客
04-20 1220
最近碰到一个需求，是关于空间查询的，获取当前视口进行查询，思考了一下，需要先拿到视图的四至范围，将这个范围绘制成矩形即可。再去拿到geometry进行wfs条件查询。注释不写了，不明白查官方 const [ x1, y1, x2, y2 ] = map.getView().calculateExtent(); const feature = new ol.Feature({ geometry: new ol.geom.Polygon.fromExtent([ x1, y1, x2,.
openlayers高亮显示地图上的点
m0_55468980的博客
09-25 307
使用openlayers来使地图上的点在高亮与普通显示之间切换
openlayers6 添加道路图层 并点击道路高亮显示
m0_65607651的博客
05-14 1416
openlayers6 添加道路图层 并点击道路高亮显示
OpenLayers入门，OpenLayers鼠标移动事件使用，实现鼠标移动到点位上方后高亮显示点位要素
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-29 1213
本章主要讲解OpenLayers鼠标移动事件的使用，并简单实现鼠标移动到点位上方后高亮显示点位要素的功能，带领大家快速上手OpenLayers鼠标移动事件的应用。
openlayers6【二十五】vue 通过gis数据动态数据，实现地图省市区下钻，图层渲染
@必意玲
07-30 3522
文章目录1. 写在前面2. 先获取广东省的区域，进行图层渲染到map上3：就是通过点击地图的区域，拿去到地图下有哪些市及区，进行遍历渲染市和区3.1 通过接口查询广东省下面有哪些市和区3.2 然后通过遍历去生成图层添加到map里面3.3 每次添加图层之前把之前的图层先删除4. map.vue5. 核心代码：CreateArea.js 1. 写在前面 结合上文 openlayers6【二十四】vue 通过gis数据显示省的区域图层，地图下钻到可视中间区域效果 进行广东省初始化页面加载一层(省)的数据，就可以.
Openlayers3 加载 GeoServer WFS的实现
顽劣的石头——www.gisgogo.cn
03-06 5528
本文以一个示例介绍了Openlayer3加载GeoServer WFS服务的方式......
openlayers6：入门基础（二）之加载图层
Puzzle的博客
10-31 7090
#Tiled Layers ## OSM ????OpenLayers v6.9.0 API - Class: OSM Layer source for the OpenStreetMap tile server. new ol.layer.Tile({ title: "OSM", source: new ol.source.OSM({ url: "https://c.tile.openstreetmap.org/{z}/{x}/{y}....
OpenLayers实战，OpenLayers结合TopoJson区划边界数据，下拉菜单实现城市切换，动态切换城市边界到地图视图视角范围内
最新发布
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-02 216
本章是OpenLayers综合实战案例，使用OpenLayers结合下拉菜单实现城市切换，动态切换城市边界到地图视图视角范围内。本章需要使用到ElementUI的下拉框组件和OpenLayers的TopoJson格式解析地市边界数据并负责渲染，通过动态创建style样式来切换城市区划边界高亮效果。如何从vue项目中加载assets资源目录中的TopoJson格式数据。
OpenLayers之多源数据加载七：矢量地图
不睡觉的怪叔叔的博客
08-09 4180
一、矢量地图介绍     矢量地图的图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。     矢量图形最大的优点是无论放大、缩小或旋转等图形都不会失真。矢量地图在地图项目中存在着大量的应用，是地图数据中非常重要的组成部分。     为了便于存储、传递、使用，矢量地图会按照一定的格式来表达，比如常...
OpenLayers入门（一）
jcxxs_xm的博客
01-07 8210
Openlayers入门教程OpenLayers入门（一）新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 OpenLayers入门（一） 大家好，由于最近开始做webgis方面的东西，所以对openlayers需要了解学
Openlayers之地图的基本操作
SmileCoffin的博客
02-04 5681
1、新建一个html页面，引入ol.js和ol.css文件，然后在body中创建一个Div标签和4个Button按钮，用来实现地图的放大、缩小、平移等功能； 2、代码实现 #menu { float : left; position : absolute;
openlayers4加载矢量切片
sxzhustar的专栏
06-09 6642
关于矢量切片的概念以及如何切片已有别人详细的介绍了，对于使用geoserver提供服务来说，安装插件就ok了，不详述。前端调用矢量切片的过程，在geoserver下有三种矢量格式：geojson，topojson，mvt。本人也刚学习这块内容，对于geojson格式已有其他博客介绍，但是本人没有调用成功。前端调用，关键是数据源source的构造，下面是mvt格式的调用格式： var sour
设置openlayers只显示边界内的点
09-19
要设置OpenLayers只显示边界内的点，首先需要获得边界的坐标。可以通过手动输入坐标或通过其他方法获取边界的几何信息。然后使用这些边界信息来筛选和显示点。 具体操作步骤如下： 1. 创建一个OpenLayers地图对象，并设置合适的初始参数和地图容器。 2. 定义边界的几何信息，可以是一个多边形或矩形的几何对象。 3. 创建一个矢量图层，并将边界几何作为该图层的几何对象。 4. 创建一个矢量图层，用于显示点信息。 5. 使用OpenLayers的筛选器功能，将符合边界几何内部的点添加到点图层中。可以通过使用`ol.format.filter`中的空间过滤器来实现。 6. 将点图层添加到地图对象中，以显示边界内的点。 示例代码如下： ```javascript // Step 1 var map = new ol.Map({ target: 'map-container', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: [0, 0], zoom: 2 }) }); // Step 2 var boundaryGeometry = new ol.geom.Polygon([[ [-180, -90], [-180, 90], [180, 90], [180, -90], [-180, -90] ]]); // Step 3 var boundaryLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [new ol.Feature(boundaryGeometry)] }) }); map.addLayer(boundaryLayer); // Step 4 var pointLayer = new ol.layer.Vector({ source: new ol.source.Vector() }); // Step 5 var filter = ol.format.filter.intersects( 'geometry', boundaryGeometry, 'EPSG:4326' ); var source = new ol.source.Vector({ format: new ol.format.GeoJSON(), url: 'url_to_points_data.geojson', loader: function(extent, resolution, projection) { var url = this.getUrl(); if (url) { var xhr = new XMLHttpRequest(); xhr.open('GET', url); var self = this; xhr.onload = function() { if (xhr.status == 200) { var format = self.getFormat(); self.addFeatures(format.readFeatures(xhr.responseText, { dataProjection: 'EPSG:4326', featureProjection: projection })); } }; xhr.send(); } }, strategy: ol.loadingstrategy.bbox, projection: 'EPSG:4326', loader: ol.loadingstrategy.tile(boundaryLayer, 16, filter) // Apply the filter to load only points within the boundary }); pointLayer.setSource(source); // Step 6 map.addLayer(pointLayer); ``` 以上代码中，我们首先创建了一个包含OSM图层的OpenLayers地图，并在给定地图容器中显示地图。接着我们定义了一个简单的边界多边形几何对象，将其作为一个矢量图层添加到地图中。然后，我们创建了一个用于显示点的矢量图层，并使用空间过滤器将位于边界内部的点添加到点图层中。最后，我们将点图层添加到地图对象中进行显示。请根据你的实际需求修改代码和边界几何。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值