- 对第一种数据进行渲染
_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://192.168.0.140:8093/features/search_pipeline_info.json`,
copyright: 'RHgis',
id: layerID,
renderer: customRenderer || clickQueryPopupTemplate.renderer[geometryType],
popupTemplate,
geometryType
})
this.map.add(geojsonLayer)
},