OpenLayers6入门，OpenLayers使用fetch加载并显示TopoJson格式区划边界数据并叠加文字标注，动态创建要素样式

已于 2024-03-05 10:17:22 修改
阅读量335 收藏 1
点赞数 1
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： javascript vue.js OpenLayers TopoJson格式数据 动态style样式 区划文字标注
于 2023-08-04 14:57:13 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/132104442
版权
OpenLayers6一本通 同时被 3 个专栏收录 该专栏为热销专栏榜 第30名
132 篇文章 13 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门
69 篇文章 93 订阅 ¥69.90 ¥99.00
订阅专栏
本教程介绍如何在OpenLayers6中使用fetch加载TopoJson格式的区划边界数据，并动态创建要素样式进行文字标注。首先，通过fetch API获取数据，然后使用OpenLayers的解析器将TopoJson转换为Feature，接着动态构建样式以添加文字标签。在vue项目中，可以参照相关指南集成OpenLayers。
摘要由CSDN通过智能技术生成

专栏目录：
OpenLayers6入门教程汇总目录

前言

上一章中已经说明了TopoJson格式数据，《OpenLayers6入门，OpenLayers加载TopoJson数据，使用行政区划边界作为示例》，大家应该都已经有所了解。
本章在上一章基础上改用fetch加载TopoJson格式数据，并手动解析数据为Feature要素，并且动态创建要素style格式还要根据要素属性额外叠加文字标注。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
OpenLayers6入门，OpenLayers加载TopoJson数据，使用行政区划边界作为示例
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-04 471
本章讲解一下OpenLayers如何加载解析TopoJson格式的数据。TopoJson是用于表示地理空间数据的格式。是GeoJson格式的改进版，相比 GeoJSON 直接使用 Polygon、Point 之类的几何体来表示图形的方法，TopoJSON 中的每一个几何体都是通过将共享边（被称为arcs）整合后组成的，因此TopoJSON 消除了部分冗余数据，使得文件最终大小比GeoJson缩小了约 80%。与GeoJson的区别TopoJson和GeoJson是两种用于表示地理空间数据的格式。
openlayers 添加文字标注
06-18
openlayers 实现在地图上添加文字标注。为图片注记添加文本标签
openlayers：实现文字标注（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 173
openlayers：实现文字标注（附完整源码）
openlayers-09-添加标注（文字+图片）
chuanren1991的博客
05-16 3243
以上顺序也可以进行调整，可以先实例化标注对象，在实例化矢量图层时直接将 标注对象放在矢量图层源的features属性中，而不是调用addFeature()方法，后期进行添加。同理，在实例化map对象时，直接将矢量图层添加到map对象的layers属性中，而不是在后面调用map的addLayer()方法添加图层。在地图上添加标注，大概分为三步。
openlayers：实现演示TopoJSON拓扑中的功能呈现 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 23
openlayers：实现演示TopoJSON拓扑中的功能呈现 (附完整源码）
openlayers加载瓦片地图并手动标记坐标点
最新发布
04-29
在OpenLayers中，我们可以使用`ol.Feature`和`ol.geom.Point`来创建标记点，并通过`ol.layer.Vector`将其显示在地图上。以下是一个示例： 1. 创建点几何对象：首先，定义一个坐标点（以EPSG:3857投影为例）： ```...
使用openlayers加载离线地图实例
10-06
在IT行业中，前端开发是构建Web应用程序的关键部分，而OpenLayers是一个流行的JavaScript库，用于创建交互式的、基于Web的地图应用。本实例将详细介绍如何利用OpenLayers加载离线地图，并通过mui将其打包成移动应用...
vue集成openlayers加载geojson并实现点击弹窗教程
01-22
1.新建项目 （vue-openlayers为项目名）,并选择default模版 vue create vue-openlayers 2.安装openlayers cnpm i -S ol 第三步：写业务代码 1.删除掉HelloWorld.vue 新建 olmap.vue组件 components/olmap.vue代码...
Openlayers切换底图，并保持原有矢量数据显示
11-05
比如天地图、谷歌地图、高德地图等，由于各地图使用的坐标系不一致，所以在动态切换底图时，通常需要处理地图容器中已存在的矢量数据，接下来我们以天地图和谷歌地图的切换，并保持地图容器中的矢量数据正常显示为例...
openlayers3 获取点图层数据并添加标注和展示标注信息实例
11-29
openlayers3 显示静态地图，从后台查询点数据（后台java代码没有提交，太简单了。。。）展示到地图并添加标注，给标注添加点击事件并展示标注信息，初次接触开源GIS，代码中有错误还请各位看官指正，感谢！
OpenLayers地图要素tooltip[文字提示]
01-24
OpenLayers地图要素tooltip[文字提示]，对要素进行动态提示
openlayers显示统计图文字标签
01-04
openlayers显示统计图文字标签的代码
OpenLayers6入门，OpenLayers解析通过fetch请求的GeoJson格式数据，并叠加要素文字标注，以行政区划边界为例
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-04 404
本章讲解如何使用OpenLayers通过fetch请求geojson数据，然后通过OpenLayers解析为Feature要素叠加到图层上，并且通过动态设置标注方式显示要素属性为文字标注。
Vue+OpenLayers7入门到实战：OpenLayers加载GeoJson格式数据并解析成多边形、线段、点和区域范围等要素叠加到地图矢量图层上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-25 538
本章介绍如何使用OpenLayers7在地图上加载GeoJson格式数据并解析成多边形、线段、点和区域范围等要素叠加到地图矢量图层上的功能。前面两章也是可以支持多边形、线段、点和区域范围灯数据加载的，只是没有设置样式，所以只能看到点，本章就相当于完整版本，可以将所有图形都详细展示出来。
121：vue+openlayers 加载中国边界JSON数据（EPSG:4326）
大剑师兰特的GIS世界
09-06 835
本示例的目的是介绍演示如何在vue+openlayers中添加JSON数据，显示的是中国的边界线（EPSG:4326）。
Vue.js2+OpenLayers6 四、添加覆盖图层
qq_37236395的博客
05-09 1050
一、添加标注功能方法封装 添加矢量标注所需依赖，并封装方法。 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实例详解
08-09
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
openlayers文字标注 (九)
吴佩佩佩佩的博客
06-02 6081
文字样式 let itemStyle = new Style({ text: new Text(({ // 位置 textAlign: 'center', // 基准线 textBaseline: 'middle', // 文字样式 font: 'bold 12px 微软雅黑', // 文本内容 text: '我是文字', // 文字颜色 fill: new Fill({ color: '#587de5' }), /
Openlayer 面图层加载文字标注(踩坑)
weixin_43224584的博客
04-09 2997
** 最近使用openlayer添加网格，需要加载文字标注，在这里遇见一个问题：当你添加面坐标是字符串时，则文字标注加载不上去。** 图层样式： style: function (feat) { var style = new ol.style.Style({ fill: new ol.style.Fill({ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值