ArcGIS API JS 加载包含两种类型数据的geojson,并且能点击查询

  • 对第一种数据进行渲染

_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)
},
  • 11
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值