GeoTools 结合 OpenLayers 实现属性查询(二)

前言

在GIS开发中,属性查询是非常普遍的操作,这是每一个GISer都要掌握的必备技能。实现高效的数据查询功能可以提升用户体验,完成数据的快速可视化表达。

本篇教程基于前一篇文章GeoTools 结合 OpenLayers 实现属性查询进行优化完善(如果你还没有看过,请从那里开始),讲解如何将使用GeoTools工具结合OpenLayers实现PostGIS空间数据库数据的属性查询功能,着重说明从后端读取FeatureCollection对象在前端直接加载。

1. 后端转换FeatureCollection对象

在本例中通过创建一个FeatureJSON和一个StringWriter对象,将FeatureCollection数据转换为GeoJSON字符串返回给前端。

复制代码
// 创建 FeatureJSON 对象
FeatureJSON featureJSON = new FeatureJSON();
StringWriter writer = new StringWriter();
featureJSON.writeFeatureCollection(collection,writer);
// 将 FeatureCollection 转换为JSON 字符串
String jsonFeatures = writer.toString();
result.put("countries",jsonFeatures);

与前面文章例子中不同的是使用此种方法不需要创建实体对象,也不需要像下面这样遍历要素集合,然后构造要素属性,直接返回一个json字符串即可,使用起来就显得方便简单。

复制代码
try(FeatureIterator<SimpleFeature> features = collection.features()) {
    while (features.hasNext()) {
        SimpleFeature feature = features.next();
        Countries country = new Countries();
        country.setGid((Integer) feature.getAttribute("gid"));
        // 此处构造要素属性数据		

        Object geometry = feature.getAttribute("geom");
        GeometryJSON geometryJSON = new GeometryJSON();
        StringWriter writer = new StringWriter();

        geometryJSON.write((Geometry) geometry,writer);
        String geoJSON = writer.toString();

        country.setGeom(geoJSON);
        countries.add(country);
    }
}catch (Exception e){
   e.printStackTrace();
}

代码修改前后对比图。

2. 前端读取FeatureCollection对象

使用此种方式在前端加载数据时也需要改写一下,主要有三个注意的点:一方面是因为后端返回的是JSON字符串数据,所以前端加载时需要使用JSON.parse方法将其解析为JSON对象;另外一方面是使用features.forEach遍历集合要素设置动态颜色值,最后是使用readFeatures方法读取FeatureCollection对象。

复制代码
const countries = JSON.parse(result.countries)
// 设置动态颜色属性
countries.features.forEach(feat => {
    feat.properties.color = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`
})
// 读取 FeatureCollection 数据
const features = new ol.format.GeoJSON().readFeatures(countries)
const vectorSource = new ol.source.Vector({
    features: features,
    format: new ol.format.GeoJSON()
})

代码修改前后对比图。

OpenLayers示例数据下载,请回复关键字:ol数据

全国信息化工程师-GIS 应用水平考试资料,请回复关键字:GIS考试
【GIS之路】 已经接入了智能助手,欢迎关注,欢迎提问。

欢迎访问我的博客网站-长谈GIS :http://shanhaitalk.com

都看到这了,不要忘记点赞、收藏 + 关注 哦 !

本号不定时更新有关 GIS开发 相关内容,欢迎关注 !

相关推荐
Highcharts.js3 分钟前
关联网络图可视化与力导向关系图开发示例
学习·信息可视化·highcharts·前端可视化·交互图表·力导向图·network graph
环境栈笔记10 分钟前
指纹浏览器检查代理失败怎么排查?先分清代理、网络和检测服务
前端·人工智能·后端·自动化
ShineWinsu14 分钟前
对于HTML:HTML常见标签的解析—下
前端·css·面试·html·标签·表单·emmet
恋猫de小郭16 分钟前
Kotlin 2.5 的 Companion 改造,对 KMP 的重要升级
android·前端·flutter
前端双越老师29 分钟前
程序员 1v1 访谈系列第二期:很焦虑但又不知道干啥
前端·ai编程·全栈
广州华水科技43 分钟前
北斗形变监测传感器在大坝安全监测中的应用与优势分析
前端
孔令飞1 小时前
如何学习Go
前端
HUIBUR科技1 小时前
AI 中枢,面向企业场景构建的 AI 智能体
前端·数据库·人工智能
随便写个软件1 小时前
【新版本】EasyExplorer资源管理器 3.12.0——地址栏重要更新
运维·服务器·前端·everything·资源管理器
Jack N1 小时前
【Strapi 系列之二】Collection / Single / Component 怎么选?Strapi 字段大全一篇讲透
前端·javascript·strapi