问题描述

  在使用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数据的更多相关文章

  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. QT中的对象模型――QPointer

    QPointer是一个模板类,为QObject对象提供了守卫指针(Guarded Pointer).什么是守卫指针?守卫指针QPointer<T>类似于普通C++指针T *,有且仅有一点不 ...

  2. 新书介绍 -- 《Redis核心原理与实践》

    大家好,今天给大家介绍一下我的新书 -- <Redis核心原理与实践>. 后端开发的同学应该对Redis都不陌生,Redis由于性能极高.功能强大,已成为业界非常流行的内存数据库. < ...

  3. flink的watermark机制你学会了吗?

    大家好,今天我们来聊一聊flink的Watermark机制. 这也是flink系列的的第一篇文章,如果对flink.大数据感兴趣的小伙伴,记得点个关注呀. 背景 ​ flink作为先进的流水计算引擎, ...

  4. Focal Loss(RetinaNet)笔记 一种减小类别不平衡影响的方法

    Paper: https://arxiv.org/abs/1708.02002 还参考了:https://www.jianshu.com/p/8e501a159b28 其中p是预测属于某类的概率.

  5. Java变量命名规范

    java命名规范 所有方法.变量.类名:见名知意 类成员变量:首字母小写.驼峰原则: 例如:lastName 第一个单词首字母小写,其余首字母大写 局部变量:首字母小写.驼峰原则 类名: 首字母小写. ...

  6. 分布式系列-分布式ID

    一.数据库自增(单实例) 1.方案描述 基于数据库自增ID(auto_increment)利用其来充当分布式ID.实现方式就是用一张表来充当ID生成器,当我们需要ID时,向表中插入一条记录返回主键ID ...

  7. Mysql force index和ignore index 使用实例

    前几天统计一个sql,是一个人提交了多少工单,顺便做了相关sql优化.数据大概2000多w. select CustName,count(1) c from WorkOrder where Creat ...

  8. Appium自动化(5) - 如何获取android app 的Activity 和 Package

    如果你还想从头学起Appium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1693896.html 前言 在Desired Capab ...

  9. Linux原始套接字抓取底层报文

    1.原始套接字使用场景 我们平常所用到的网络编程都是在应用层收发数据,每个程序只能收到发给自己的数据,即每个程序只能收到来自该程序绑定的端口的数据.收到的数据往往只包括应用层数据,原有的头部信息在传递 ...

  10. ABP 极简入门教程(二 MVC方式显示数据)

    增加显示菜单 Sample.Web.MVC项目中找到startup目录打开SampleNavigationProvider.cs,根据现有内容添加以下内容 .AddItem( new MenuItem ...