前言
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
});
框选绘制查询，cesium 没有提供绘制工具，只能写一个绘制矩形框选功能，获取返回来的范围坐标去空间范围查询，绘制矩形的代码这里不贴出来，具体参照源码 demo：
//框选查询
$("#rect_btn").click(function(){
clearMap()
if (!drawTool) return;
drawTool.startDraw({
type: "rectangle",
style: {
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
//material:Cesium.Color.WHITE
material:Cesium.Color.fromRgba(0x67ADDFFF)
},
success: function (evt) {
//console.log('evt',evt);
var leftup = evt.leftup;
var rightdown = evt.rightdown;
//世界坐标转地理坐标(弧度)
var leftupcartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(leftup);
var rightdowncartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(rightdown);
//console.log('leftupcartographic',leftupcartographic);
//地理坐标(弧度)转经纬度坐标
var leftuppoint = [leftupcartographic.longitude / Math.PI * 180, leftupcartographic.latitude / Math.PI * 180];
console.log('leftuppoint',leftuppoint);
var rightdownpoint = [rightdowncartographic.longitude / Math.PI * 180, rightdowncartographic.latitude / Math.PI * 180];
console.log('rightdown',rightdown);
var extent = [leftuppoint[0].toFixed(6),leftuppoint[1].toFixed(6),rightdownpoint[0].toFixed(6),rightdownpoint[1].toFixed(6)];
var polygon = null;
if(extent && extent.length>0){
//构造polygon
polygon = '';
polygon += extent[0] + ',' + extent[1] + ' ' ;
polygon += extent[2] + ',' + extent[1] + ' ' ;
polygon += extent[2] + ',' + extent[3] + ' ' ;
polygon += extent[0] + ',' + extent[3] + ' ' ;
polygon += extent[0] + ',' + extent[1] + ' ' ;
}
console.log('polygon',polygon);
if(polygon){
queryByPolygon(polygon,'bs_spot_t',callbackLastQueryWFSService);
}
}
});
});
//清空
$("#clear_btn").click(function(){
clearMap();
});
属性查询函数：
更多详情见下面链接文章：
文章提供源码，对本专栏感兴趣的话，可以关注一波
cesium 结合 geoserver 实现地图属性查询(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
openlayers6结合geoserver实现地图空间查询(附源码下载)
前言 之前写过一篇 openlayers4 版本的地图空间查询文章,但是由于是封装一层 js 代码写的,很多初学者看起来比较有点吃力,所以本篇文章重新写一篇地图空间查询文章,直接基于最新版本 open ...
leaflet 结合 geoserver 实现地图空间查询(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
openlayers6结合geoserver实现地图属性查询(附源码下载)
前言 之前写过一篇 openlayers4 版本的地图属性查询文章,但是由于是封装一层 js 代码写的,很多初学者看起来比较有点吃力,所以本篇文章重新写一篇地图属性查询文章,直接基于最新版本 open ...
leaflet 结合 geoserver 实现地图属性查询(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
openlayers6结合geoserver实现地图矢量瓦片(附源码下载)
内容概览 1.基于openlayers6结合geoserver实现地图矢量瓦片2.源代码demo下载 效果图如下: 实现思路:利用Geoserver发布矢量切片服务,然后openlayers调用矢量瓦 ...
Cesium专栏-雷达遮罩动态扫描(附源码下载)
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
Cesium专栏-百度地图加载(附源码下载)
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
Cesium专栏-绕点飞行效果(附源码下载)
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
随机推荐
【转】实现ViewPager懒加载的三种方法
方法一 在Fragment可见时请求数据.此方案仍预加载了前后的页面,但是没有请求数据,只有进入到当前Framgent时才请求数据. 优点:实现了数据的懒加载缺点:一次仍是三个Framgment对象, ...
基于nutz框架理解Ioc容器
同样我们从问题入手去验证以及去理解Ioc容器都做了哪些事情: 1.nutz是有几种方式获取需要容器管理bean的信息? 第一种是使用json格式的文件进行配置,如: 第二种:使用注解@IocBean ...
SAPI训练文件存储位置
查看注册表HKEY_CURRENT_USER\Software\Microsoft\Speech\RecoProfiles 说明查看http://msdn.microsoft.com/en-us/li ...
[HDOJ3718]Similarity(KM算法，二分图最大匹配)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3718 题意:有一堆答题情况和正确答案,问每一个答题情况的正确率最大是多少. 给每一对答案和答题情况的字 ...
大家AK杯 灰天飞雁NOIP模拟赛题解/数据/标程
数据 http://files.cnblogs.com/htfy/data.zip 简要题解 桌球碰撞 纯模拟,注意一开始就在袋口和v=0的情况.v和坐标可以是小数.为保险起见最好用extended/ ...
QWidget扩充父子关系
childAt(x, y) 获取在指定坐标处的子控件 parentWidget() 获取指定控件的父控件 s=label.parentWidget() #返回label的父 ...
Kafka概述及安装部署
一.Kafka概述 1.Kafka是一个分布式流媒体平台,它有三个关键功能: (1)发布和订阅记录流,类似于消息队列或企业消息传递系统: (2)以容错的持久方式存储记录流: (3)记录发送时处理流. ...
Zabbix监控系统部署：配置详解
1. 全局配置 ListenPort ,监听端口 ,取值范围为1024-32767,默认端口10051 SourceIP,外发连接源地址 LogType,日志类型:单独日志文件,系统文件,控制台输出 ...
【随笔】借鉴 &; KPI式设计
1. 别人(某成功案例)是这么做的,我们也就这么做吧 刚来组里一会就目睹了需求讨论会上的一场争执,大概就是某产品经理在解释需求解释到后面有些说不通了就说“xxx App是这么做的我觉得我们也可以这样做 ...