OpenLayers6入门，OpenLayers如何加载WFS服务的要素资源数据

已于 2024-03-05 10:16:33 修改
阅读量705 收藏 1
点赞数 1
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 文章标签： javascript 前端 vue.js OpenLayers WFS服务 WFS数据
于 2023-08-01 11:42:52 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/132038825
版权
Vue+OpenLayers6入门到实战 同时被 2 个专栏收录
121 篇文章 59 订阅 ¥119.90 ¥99.00
订阅专栏
Vue+OpenLayers6入门
68 篇文章 90 订阅 ¥69.90 ¥99.00
订阅专栏

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

前言

本章讲解如何使用OpenLayers6加载WFS服务的要素资源数据。

WFS规范介绍

WFS是基于地理要素级别的数据共享和数据操作，WFS规范定义了若干基于地理要素（Feature）级别的数据操作接口，并以 HTTP 作为分布式计算平台。通过 WFS服务，客户端可以得到矢量数据格式描述的单个地理要素的空间数据或要素集的空间数据，并可以对单个地理要素进行编辑、 删除、 添加等数据操作。WFS采用 GML描述地理要素特征， 根据用户请求的内容返回 GML描述的空间数据。

openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install [email protected]
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Openlayers 教程 18 - 中加载渲染 WMTS TMS XYZ WMS WFS 图层以及示例
linzi19900517的博客
12-05 4282
本文详细总结介绍 Openlayers 中加载渲染 WMTS TMS XYZ WMS WFS 图层。 以及在线示例。
openlayers加载arcgis发布的OGC WMS服务
01-09
openlayers加载arcgis发布的OGC WMS服务。。。。。。。。。
openlayers加载本地切片、高亮显示
04-01
花费了很久整理的ol2的代码直接可用附带3级切片
openlayers 加载Geoserver wfs服务
01-06
利用openlayers加载geoserver wfs服务发布的矢量图层。
openlayers笔记1：加载矢量地图数据的方法以及应对跨域问题的解决方法
01-08
OpenLayers笔记1：加载矢量地图数据的方法以及应对跨域问题的解决方法加载矢量地图数据的两种方法加载本地geojson格式文件出现的跨域问题及解决方法。向geoserver请求WFS服务出现的跨域问题及解决方法。 加载矢量地图数据的两种方法 使用OpenLayers加载矢量地图数据可以有两种方法。一是直接加载本地geojson格式的文件；二是将矢量地图数据发布到GIS服务器，然后使用OpenLayers请求WFS服务调取矢量地图数据。（以下以GeoServer为例） 这两种方法在使用时都可能会出现跨域问题（Console中以Access to XMLHttpRequest 开头的错误)
OpenLayers3加载常用控件使用方法详解
10-14
主要为大家详细介绍了OpenLayers3加载常用控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers中更简单的加载wfs服务的方式
此爱如少年
02-09 1449
注意：这时 bbox是放在CQL_FILTER参数里面的。即可以通过createXYZ生成瓦片区域，然后传到url函数里面，通过bbox参数加到url地址上。在之前我介绍过openlayers中通过wfs服务加载矢量数据的方法，通常我都是按照这种方法来使用。在翻看openlayer官方示例后，发现其实还有其它的方法。如果要加属性查询条件，可以给url上带上CQL_FILTER参数。openlayers中更简单的加载wfs服务的方式。直接给出url来加载。
Openlayers的空间查询wfs
ANNENBERG的博客
07-15 3509
Openlayers的空间查询，下面主要包括三种查询，分别是点击地图查询，过滤条件查询，多边形查询等。说明的文字不是很多，直接看代码，最后提供一份完整的代码，直接复制到html中就可以运行。 1.点击查询 点击查询主要是使用map的forEachFeatureAtPixel进行查询，首先需要给地图添加一个点击事件，如下所示： //点击查询 map.on('singleclick',function(evt){ var pixel = map.getEventPixel(e
Openlayers实现WFS服务及单击要素查询
郜科科的博客
07-26 8945
Openlayers发布WFS服务及单击要素查询 郜庆科
Vue+OpenLayers学习系列（六）OpenLayers 加载 WFS 地图服务（GeoServer）
Ocean111best的博客
08-02 2842
一、首先用 GeoServer 发布地图服务 在 Layer Preview 里面选择一个图层，在 All Formats 里面可以选择 GeoJson 二、OpenLayers 读取 WFS 服务 <template> <div id="map" ref="rootmap"> </div> </template> <script> import 'ol/ol.css'; import Map from 'ol/Ma
Openlayer加载GeoServer的WFS服务
qq_40098572的博客
07-27 693
openlayer加载geoserver的wfs图层
全网最新版openlayers视频教程
02-27
学习关于二维地理图层渲染，投影转换，各种数据类型渲染，OGC服务，各种地图交互
openlayers学习（五）wfs图层的过滤条件filter
mylove10086
10-19 4186
要达到的效果通过多边形或者要素属性过滤wfs的图形要素 使用上一节的方法二进行过滤图形 1、加载地图： var rootLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G' }) //加载谷歌
openlayer 加载wfs 2种方式
淘淘小窝
06-23 3263
1.geojson var geo = new OpenLayers.Layer.Vector("EarthQuake", { strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: 'http://172.31.170.98:
openlayers调起WFS服务进行增、删、改操作及相关问题汇总
此爱如少年
03-09 4503
前言 openlayers中提供了通过wfs服务操作后台数据的方法，对应的方法为ol.format.WFS类的writeTransaction方法。以下通过简单的示例来了解下。 示例中的wfs服务来自geoserver 一、简单示例- 1、通过wfs服务获取数据 // 服务配置，命名空间、图层、服务地址等 var geoserverData = { wsName: 'topp', uri: 'http://www.openplans.org/topp', wfsURL: 'http://loca
基于OpenLayers的多种地图服务（WMS WMTS WFS VectorTile）加载
HeyLoong的博客
11-29 1050
基于OpenLayers的多种地图服务（WMS、WMTS、WFS、VectorTile）加载demo
215：vue+openlayers 使用new WFS加载数据，通过like,and,equalTo来过滤数据
大剑师兰特的GIS世界
03-10 288
第215个本示例的目的是介绍演示如何在vue+openlayers中使用new WFS加载数据，通过like,and,equalTo来过滤数据，具体的加载方式参考源代码。
Openlayer对wfs服务进行增删改查
~~
09-29 1210
注意：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...
openlayers3加载wfs服务
傲骨雄风的博客
10-29 2378
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Ol3 popup&lt;/title&gt; &lt;link rel="stylesheet" type="te
openlayers加载WFS图层
最新发布
05-21
要加载WFS图层，可以使用OpenLayers的VectorLayer和WFSLayer。以下是一个简单的示例： 首先，在HTML文件中包含OpenLayers库： ```html <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script> ``` 然后，创建一个地图容器： ```html <div id="map" style="width:100%;height:500px;"></div> ``` 接下来，编写JavaScript代码： ```javascript // 创建一个地图对象 var map = new OpenLayers.Map("map"); // 创建一个WFS图层 var wfsLayer = new OpenLayers.Layer.Vector( "WFS", { strategies: [new OpenLayers.Strategy.BBOX()], protocol: new OpenLayers.Protocol.WFS({ url: "http://localhost:8080/geoserver/wfs", featureType: "myWorkspace:myFeatureType", featureNS: "http://www.my-namespace.com", srsName: "EPSG:4326" }) } ); // 将WFS图层添加到地图中 map.addLayer(wfsLayer); // 设置地图中心和缩放级别 map.setCenter(new OpenLayers.LonLat(0, 0), 2); ``` 在这个例子中，我们创建了一个WFS图层，并将其添加到地图中。在WFS图层的配置中，我们指定了WFS服务的URL、要素类型和命名空间。我们还指定了坐标系为EPSG:4326。最后，我们设置了地图的中心和缩放级别。 注意，这个例子假设你已经在本地安装了GeoServer，并且已经发布了一个名为“myFeatureType”的要素类型。如果你没有安装GeoServer，或者没有发布任何WFS服务，那么你需要相应地修改代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值