问题描述

  在使用geoJSONLayer加载geojson数据时,官方文档只支持单一类型的geojson数据加载,当一个geojson数据中出现两种类型的数据时可以尝试一下方法进行解决

  本场景为:点击图层获取geojson,通过geoJSONLayer加载底图上,然后在通过popup显示当前点击位置的数据,点击位置的要素要高亮

  • 对一种数据类型进行渲染
  1. _this.loadGeojson('clickQueryGeojsonPolyline', res.data.json_url)
  • 循环geojson数据 判断是否有第二种类型的数据,如果存在第二种类型的数据则进行渲染第二种类型的数据
  1. for (const item of features) {
  2. const {type} = item.geometry
  3. if (type === 'Point') {
  4. hasPoint = true
  5. await _this.loadGeojson('clickQueryGeojsonPoint', res.data.json_url, 'point')
  6. break
  7. }
  8. }
  • 渲染完成后是两个不同的图层,点击查询结果并不在一起,现在把两个图层查询的结果整合在一起
  • 搜索两个图层下所有的要素(geojson是根据点击查询的结果渲染的,所以每个图层上所有的要素就是查询的结果)
  1. const layerPolyline = _this.map.findLayerById('clickQueryGeojsonPolyline')
  2. const layerPoint = _this.map.findLayerById('clickQueryGeojsonPoint')
  3. let geojsonFeaturesPoint = {}
  4. const geojsonFeaturesPolyline = await layerPolyline.queryFeatures()
  5. /**
  6. * 三种情况
  7. * 如果图层不存在,直接把geojsonFeaturesPoint的features赋空
  8. * 如果图层存在并且是当前加载 则查所有的点要素
  9. * 如果图层存在但是上一次加载的结果,则删除图层并把geojsonFeaturesPoint的features赋空
  10. */
  11. if (layerPoint) {
  12. if (!hasPoint) {
  13. _this.map.remove(layerPoint)
  14. geojsonFeaturesPoint.features = []
  15. } else {
  16. geojsonFeaturesPoint = await layerPoint.queryFeatures()
  17. }
  18. } else {
  19. geojsonFeaturesPoint.features = []
  20. }
  • 把查询的结果合并到一个数组中(根据需求,当前默认高亮点),然后打开弹窗
  1. const geojsonFeatures = [...geojsonFeaturesPoint.features, ...geojsonFeaturesPolyline.features]
  2. _this.view.popup.open({
  3. location: event.mapPoint,
  4. features: geojsonFeatures
  5. })

完整代码

  1. const res = await clickQuery(event.mapPoint.x, event.mapPoint.y)
  2. let features = res.data.features
  3. let hasPoint = false
  4. if (features.length === 0) {
  5. _this.delLayer(['clickQueryGeojsonPolyline', 'clickQueryGeojsonPoint'])
  6. _this.view.popup.close()
  7. return
  8. }
  9. await _this.loadGeojson('clickQueryGeojsonPolyline', res.data.json_url)
  10. for (const item of features) {
  11. const {type} = item.geometry
  12. if (type === 'Point') {
  13. hasPoint = true
  14. await _this.loadGeojson('clickQueryGeojsonPoint', res.data.json_url, 'point')
  15. break
  16. }
  17. }
  18. const layerPolyline = _this.map.findLayerById('clickQueryGeojsonPolyline')
  19. const layerPoint = _this.map.findLayerById('clickQueryGeojsonPoint')
  20. let geojsonFeaturesPoint = {}
  21. const geojsonFeaturesPolyline = await layerPolyline.queryFeatures()
  22. /**
  23. * 三种情况
  24. * 如果图层不存在,直接把geojsonFeaturesPoint的features赋空
  25. * 如果图层存在并且是当前加载 则查所有的点要素
  26. * 如果图层存在但是上一次加载的结果,则删除图层并把geojsonFeaturesPoint的features赋空
  27. */
  28. if (layerPoint) {
  29. if (!hasPoint) {
  30. _this.map.remove(layerPoint)
  31. geojsonFeaturesPoint.features = []
  32. } else {
  33. geojsonFeaturesPoint = await layerPoint.queryFeatures()
  34. }
  35. } else {
  36. geojsonFeaturesPoint.features = []
  37. }
  38. const geojsonFeatures = [...geojsonFeaturesPoint.features, ...geojsonFeaturesPolyline.features]
  39. _this.view.popup.open({
  40. location: event.mapPoint,
  41. features: geojsonFeatures
  42. })
  43.  
  44. /**
  45. * 删除图层
  46. * @params layerIdArr 要删除的图层id
  47. */
  48. delLayer(layerIdArr) {
  49. for(const item of layerIdArr) {
  50. const layer = this.map.findLayerById(item)
  51. if(layer) {
  52. this.map.remove(layer)
  53. }
  54. }
  55. },
  56.  
  57. /**
  58. * 加载geojson数据
  59. * @param layerID{String} 图层自定义的id.方便查找图层
  60. * @param geometryType{String} geojson类型
  61. * @param url{String} geojson的接口
  62. * @param customRenderer{object} 样式
  63. */
  64. async loadGeojson(layerID, url, geometryType = 'polyline', customRenderer = '') {
  65. // 弹窗模板
  66. const popupTemplate = {
  67. title: clickQueryPopupTemplate.title[geometryType],
  68. content: clickQueryPopupTemplate.content[geometryType],
  69. }
  70. let geojsonLayer = this.map.findLayerById(layerID)
  71. await this.delLayer([layerID])
  72. geojsonLayer = new GeoJSONLayer({
  73. url: `http://xxx.xxxx.xxx/search_pipeline_info.json`,
  74. copyright: 'RHgis',
  75. id: layerID,
  76. renderer: customRenderer || clickQueryPopupTemplate.renderer[geometryType],
  77. popupTemplate,
  78. geometryType
  79. })
  80. this.map.add(geojsonLayer)
  81. },

使geoJSONLayer能够加载两种数据类型的geojson数据的更多相关文章

  1. ListView加载两种以上不同的布局

    不同的项目布局(item layout) Listview一种单一的item 布局有时候不能完全满足业务需求,我们需要加载两种或两种以上不同的布局,实现方法很简单: 重写 getViewTypeCou ...

  2. Flask的配置文件加载两种方式

    配置文件 1 基于全局变量 2 基于类的方式 配置文件的加载需要将配合文件的相对路径添加到app.config.from_object("文件路径"),类的方式也是一样,需要将类的 ...

  3. EasyUI使用tree方法生成树形结构加载两次的问题

    html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url:然后又调用js初始化代码请求 ...

  4. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  5. jQuery瀑布流从不同方向加载3种效果演示

    很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...

  6. 实验long raw 和 blob两种数据类型遇到dblink的表现

    首先long raw从Oracle 10g开始就不再被建议使用,建议用blob代替.同理,long建议用clob代替. 本文从运维角度实验long raw 和 blob两种数据类型在遇到dblink时 ...

  7. 【实战问题】【1】@PostConstruct 服务启动后加载两次的问题

    @PostConstruct:在服务启动时触发操作(我是用来更新微信的access_token) 解决方法: tomcat文件夹→conf→server.xml→将appBase="weba ...

  8. IE浏览器中IFrame被加载两次问题的解决-sunziren

    本文为作者sunziren原创,首发博客园,转载请注明出处. 昨天遇到了一个问题,先上代码. var content = '<iframe src="www.baidu.com&quo ...

  9. js异步执行 按需加载 三种方式

    js异步执行 按需加载 三种方式 第一种:函数引用 将所需加载方法放在匿名函数中传入 //第一种 函数引用 function loadScript(url,callback){ //创建一个js va ...

随机推荐

  1. C# 对SQlServer访问的完整类

    using System; using System.Collections.Generic; using System.Collections.Specialized; using System.C ...

  2. 自旋锁&信号量

    1. 自旋锁 Linux内核中最常见的锁是自旋锁.一个自旋锁就是一个互斥设备,它只能有两个值:"锁定"和"解锁".如果锁可用,则"锁定"位被 ...

  3. jQuery中的层级选择器(四、二):后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  4. js与jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...

  5. 搭建本地yum源出现:mount: 在 /dev/sr0 上找不到媒体

    2021-07-27 在练习环境搭建时,因为是离线环境,故先搭建本地yum源,但是出现了一个往常没有的问题:mount: 在 /dev/sr0 上找不到媒体,参考其他博主的文章得到解决方法. 排查问题 ...

  6. 通过WebGoat学习java反序列化漏洞

    首发于freebuff. WebGoat-Insecure Deserialization Insecure Deserialization 01 概念 本课程描述了什么是序列化,以及如何操纵它来执行 ...

  7. Nginx版本平滑升级方案

    背景:由于负载均衡测试服务器中nginx版本过低,存在安全漏洞,查询相关修复漏洞资料,需要采取nginx版本升级形式对漏洞进行修复. Nginx平滑升级方案 1.案例采用版本介绍 旧版本 nginx- ...

  8. C#新版本风格(NetCore)项目文件

    在VisualStudio中创建NetCore以上版本的项目,使用的都是新版本风格的项目文件. 和旧版本.NetFramework版本的项目文件区别: 双击项目可直接打开csproj文件进行编辑配置 ...

  9. Linux上使用设置printf显示的颜色

    我们经常看到别的屏幕五颜六色的很是羡慕,看着很炫是吧.其实我们也可以自己做一个简单的修改,是我们的显示结果也呈现出不同的颜色.shell脚本可能设置的比较多,但是我们平常使用C语言却很少设置它的颜色, ...

  10. 三剑客之awk 逐行读取

    目录: 一.awk工作原理 二.按行输出文本 三.按字段输出文本 四.通过管道,双引号调用shall命令 五.CPU使用率 六.使用awk 统计 httpd 访问日志中每个客户端IP的出现次数 一.a ...