cesium结合geoserver实现地图空间查询(附源码下载)
时间:2019-12-23
本文章向大家介绍cesium结合geoserver实现地图空间查询(附源码下载),主要包括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(); });
- 属性查询函数:
更多详情见下面链接文章:
文章提供源码,对本专栏感兴趣的话,可以关注一波
原文地址:https://www.cnblogs.com/giserhome/p/12088455.html
- jquery属性值选择器
- sqlserver 2000/2005 Ambiguous column error错误解决办法
- jquery 层级选择器
- Twitter发布基于组件的轻量级JavaScript框架——Flight
- jquery的基本选择器
- WordPress 路径相关函数总结(一):站点路径相关函数
- 修复Visual Studio 2010 SP1的Toolbox导致的VS不可用
- 破解Excel 密码保护
- 配置Subversion
- WordPress 路径相关函数总结(二):主题路径相关函数
- ASP.NET 2.0 中 Web 事件
- Visual Studio 必备可视化插件推荐
- WordPress 路径相关函数总结(一):站点路径相关函数
- 在 ASP.NET 2.0 中,Global.asax 文件没有后置代码,如何将Globa.asax中的页面移到代码文件中
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- jdbc连接oracle语法
- java实现数据库连接的工具类
- shell脚本快速入门之-----正则三剑客之一grep用法大全!!!
- 【网页特效】11 个文本输入和 6 个按钮操作 特效库
- shell脚本快速入门之-----正则三剑客之二sed用法大全!!!
- JSP中的Cookie
- 傅里叶变换
- shell脚本快速入门之-----shell脚本练习100例!!!
- java监听器
- shell脚本快速入门之-----函数
- shell脚本快速入门之-----循环(for、while、until)
- ThreadPoolExecutor系列三——ThreadPoolExecutor 源码解析
- shell脚本快速入门之-----数组
- JSTL
- shell脚本快速入门之-----正则三剑客之三awk用法大全!!!