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

Posted 2021-03-21 giserhome

前言

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之家小专栏此文章

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