前言

openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材。

openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章:

内容概览

1.基于 openlayers4 实现地图属性查询
2.源代码 demo 下载

本篇的重点内容是利用 openlayers4 实现地图属性查询功能,效果图如下:

实现思路

  • 模糊查询点击事件
//模糊查询
$("#swatchQuery").bind("click", function () {
var keyword = $("#skeyword").val();
if (keyword == "" || keyword == undefined) {
alert("请输入要查找的内容!");
return;
}
DCI.SpatialQuery.queryByAttribute(keyword); });
  • 地图属性查询核心函数 queryByAttribute

更多的详情见GIS之家小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

openlayers4 入门开发系列之地图属性查询篇(附源码下载)的更多相关文章

  1. openlayers4 入门开发系列结合 echarts4 实现散点图(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  2. leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  3. arcgis api 3.x for js 入门开发系列十三地图最短路径分析(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. openlayers4 入门开发系列之地图空间查询篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  5. cesium 入门开发系列矢量瓦片加载展示(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...

  6. arcgis api 3.x for js 入门开发系列十叠加 SHP 图层(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. openlayers4 入门开发系列之地图模态层篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  8. openlayers4 入门开发系列之地图切换篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. openlayers4 入门开发系列之地图展示篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

  1. 计算机协议、标准以及OSI模型的简单介绍

    由概念启发学习,引导学习.本篇文章中包含了一些最基本的概念和底层知识.虽然零碎,但是这是基础. 一.协议和标准 协议指的是一组控制数据通信的规则.协议有三要素:语法(syntax),语义(semant ...

  2. 海量信息库,查找是否存在(bloom filter布隆过滤器)

    Bloom Filter(布隆过滤器) 布隆过滤器用于测试某一元素是否存在于给定的集合中,是一种空间利用率很高的随机数据结构(probabilistic data structure),存在一定的误识 ...

  3. SpringMVC中利用@CrossOrigin注解解决ajax跨域请求的问题

    1. 什么是跨域 跨域,即跨站HTTP请求(Cross-site HTTP request),指发起请求的资源所在域不同于请求指向资源所在域的HTTP请求. 2. 跨域的应用情景 当使用前后端分离,后 ...

  4. Flask开发微电影网站(一)

    1.用到的Flask知识 1.使用整形,浮点型,路径型,字符串型下正则表达式路由转化器 2.使用GET与POST请求,上传文件,cookie获取与响应,404处理 3.使用模板自动转义,定义过滤器,定 ...

  5. Linux时间子系统之(五):POSIX Clock

    专题文档汇总目录 Notes: 本章主要介绍了若干种类的静态时钟,这些时钟都可以通过k_clock表示,注册到posix_clocks中.这些都是静态时钟,可以分为三大类:各种REALTIME时钟.带 ...

  6. JFrame图形界面 ----鼠标消息

    #开始 不管是什么GUI 按钮的存在都是必不可少的而且还会有很多奇怪的按钮 #代码 package window; import java.awt.Container; import java.awt ...

  7. javascript进阶

    BOM操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...

  8. 深入理解SpringCloud之分布式配置

    Spring Cloud Config Server能够统一管理配置,我们绝大多数情况都是基于git或者svn作为其配置仓库,其实SpringCloud还可以把数据库作为配置仓库,今天我们就来了解一下 ...

  9. 面试时怎样回答:你对原生ajax的理解

    很多人跟我一样用习惯了jq封装好的$.ajax,但是面试时,原生ajax是很多面试官喜欢问的问题,今天再查资料,打算好好整理一下自己理解的原生ajax. 首先,jq的ajax:一般我常用的参数就是这些 ...

  10. admin-handlers.go

    package],,) ],,) ],,) ],,) ],,) ])     if err == redis.Nil {         http.NotFound(w, r)     } else ...