OpenLayers6入门，OpenLayers解析通过fetch请求的GeoJson格式数据，并叠加要素文字标注，以行政区划边界为例

原创 已于 2024-05-09 14:09:34 修改 · 604 阅读 · 2 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#javascript #前端 #vue.js #OpenLayers #GeoJson数据加载 #GeoJson多边形叠加 #文字标注叠加

于 2023-08-04 16:46:03 首次发布
本文介绍了如何在OpenLayers6中使用fetch请求GeoJson数据，解析为Feature要素并叠加到地图上，特别是行政区划边界的案例。通过动态设置标注展示要素属性，提供代码实现和测试效果演示。

返回目录：OpenLayers6入门目录

前言

本章讲解如何使用OpenLayers通过fetch请求geojson数据，然后通过OpenLayers解析为Feature要素叠加到图层上，并且通过动态设置标注方式显示要素属性为文字标注。

本章还是以行政区划边界为例，这个示例在开发中比较常用，建议收藏。

openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm instal
了解本专栏 订阅专栏 解锁全文
OpenLayers6入门，OpenLayers使用fetch加载并显示TopoJson格式区划边界数据并叠加文字标注，动态创建要素样式
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
08-04 513
上一章中已经说明了TopoJson格式数据，《OpenLayers入门，OpenLayers加载TopoJson数据，使用行政区划边界作为示例》，大家应该都已经有所了解。本章在上一章基础上改用fetch加载TopoJson格式数据，并手动解析数据为Feature要素，并且动态创建要素style格式还要根据要素属性额外叠加文字标注。
Vue+OpenLayers7入门到实战：OpenLayers解析通过fetch请求的GeoJson格式数据，并叠加要素文字标注，以行政区划边界为例
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
05-09 443
本章介绍如何使用OpenLayers7在地图上通过fetch请求geojson数据，然后通过OpenLayers解析为Feature要素叠加到图层上，并且通过动态设置标注方式显示要素属性为文字标注。
OpenLayers 6实现底图裁剪效果,只显示指定城市或区域范围内的地图
liu2004051957的博客
11-22 3259
本源代码基于OpenLayers 6开发库实现底图的区域裁剪显示效果，比如只显示某城市或指定边界范围内的地图。
OpenLayers geojson 进行展示矢量标签展示
技术分享
04-27 1634
效果预览： 在线沙盒地址：https://codesandbox.io/s/dazzling-borg-ejzce GeoJSON： GeoJSON是一种对各种地理数据结构进行编码的格式，支持下面几何类型：点、线、面、多点、多线、多面和几何集合。（自己百度） 推荐工具地址：http://geojson.io在线矢量图，可以查看个格式 GeoJSON特征集合： let geojs...
openlayers给要素加文字注记
热门推荐
u013594477的专栏
10-31 1万+
在项目中，需要给每个行政市区的中心加上该行政区的name，我之前的实现方法都是用一个新的图层，专门来加文字注记，但是有一点，需要知道这个图形的中心位置，如果是规则的图形的话，可以很方便的找出中心位置，知道左下角和右上角坐标即可，假设记为coordinate,该方法的代码如下所示： // 添加监测值 var anchor_value = new ol.Feature({ geometr...
openlayers 添加文字标注
06-18
openlayers 实现在地图上添加文字标注。为图片注记添加文本标签
Vue+OpenLayers7入门到实战：OpenLayers使用fetch加载并显示TopoJson格式区划边界数据并叠加文字标注，动态创建要素样式
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
05-29 539
本章介绍如何使用OpenLayers7在地图上使用fetch加载TopoJson格式数据并叠加文字要素，并且支持动态创建要素样式。上一章中已经说明了TopoJson格式数据，《OpenLayers加载TopoJson数据，使用行政区划边界作为示例》，大家应该都已经有所了解。本章在上一章基础上改用fetch加载TopoJson格式数据，并手动解析数据为Feature要素，并且动态创建要素style格式还要根据要素属性额外叠加文字标注。
OpenLayers实战，OpenLayers获取用户定位位置并高亮显示用户所在行政区划
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-26 953
本篇文章通过国内的省、自治区和直辖市的GeoJson数据作为行政区划边界数据，然后根据用户定位位置，通过OpenLayers计算得到用户所在行政区划，并使用OpenLayers高亮显示用户所在行政区划边界。本章是综合应用场景，所以代码稍稍有些复杂，对于新入门读者可能难以上手，因此下面提供本文中使用到的技术，方便大家拆分参考，容易上手：加载GeoJson数据渲染行政区划边界参考文章OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上。
OpenLayers入门，OpenLayers从vue的assets资源路径加载TopoJson文件并解析数据叠加到地图上，以加载世界各国边界为例
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-30 399
本章以加载世界各国边界的TopoJson格式数据为例，讲解如何使用OpenLayers从vue的assets资源路径加载TopoJson文件并解析数据叠加到地图上。GEOJSON是gis地图中常用的数据格式，制作地图时用于存储各种地理数据，使用时通过OpenLayer、Leaflet、mapLibre-gl或者Cesium加载GEOJSON即可渲染出GEOJSON中描述的地理要素。GIS开发入门，GeoJSON是什么？
openlayers文字标注 (九)
吴佩佩佩佩的博客
06-02 6654
文字样式 let itemStyle = new Style({ text: new Text(({ // 位置 textAlign: 'center', // 基准线 textBaseline: 'middle', // 文字样式 font: 'bold 12px 微软雅黑', // 文本内容 text: '我是文字', // 文字颜色 fill: new Fill({ color: '#587de5' }), /
openlayers：实现文字标注（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 553
openlayers：实现文字标注（附完整源码）
Vue+OpenLayers7入门到实战，OpenLayers加载GeoJson数据并叠加GeoJson中的要素到地图上
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-23 579
本章介绍如何使用OpenLayers7在地图上加载GeoJson数据并叠加GeoJson中的要素到OpenLayers矢量图层上。GeoJson数据格式可以参考博主另一篇文章《GIS开发入门，GeoJSON是什么？GeoJSON格式标准介绍》，那么废话少谈，让我们立刻开始加载GeoJson数据并叠加要素到地图上。
OpenLayers6入门，OpenLayers如何加载百万数据量的GeoJson点数据并叠加到webgl渲染图层上，百万海量点数据叠加不卡
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
07-24 2156
上一章中《OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上》，我们讲解了少量数据加载并叠加到OpenLayers矢量图层上，如果数量特别大，浏览器就会很卡，所以需要用到webgl图层进行加载，本章就讲解使用webgl图层叠加海量GeoJson点数据。
openlayers标注面要素
AIGIS的博客
11-09 768
前言：最近有个需求，要标注面要素，搜索关于openlayers标注的教程，都是关于点要素的，标注面要素的几乎没有，最后openlayers官网找到了例子，自己再根据例子进行实现，这里记录一下。 引用大牛的话：在Openlayers3里面，有两种对地理位置点进行标注的方法，一种是通过创建矢量图层然后设置其样式的方法，还有一种就是创建Overlay覆盖层的方法；对于第一种方式，...
openlayers-09-添加标注（文字+图片）
chuanren1991的博客
05-16 4313
以上顺序也可以进行调整，可以先实例化标注对象，在实例化矢量图层时直接将 标注对象放在矢量图层源的features属性中，而不是调用addFeature()方法，后期进行添加。同理，在实例化map对象时，直接将矢量图层添加到map对象的layers属性中，而不是在后面调用map的addLayer()方法添加图层。在地图上添加标注，大概分为三步。
Vue.js2+OpenLayers6 四、添加覆盖图层
qq_37236395的博客
05-09 1246
一、添加标注功能方法封装 添加矢量标注所需依赖，并封装方法。 InitMap.vue /* eslint-disable no-unused-vars */ import mapConfig from '@/mapConfig' // 地图配置 import "ol/ol.css" import Map from "ol/Map" import View from "ol/View" import TileLayer from "ol/layer/Tile" import TileWMS from "ol/
使用Openlayers叠加天地图
leegyoungfree的博客
05-25 2097
Tianditu:天地图 BaiduMap: 百度地图 什么是Openlayers? openlayers是一个专为Web Gis客户端开发提供的javascript包。OpenLayers 支持的地图包括Google Maps、Yahoo、 Baidu、天地图、微软Virtual Earth 等等，可以说是功能非常之强大。 Openlayers支持调用远程服务器地图（以OGC形式发布的地图）到本地的客户端浏览器中进行显示。 OpenLayers 除了可以在浏览器中帮助开发者实现地图浏览的基本效果，比如放大
10. Openlayers加载GeoJSON、含文件（结合vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-18 5086
欢迎来到 OpenLayers 的学习之旅！今天我们将深入探讨如何在 OpenLayers 地图中加载 GeoJSON 数据。你会看到代码是如何通过层层叠加的方式来建立这个功能，以及如何制定自定义样式来展示独特的 GeoJSON 数据。
fetch 读取geojson数据
最新发布
10-15
<think>我们正在讨论如何使用fetch API来读取GeoJSON数据。根据用户的需求，他们希望了解具体的方法。 引用[1]说明了GeoJSON是一种常用的地理数据交换格式，而引用[2]展示了一个使用axios（另一种HTTP客户端）来获取GeoJSON数据并在地图上显示的示例。 现在用户要求使用fetch，这是浏览器内置的用于发起网络请求的API。 步骤： 1. 使用fetch发起GET请求获取GeoJSON数据。 2. 处理响应，将响应解析为JSON（因为GeoJSON本身就是JSON格式）。 3. 然后，我们可以使用解析后的数据来创建OpenLayers的矢量图层（因为引用[2]中使用了OpenLayers，所以假设用户也是在使用OpenLayers）。 4. 将矢量图层添加到地图中。 注意：由于GeoJSON数据可能较大，我们需要注意异步处理和错误处理。 我们将编写一个使用fetch的示例代码，并给出解释。 另外，根据引用[2]中的代码，我们注意到它使用了OpenLayers的GeoJSON格式解析（`(new GeoJSON()).readFeatures`）来将GeoJSON数据转换为OpenLayers的Feature数组。 因此，在fetch的示例中，我们也将使用类似的方式。 但是，请注意，引用[2]中使用了`res.data`，因为axios将响应数据放在data属性中。而fetch则需要调用.json()方法来解析响应体。 下面我们用fetch重写引用[2]中的功能。 </think>以下是使用 `fetch` API 读取 GeoJSON 数据的方法及完整实现步骤： ### 1. 基础读取方法 ```javascript fetch('path/to/your-data.geojson') .then(response => response.json()) // 将响应解析为JSON .then(geoJsonData => { console.log('GeoJSON数据:', geoJsonData); // 此处处理GeoJSON数据 }) .catch(error => { console.error('数据加载失败:', error); }); ``` ### 2. 结合 OpenLayers 渲染地图 ```javascript // 1. 创建地图容器 const map = new ol.Map({ target: 'map' }); // 2. 使用fetch获取GeoJSON fetch('https://example.com/data.geojson') .then(response => response.json()) .then(geoJson => { // 3. 创建矢量图层 const vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: new ol.format.GeoJSON().readFeatures(geoJson) // 解析GeoJSON }), style: 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)' }) }) }); // 4. 添加到地图 map.addLayer(vectorLayer); // 5. 自动缩放至数据范围 map.getView().fit(vectorLayer.getSource().getExtent()); }) .catch(err => console.error('加载错误:', err)); ``` ### 关键点说明： 1. **数据解析** `new ol.format.GeoJSON().readFeatures()` 方法将原始 GeoJSON 对象转换为 OpenLayers 可识别的要素集合 2. **错误处理** `.catch()` 捕获网络请求或数据解析错误 3. **样式定制** 通过 `style` 属性自定义要素渲染样式： ```javascript style: new ol.style.Style({ image: new ol.style.Circle({ // 点要素样式 radius: 5, fill: new ol.style.Fill({color: 'red'}) }), stroke: new ol.style.Stroke({ // 线要素样式 color: 'green', width: 3 }) }) ``` 4. **异步处理** 使用 `async/await` 的等价实现： ```javascript async function loadGeoJSON() { try { const response = await fetch('data.geojson'); const geoJson = await response.json(); // 处理数据... } catch (error) { console.error(error); } } ``` ### 最佳实践建议： 1. **跨域问题** 若数据在第三方服务器，需确保配置 CORS 头信息 (`Access-Control-Allow-Origin`) 2. **性能优化** 大型数据集建议使用矢量切片服务，或添加加载指示器： ```javascript document.getElementById('loader').style.display = 'block'; fetch(...).finally(() => { document.getElementById('loader').style.display = 'none'; }); ``` 3. **数据验证** 添加 GeoJSON 结构校验： ```javascript if (!geoJson.type || geoJson.type !== 'FeatureCollection') { throw new Error('无效的GeoJSON格式'); } ``` GeoJSON 作为轻量级地理数据格式，结合现代浏览器原生支持的 `fetch` API，可高效实现地理数据的动态加载与可视化[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值