使geoJSONLayer能够加载两种数据类型的geojson数据
问题描述
在使用geoJSONLayer加载geojson数据时,官方文档只支持单一类型的geojson数据加载,当一个geojson数据中出现两种类型的数据时可以尝试一下方法进行解决
本场景为:点击图层获取geojson,通过geoJSONLayer加载底图上,然后在通过popup显示当前点击位置的数据,点击位置的要素要高亮
- 对一种数据类型进行渲染
- _this.loadGeojson('clickQueryGeojsonPolyline', res.data.json_url)
- 循环geojson数据 判断是否有第二种类型的数据,如果存在第二种类型的数据则进行渲染第二种类型的数据
- for (const item of features) {
- const {type} = item.geometry
- if (type === 'Point') {
- hasPoint = true
- await _this.loadGeojson('clickQueryGeojsonPoint', res.data.json_url, 'point')
- break
- }
- }
- 渲染完成后是两个不同的图层,点击查询结果并不在一起,现在把两个图层查询的结果整合在一起
- 搜索两个图层下所有的要素(geojson是根据点击查询的结果渲染的,所以每个图层上所有的要素就是查询的结果)
- const layerPolyline = _this.map.findLayerById('clickQueryGeojsonPolyline')
- const layerPoint = _this.map.findLayerById('clickQueryGeojsonPoint')
- let geojsonFeaturesPoint = {}
- const geojsonFeaturesPolyline = await layerPolyline.queryFeatures()
- /**
- * 三种情况
- * 如果图层不存在,直接把geojsonFeaturesPoint的features赋空
- * 如果图层存在并且是当前加载 则查所有的点要素
- * 如果图层存在但是上一次加载的结果,则删除图层并把geojsonFeaturesPoint的features赋空
- */
- if (layerPoint) {
- if (!hasPoint) {
- _this.map.remove(layerPoint)
- geojsonFeaturesPoint.features = []
- } else {
- geojsonFeaturesPoint = await layerPoint.queryFeatures()
- }
- } else {
- geojsonFeaturesPoint.features = []
- }
- 把查询的结果合并到一个数组中(根据需求,当前默认高亮点),然后打开弹窗
- const geojsonFeatures = [...geojsonFeaturesPoint.features, ...geojsonFeaturesPolyline.features]
- _this.view.popup.open({
- location: event.mapPoint,
- features: geojsonFeatures
- })
完整代码
- const res = await clickQuery(event.mapPoint.x, event.mapPoint.y)
- let features = res.data.features
- let hasPoint = false
- if (features.length === 0) {
- _this.delLayer(['clickQueryGeojsonPolyline', 'clickQueryGeojsonPoint'])
- _this.view.popup.close()
- return
- }
- await _this.loadGeojson('clickQueryGeojsonPolyline', res.data.json_url)
- for (const item of features) {
- const {type} = item.geometry
- if (type === 'Point') {
- hasPoint = true
- await _this.loadGeojson('clickQueryGeojsonPoint', res.data.json_url, 'point')
- break
- }
- }
- const layerPolyline = _this.map.findLayerById('clickQueryGeojsonPolyline')
- const layerPoint = _this.map.findLayerById('clickQueryGeojsonPoint')
- let geojsonFeaturesPoint = {}
- const geojsonFeaturesPolyline = await layerPolyline.queryFeatures()
- /**
- * 三种情况
- * 如果图层不存在,直接把geojsonFeaturesPoint的features赋空
- * 如果图层存在并且是当前加载 则查所有的点要素
- * 如果图层存在但是上一次加载的结果,则删除图层并把geojsonFeaturesPoint的features赋空
- */
- if (layerPoint) {
- if (!hasPoint) {
- _this.map.remove(layerPoint)
- geojsonFeaturesPoint.features = []
- } else {
- geojsonFeaturesPoint = await layerPoint.queryFeatures()
- }
- } else {
- geojsonFeaturesPoint.features = []
- }
- const geojsonFeatures = [...geojsonFeaturesPoint.features, ...geojsonFeaturesPolyline.features]
- _this.view.popup.open({
- location: event.mapPoint,
- features: geojsonFeatures
- })
- /**
- * 删除图层
- * @params layerIdArr 要删除的图层id
- */
- delLayer(layerIdArr) {
- for(const item of layerIdArr) {
- const layer = this.map.findLayerById(item)
- if(layer) {
- this.map.remove(layer)
- }
- }
- },
- /**
- * 加载geojson数据
- * @param layerID{String} 图层自定义的id.方便查找图层
- * @param geometryType{String} geojson类型
- * @param url{String} geojson的接口
- * @param customRenderer{object} 样式
- */
- async loadGeojson(layerID, url, geometryType = 'polyline', customRenderer = '') {
- // 弹窗模板
- const popupTemplate = {
- title: clickQueryPopupTemplate.title[geometryType],
- content: clickQueryPopupTemplate.content[geometryType],
- }
- let geojsonLayer = this.map.findLayerById(layerID)
- await this.delLayer([layerID])
- geojsonLayer = new GeoJSONLayer({
- url: `http://xxx.xxxx.xxx/search_pipeline_info.json`,
- copyright: 'RHgis',
- id: layerID,
- renderer: customRenderer || clickQueryPopupTemplate.renderer[geometryType],
- popupTemplate,
- geometryType
- })
- this.map.add(geojsonLayer)
- },
使geoJSONLayer能够加载两种数据类型的geojson数据的更多相关文章
- ListView加载两种以上不同的布局
不同的项目布局(item layout) Listview一种单一的item 布局有时候不能完全满足业务需求,我们需要加载两种或两种以上不同的布局,实现方法很简单: 重写 getViewTypeCou ...
- Flask的配置文件加载两种方式
配置文件 1 基于全局变量 2 基于类的方式 配置文件的加载需要将配合文件的相对路径添加到app.config.from_object("文件路径"),类的方式也是一样,需要将类的 ...
- EasyUI使用tree方法生成树形结构加载两次的问题
html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url:然后又调用js初始化代码请求 ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- jQuery瀑布流从不同方向加载3种效果演示
很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...
- 实验long raw 和 blob两种数据类型遇到dblink的表现
首先long raw从Oracle 10g开始就不再被建议使用,建议用blob代替.同理,long建议用clob代替. 本文从运维角度实验long raw 和 blob两种数据类型在遇到dblink时 ...
- 【实战问题】【1】@PostConstruct 服务启动后加载两次的问题
@PostConstruct:在服务启动时触发操作(我是用来更新微信的access_token) 解决方法: tomcat文件夹→conf→server.xml→将appBase="weba ...
- IE浏览器中IFrame被加载两次问题的解决-sunziren
本文为作者sunziren原创,首发博客园,转载请注明出处. 昨天遇到了一个问题,先上代码. var content = '<iframe src="www.baidu.com&quo ...
- js异步执行 按需加载 三种方式
js异步执行 按需加载 三种方式 第一种:函数引用 将所需加载方法放在匿名函数中传入 //第一种 函数引用 function loadScript(url,callback){ //创建一个js va ...
随机推荐
- C# 对SQlServer访问的完整类
using System; using System.Collections.Generic; using System.Collections.Specialized; using System.C ...
- 自旋锁&信号量
1. 自旋锁 Linux内核中最常见的锁是自旋锁.一个自旋锁就是一个互斥设备,它只能有两个值:"锁定"和"解锁".如果锁可用,则"锁定"位被 ...
- jQuery中的层级选择器(四、二):后代元素、子元素、相邻元素、兄弟元素
<!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...
- js与jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...
- 搭建本地yum源出现:mount: 在 /dev/sr0 上找不到媒体
2021-07-27 在练习环境搭建时,因为是离线环境,故先搭建本地yum源,但是出现了一个往常没有的问题:mount: 在 /dev/sr0 上找不到媒体,参考其他博主的文章得到解决方法. 排查问题 ...
- 通过WebGoat学习java反序列化漏洞
首发于freebuff. WebGoat-Insecure Deserialization Insecure Deserialization 01 概念 本课程描述了什么是序列化,以及如何操纵它来执行 ...
- Nginx版本平滑升级方案
背景:由于负载均衡测试服务器中nginx版本过低,存在安全漏洞,查询相关修复漏洞资料,需要采取nginx版本升级形式对漏洞进行修复. Nginx平滑升级方案 1.案例采用版本介绍 旧版本 nginx- ...
- C#新版本风格(NetCore)项目文件
在VisualStudio中创建NetCore以上版本的项目,使用的都是新版本风格的项目文件. 和旧版本.NetFramework版本的项目文件区别: 双击项目可直接打开csproj文件进行编辑配置 ...
- Linux上使用设置printf显示的颜色
我们经常看到别的屏幕五颜六色的很是羡慕,看着很炫是吧.其实我们也可以自己做一个简单的修改,是我们的显示结果也呈现出不同的颜色.shell脚本可能设置的比较多,但是我们平常使用C语言却很少设置它的颜色, ...
- 三剑客之awk 逐行读取
目录: 一.awk工作原理 二.按行输出文本 三.按字段输出文本 四.通过管道,双引号调用shall命令 五.CPU使用率 六.使用awk 统计 httpd 访问日志中每个客户端IP的出现次数 一.a ...