前言

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. 你不知道的JavaScript--Item25 创建对象(类)的8种方法总结

    1. 使用Object构造函数来创建一个对象 下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); person.name= ...

  2. jQuery学习之旅 Item5 $与jQuery对象

    1.$符号的由来 $符号本质就是函数的名字. jquery源码分析 通过分析我们知道,在jquery里边不只可以使用$符号,还可以使用jQuery标志 解决冲突问题 有的项目是中间过渡项目(proto ...

  3. selenium之 坑(StaleElementReferenceException: Message: Element not found in the cache...)

    今天给大家分享一个selenium中经常会有人遇到的坑: selenium.common.exceptions.StaleElementReferenceException: Message: Ele ...

  4. java-直接选择排序

    直接选择排序是一种简单的排序方法,它每次从当前待排序的区间中选择出最小的元素,把该元素与该区间的第一个元素交换. 第一次从a[0]~a[n-1]中选取最小值,与a0]交换,第二次从a[1]~a[n-1 ...

  5. Asp.Net Core NLog 将日志输出到数据库以及添加LayoutRenderer的支持

    在这之前打算用Apache的Log4Net,但是发现其AdoNetAppender方法已经不存在了,无法使用配置文件直接输出到数据库了,因此我便改用了NLog框架. 一.对项目添加NLog 通过Nug ...

  6. java编程思想-第六章-某些练习题

    参考https://blog.csdn.net/caroline_wendy/article/details/47271037 3 package debug; import java.util.Ar ...

  7. distinct的用法

    1.  Distinct 位置 单独的distinct只能放在开头,否则报错,语法错误 例:SELECT Sid,DISTINCT(Sscore) score from t_student; [SQL ...

  8. monitor.go 源码阅读

    package main import (     "fmt"     "net/http" ) // 查询监控信息的接口 func statsHandler( ...

  9. syncer.go

    package ) ) ) ].Key,)) )) }

  10. bzoj3631[JLOI2014 松鼠的新家 倍增lca+差分

    裸的树上差分+倍增lca 每次从起点到终点左闭右开,这就有一个小技巧,要找到右端点向左端点走的第一步,然后差分就好了 #include<cstdio> #include<cstrin ...