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

Posted giserhome

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了cesium结合geoserver实现地图空间查询(附源码下载)相关的知识,希望对你有一定的参考价值。

前言

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();
});
  • 属性查询函数:

更多详情见下面链接文章

GIS之家小专栏此文章

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

以上是关于cesium结合geoserver实现地图空间查询(附源码下载)的主要内容,如果未能解决你的问题,请参考以下文章

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

基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程

cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)

基于Cesium1.26地图API下的GeoServer2.90服务器跨域设置

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

PIE SDK与GeoServer结合说明文档