高质量编码-GIS搜索框前端实现

上文介绍了GIS搜索框的功能,下面介绍前端实现。

不要重复造轮子

多去GitHub上逛逛,说不定现有的需求上面都有人实现了,而且是大神级别的实现。

GIS搜索框90%的代码借用GitHubLeaflet.GeoJSONAutocomplete这个项目。这个项目是leaflet(一种简洁而强大的WebGIS js库)的一个插件,项目介绍如下:

输入框事件生成请求参数从geoJson服务取得数据
同时搜索结果geoJson通过leaflet添加到地图上,并绑定地图弹窗事件

返回geoJson如下格式:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    32.84,
                    39.92
                ]
            },
            "properties": {
                "popupContent": "Content seen in Popup",
                "title": "Title seen in Autocomplete",
                "description": "Additional information seen in Autocomplete",
                "image": "example.png"
            }
        }
    ]
}

如果我们想要改造复用,必须看懂源码,500多行还是很复杂的。还好源码层次分明,根据功能分成了不同的函数,我们发现除了结果添加到地图一个是用leaflet API,我们想要使用Arcgis JS API,所以只需改造这部分代码就可以了。

原来代码:搜索结果添加到地图,并且地图视图缩放至结果范围。

原来代码根据是否有分页,而采取focusGeoJson还是drawGeoJson

原来代码:点击某一搜索结果时缩放至范围。
原来代码:点击某一搜索结果时同时高亮图层。
原来代码:点击某一搜索结果时只将一条数据添加到地图,并缩放至范围。

这几个函数也是我们需要改动的代码,只需同样用Arcgis JS API创建focusLayer和searchLayer,然后根据查询结果geoJson里每一个feature在对应图层上添加graphic(我们暂且只考虑点要素类型),并且改变缩放地图至范围。

预先定义图层样式(这里高亮图层使用同一样式)
改造后代码:搜索结果添加到地图,并且地图视图缩放至结果范围。
改造后代码:点击某一搜索结果缩放至范围。
改造后代码:点击某一搜索结果时将这条数据同时添加高亮图层。
改造后代码:点击某一搜索结果时只将一条数据添加到地图

当我们每次输入内容或者点击分页时,会立即去构造请求,返回结果绑定在下拉列表中,同时添加到地图图层中:

向服务地址发送请求

其实这种查询就够用了,但是通常我们会有伪需求,查询时选择类型,于是再次改造,添加了下拉列表来选择查询类型:

带下拉列表选择类型的搜索框

需要我们在构造函数构建DOM的地方添加我们的select,并在调用初始化函数前,填充option数据,这里使用了select2 jquery插件

添加select下拉列表来选择查询类型

同时添加事件,使得下拉列表改变选项时,更新自己的geojsonServiceAddress选项。

初始化参数

用于构造查询请求URL

自定义类型下拉列表扩展的事件

同时在初始化参数中添加ajaxType来满足POST类型请求

输入事件触发的请求

下拉列表不同请求URL发生改变,也可以采用URL不变,请求参数改变来实现这个功能:

最后注意原来代码中为了避免输入事件频繁,使用了自定义的延迟事件。

延迟Keyup事件
自定义jQuery事件

至此,GIS地图联动搜索框的前端代码介绍完毕。不要重新造轮子,多看别人代码学习。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券