使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)
},

 

Tags:

VirMach 便宜 VPS

QNews

QNews