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

标签：map,const,features,geojsonFeaturesPoint,数据类型,geojson,geoJSONLayer,图层
来源： https://www.cnblogs.com/yhllx999/p/15353431.html