問題描述
在使用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)
},