前言

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. java-optional-快速使用-教程

    前言: 在公司中开发项目时碰到一个从Java8引入的一个Optional类,以前jdk版本使用的比较低,没有使用过,于是我在网上浏览了一些文档写篇文章学习总结一下,希望没有用过的朋友们都能够快速学习到 ...

  2. 浅析ORACLE中NVL/NVL2/DECODE/CASE WHEN的用法

    使用NVL的时候只能对值进行是否为空的判断,基本语法是NVL( 值1, ,结果2).它的功能是如果值1为空,则此函数返回结果2,不为空的话直接输出值1(如果两个参数都为空,那么还是返回空): NVL2 ...

  3. WebSocket插件

    ;!(function(window){ "use strict"; let Event = { wsMesEvent:function(message){ console.log ...

  4. nyoj 803-A/B Problem

    803-A/B Problem 内存限制:64MB 时间限制:1000ms 特判: No 通过数:2 提交数:4 难度:3 题目描述: 做了A+B Problem,A/B Problem不是什么问题了 ...

  5. NetCore基于EasyNetQ的高级API使用RabbitMq

    一.消息队列 消息队列作为分布式系统中的重要组件,常用的有MSMQ,RabbitMq,Kafa,ActiveMQ,RocketMQ.至于各种消息队列的优缺点比较,在这里就不做扩展了,网上资源很多. 更 ...

  6. C语言|博客作业02

    这个作业属于哪个课程 C程序语言设计 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/8654 我在这个课程的目标是 ...

  7. 原生js实现简单的下拉加载

    #获取当前滚动条的高度document.documentElement.scrollTop #获取当前窗口的高度 document.documentElement.clientHeight #获取当前 ...

  8. Yum —— CentOS 下包管理工具 学习笔记

    环境:CentOS 7 (阿里云服务器) 一.linux 发行版下的包管理阵营 包管理系统 除了方便你安装和管理包之外,还能帮你解决依赖问题. 下面就介绍2个最主要的: 1.Debian 系 - dp ...

  9. 更换JDK

    1.更换JDK 1).卸载原有jdk 检查一下系统中的jdk版本 java -version 显示 java version "1.6.0_24" OpenJDK Runtime ...

  10. centos 生成网卡UUID

    在Linux或CentOS中,可以通过如下命令获取网卡的uuid信息: uuidgen 网卡名07d07031-eb0f-4691-8606-befb46645433 查看网卡UUID nmcli c ...