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

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

不要重复造轮子

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

GIS搜索框90%的代码借用GitHub上Leaflet.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地图联动搜索框的前端代码介绍完毕。不要重新造轮子，多看别人代码学习。