专栏首页Python in AI-IOT高质量编码-GIS搜索框前端实现
原创

高质量编码-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 条评论
登录 后参与评论

相关文章

  • 高质量编码-FeatureLayer和GraphicsLayer不重合

    通过拷贝WFSLayer或FeatureLayer上和鼠标绘制的几何图形空间相交的graphic到一个新的GraphicsLayer实现空间查询功能时,当查询目...

    MiaoGIS
  • Python解决小需求--网站在线听歌歌词同步到本地

    喜欢工作时听歌,但又想知道唱的是什么,也就是看见歌词,但又要轻量级,不下载客户端音乐软件,于是在豆瓣FM,网易云音乐等在线音乐网站上听歌。

    MiaoGIS
  • 高质量编码-实现基于html的参数配置

    Web前端编程中为了方便代码的复用性,扩展性和易读性,往往需要配置参数。现在多数都是通过json文件来配置。往往人们过于关注表面,优化的根本是业务的优化,代码本...

    MiaoGIS
  • nRF5x系列蓝牙模块DFU升级服务移植 -- 1 工具安装

    登录https://developer.arm.com/tools-and-software/open-source-software/developer-to...

    DN
  • Jetson Nano 使用gSOAP生成ONVIF框架代码及动态库 -- 1 工具安装

    登录http://www.gnu.org/software/bison/网站,如下图所示选择进入下载界面:

    DN
  • SAP Spartacus OccCmsComponentAdapter

    id:ElectronicsHomepageSplashBannerComponent

    Jerry Wang
  • VirtualBox安装Windows7系统教程

    VirtualBox是德国一家软件公司InnoTek所开发的虚拟机系统软件,virtualbox中文版不仅具有丰富的特色,而且性能也很优异,更是开源的,成为了一...

    Debug客栈
  • 计算机网络的性能衡量指标速率带宽延迟/时延(delay或latency)时延带宽积分组丢失(丢包)吞吐量/率(Throughput)

    这是最常见的一个性能指标 “带宽” (bandwidth)原本指信号具有的频带宽度,即最高频率与最低频率之差,单位是赫兹(Hz) 网络的“带宽”通常是数字信...

    desperate633
  • 高质量编码-实现基于html的参数配置

    Web前端编程中为了方便代码的复用性,扩展性和易读性,往往需要配置参数。现在多数都是通过json文件来配置。往往人们过于关注表面,优化的根本是业务的优化,代码本...

    MiaoGIS
  • SAP Spartacus的产品主数据模型

    位置:C:\Code\SPA\mystore\node_modules@spartacus\core\src\occ\occ-models\occ.models...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券