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

已于 2023-11-07 23:35:56 修改
阅读量672 收藏 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 个专栏收录 该专栏为热销专栏榜 第30名
132 篇文章 13 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6实战
53 篇文章 35 订阅 ¥69.90 ¥99.00
订阅专栏
本篇博客通过OpenLayers在vue项目中加载GeoJson格式的中国省级行政区划边界数据，详细讲解了如何解析渲染边界，并实现鼠标经过时省级区域边界的高亮显示。内容包括依赖安装、数据加载、样式创建和事件监听等关键步骤，最终展示测试效果。
摘要由CSDN通过智能技术生成

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

前言

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

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

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

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

二、依赖和使用

"ol"
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 9
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Openlayers实例详解
08-09
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
openlayers：实现行政区划边界绘制（附完整源码）
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 213
openlayers：实现行政区划边界绘制（附完整源码）
Openlayer对wfs服务进行增删改查
09-29 1308
注意：ol版本要用5.3.3，保证newGeoJson正常使用。6.1.1中不能用newGeoJSON（） 查询数据 查询链接： http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&maxFeatures=50&outputFormat=applicatio...
vue+openlayers实现行政边界、标注交互、效果弹窗
Arzz的记事本
05-26 2662
vue+openlayers实现行政边界、标注交互、效果弹窗需求最终效果环境安装/依赖引入html部分逻辑部分1.创建变量/初始化地图/常量2.拿到后台数据/通过json加载中国区划3.添加标注4.添加弹窗5.CSS样式附件 需求 1.实现中国行政区划地图展示。 2.地图标注出每个省份的数据结果，hover交互查看详情。 3.参与人数越多的对应省份颜色越深。 最终效果 环境安装/依赖引入 OpenLayers通过NPM 安装 npm install ol -S 引入依赖 import chinaDa
10. Openlayers加载GeoJSON、含文件（结合vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-18 4161
欢迎来到 OpenLayers 的学习之旅！今天我们将深入探讨如何在 OpenLayers 地图中加载 GeoJSON 数据。你会看到代码是如何通过层层叠加的方式来建立这个功能，以及如何制定自定义样式来展示独特的 GeoJSON 数据。
openlayers01——使用openlayers展示GeoJSON数据
sheyueyu的博客
02-05 1183
【代码】openlayers01——使用openlayers展示GeoJSON数据。
Openlayers根据geojson格式数据渲染聚合图
01-06
geojson作为webGIS较常用的数据格式，没有给定如何将geojson格式渲染为聚合图的示例，因此本示例将Openlayers官网提供的geojson格式数据加载示例与聚合图渲染示例结合，形成根据geojson格式数据渲染聚合图的示例。
OpenLayers3实现鼠标移动显示坐标
10-14
- **coordinateFormat**：坐标值的显示格式。 - **target**：关联的DOM元素，用于显示鼠标位置坐标点的信息。 - **className**：鼠标信息的样式类名，可以自定义。 - **undefinedHTML**：当鼠标位置无法确定坐标...
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，允许开发者进行复杂的地图操作，如缩放、平移、添加图层、绘制几何对象等。对于描述...
OpenLayers 5 使用GeoJSON数据渲染热力图
老胡的CSDN博客
05-08 4962
GIS开发中会遇到需要使用热力图Heatmap的时候，openlayers5官方示例给出的是kml文件描述的热力图数据，开发中接触更多的还是GeoJSON格式，本文就使用GeoJSON格式来实现一个热力图。 一、实现思路 https://openlayers.org/en/latest/examples/heatmap-earthquakes.html 官方例子是从一个kml文件解析出生成的热力...
3. OpenLayers 教程：地图视图与投影 （结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1016
本篇文章主要介绍了 OpenLayers 的地图视图与投影相关概念。首先，文章讲解了地图视图基本概念，以及如何控制地图缩放级别、中心点与限制范围；其次，文章详细介绍了地图投影与坐标转换的方法，并展示了如何在实际应用中使用地理坐标系与投影坐标系进行操作。通过学习本篇文章，读者可以更好地理解 OpenLayers 中的地图视图与投影，并能够灵活运用地理坐标与投影坐标在实际项目中进行开发。
VUE+Echart+Geojson实现全国地图map数据展示
天弃的博客
05-31 2425
效果 Geojson 首先去这个网站下载需要展示的map，（全国/省/市），（点击省能进入市） https://datav.aliyun.com/portal/school/atlas/area_selector 下载右侧的json文件 Echart 我用的是这种效果的地图https://echarts.apache.org/examples/zh/editor.html?c=map-HK VUE 将下载好后的json文件扔进项目 以下内容直接粘贴全部代码 &...
Openlayers(三) vue3结合Geoservser加载城市边界
qq_42583549的博客
03-26 1425
创建图层、数据仓库、工作空间，有两个名称中文部分是为了方便我们维护数据时候能够快捷看明白是什么数据，英文名称是为了前端使用openlayer请求的时候能够对应上。数据图层通过geoserver发布后，我们可以获取图片、JSON数据等多种方式图层信息，geoserver内置预览是以wms数据形式加载图层信息。然后点击发布，我们可以在图层预览中看到我们发布的图层信息，geoserver前端使用openlayer加载数据。图层，对点位数据转化为对外提供服务能力，转化为（图片、JSON数据等）
openlayer中geojson要素图层设置style样式
08-26 7411
import "ol/ol.css"; import { Map, View } from "ol"; import { TileWMS, OSM, Vector as VectorSource } from "ol/source"; import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer"; import GeoJSON from "ol/format/GeoJSON"; import { Fill, Stroke, Styl.
OpenLayers自定义圆锥投影中国地图
YuWebGIS
08-30 1248
圆锥投影是横版中国地图常用的地图投影，正式名称为正轴等面积割圆锥投影。横版中国地图具体参数为，中央经线110°E，标准纬线25°N、47°N。
OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 1031
本章介绍一下使用OpenLayers如何使用GeoJson数据，GeoJson数据格式可以参考博主另一篇文章《GIS开发入门，GeoJSON是什么？GeoJSON格式标准介绍》，那么废话少谈，让我们立刻开始加载GeoJson数据并叠加OpenLayers的矢量图层上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值