前言

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

内容概览

1.cesium 结合 geoserver 实现地图属性查询
2.源代码 demo 下载

效果图如下:

实现思路:首先利用 geoserver 发布的图斑 WFS 服务,通过 url 的 rest 请求,构造属性查询形式,获取 geojson 数据源;然后调用cesium api 的 Cesium.GeoJsonDataSource.load 加载 geojson 数据源渲染展示;最后监听地图点击事件,获取矢量数据的属性,显示在右上角的信息窗口。

  • 地图初始化创建:
var viewer = new Cesium.Viewer('map', {
geocoder: false,
homeButton: false,
sceneModePicker: false,
fullscreenButton: false,
vrButton: false,
baseLayerPicker: false,
infoBox: false,
selectionIndicator: false,
animation: false,
timeline: false,
shouldAnimate: true,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
imageryProvider: image_Source
});
  • 界面的查询按钮点击:
$("#research_btn").click(function(){
var keyword = $("#textName").val();
//queryByProperty('201911_440114_0093','map_num','bs_spot_t',callbackLastQueryWFSService);
queryByProperty(keyword,'map_num','bs_spot_t',callbackLastQueryWFSService);
});
  • 属性查询函数:
var geoserverUrl = 'http://localhost:8080/geoserver/ZKYGIS';
/*属性查询图层
*@method queryByProperty
*@param propertyValue 属性值
*@param propertyName 属性名称
*@param typeName 图层名称
*@return null
*/
function queryByProperty(propertyValue, propertyName, typeName, callback){
var filter =
'<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">';
……

更多详情见下面链接文章

GIS之家小专栏此文章

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

cesium 结合 geoserver 实现地图属性查询(附源码下载)的更多相关文章

  1. cesium结合geoserver实现地图空间查询(附源码下载)

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

  2. openlayers6结合geoserver实现地图属性查询(附源码下载)

    前言 之前写过一篇 openlayers4 版本的地图属性查询文章,但是由于是封装一层 js 代码写的,很多初学者看起来比较有点吃力,所以本篇文章重新写一篇地图属性查询文章,直接基于最新版本 open ...

  3. leaflet 结合 geoserver 实现地图属性查询(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  4. leaflet 结合 geoserver 实现地图空间查询(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  5. openlayers6结合geoserver实现地图空间查询(附源码下载)

    前言 之前写过一篇 openlayers4 版本的地图空间查询文章,但是由于是封装一层 js 代码写的,很多初学者看起来比较有点吃力,所以本篇文章重新写一篇地图空间查询文章,直接基于最新版本 open ...

  6. openlayers6结合geoserver实现地图矢量瓦片(附源码下载)

    内容概览 1.基于openlayers6结合geoserver实现地图矢量瓦片2.源代码demo下载 效果图如下: 实现思路:利用Geoserver发布矢量切片服务,然后openlayers调用矢量瓦 ...

  7. Cesium专栏-雷达遮罩动态扫描(附源码下载)

    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

  8. Cesium专栏-百度地图加载(附源码下载)

    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

  9. Cesium专栏-绕点飞行效果(附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

随机推荐

  1. docker项目——上线tomcat网站

    项目: 1.使用docker部署tomcat环境 2.上线网站 3.完成访问使用等 第一步.启动基于tomcat镜像的容器 a.导入镜像 [root@localhost ~]# docker load ...

  2. 【Linux系列】Centos 7安装以及网络配置(一)

    目的 本文主要介绍以下两点: 一. 如何在Oracle VM VirtualBox安装centos(已有VirtualBox) 二. 如何在内网里实现虚拟机访问外网.物理主机以及物理主机访问虚拟机 一 ...

  3. 【持续更新】【pat】pat刷题技巧记录

    修改code completion快捷键位CTRL+ENTER,帮助提示函数名称 修改命令行提示符的属性,开启快速编辑模式,方便调试 添加c++11语言标准支持 开启代码调试功能 对输入的字符串进行切 ...

  4. javascript jquery 修改指定标签中的内容

    javascript jquery 修改指定标签中的内容 $("#test1").text("Hello world!"); document.getEleme ...

  5. nyoj 733-万圣节派对 (printf("%06d", i))

    733-万圣节派对 内存限制:64MB 时间限制:1000ms 特判: No 通过数:5 提交数:7 难度:1 题目描述: 万圣节有一个Party,XadillaX显然也要去凑热闹了.因为去凑热闹的人 ...

  6. PHP文件上传和下载

    第 1 章 文件上传 1.1 客户端上传设置 在 B/S 程序中文件上传已经成为一个常用功能.其目的是客户可以通过浏览器 (Browser) 将文件上传到服务器(Server)上的指定目录. 网络上常 ...

  7. Json用途

    Json用途 转自:https://www.cnblogs.com/daikefeng/p/6366229.html  JSON定义 JSON(JavaScript Object Notation)  ...

  8. python容器类型元组的操作

    元组:使用小括号进行表示一组元素,其元素与元素之间使用逗号隔开:注意:元组的的值是不可修改的: 1.元组值得增加:元组是不可以直接增加值的,但是可以通过+进行拼接 # 声明一个元组: tuple1 = ...

  9. 【Linux系列】Centos 7安装 Nginx(三)

    目的 为了下面的Laravel部署,本篇开始安装Nignx服务器. 防火墙设置 在物理主机上查看nginx是否安装成功,需要开放虚拟机的80端口. 用cmder登录到虚拟机 firewall-cmd ...

  10. 2019-9-9:渗透测试,基础学习,phpmyadmin getshell方法,基于时间的盲注,基于报错的注入,笔记

    phpmyadmin getshell方法1,查看是否有导入导出设置 show global variables like '%secure-file-priv%';2,如果secure-file-p ...