cesium 3dtiles 加载本地数据_cesium结合geoserver实现地图空间查询(附源码下载)

最新推荐文章于 2025-04-14 15:45:27 发布

weixin_39977276

最新推荐文章于 2025-04-14 15:45:27 发布

阅读量1.2k

点赞数

文章标签： cesium 3dtiles 加载本地数据 cesium 世界坐标转经纬度

该博客介绍了如何利用Cesium API与Geoserver集成，实现地图空间查询功能。通过构造WFS服务请求获取GeoJSON数据，再用Cesium的GeoJsonDataSource加载并渲染。此外，还展示了如何监听地图点击事件获取矢量数据属性，并提供了框选查询的实现，包括绘制矩形框选范围、转换坐标和执行空间查询的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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(); 
  });