前言

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实现地图空间查询(附源码下载) - 小专栏​xiaozhuanlan.com

对本专栏感兴趣的话,可以关注一波

GIS之家店铺:GIS之家
GIS之家源码咨询:GIS之家webgis入门开发系列demo源代码咨询

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

  1. geoserver三维_cesium结合geoserver实现地图空间查询(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  2. cesium 3dtiles 加载本地数据_记一次Cesium地形数据生成过程

    问题描述 有一小块带高程值的点状数据,需要根据该数据生成Cesium支持的3dtiles数据,在Cesium中显示.经过一周多时间的摸索,终于能够在Cesium中加载成功.现将数据处理流程做个记录,以 ...

  3. cesium 3dtiles 加载本地数据_深入echarts学习:加载跨域、异步、本地json数据的防坑录

    1 说明: ===== 1.1 推荐指数:★★★★ 1.2 网上这方面说明,大多模棱两可,坑很多,讲透彻的不多,故本人做一个小结. 1.3 我曾介绍echarts的简单基本用法: <Echart ...

  4. cesium 3dtiles 加载本地数据_Meteva笔记:加载本地观测数据

    Meteva 是由 nmc 开源的全流程检验程序库,提供了常用的各种气象预报检验评估的算法函数,气象检验分析的图片和表格型产品的制作函数,以及检验评估系统示例. 本文介绍如何将 NWPC 生成的站点观 ...

  5. ios网络学习------4 UIWebView的加载本地数据的三种方式

    ios网络学习------4 UIWebView的加载本地数据的三种方式 分类: IOS2014-06-27 12:56 959人阅读 评论(0) 收藏 举报 UIWebView是IOS内置的浏览器, ...

  6. easyui datagrid加载本地数据和网络数据

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

  7. ArcGIS Runtime SDK for .Net 100.6 如何加载本地数据

    由于ArcGIS Engine的32位.部署繁重.不适应新一代Web GIS的发展等缺点,Esri推出了ArcGIS Runtime产品,该产品因其64位.部署轻便.跨平台.更好地适应新一代Web G ...

  8. cesium加载百度地图_Cesium专栏-百度地图加载(附源码下载)

    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

  9. cesium 经纬度绘制点_cesium结合geoserver利用WFS服务实现图层新增(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

最新文章

  1. NUnit2.0详细使用方法
  2. 5类6类7类网线对比_未来值得投资的6类苗木,5年内市场前景应该都不错!
  3. wxWidgets随笔(7)-utf8中文(3)
  4. C语言递归方式实现冒泡排序(bubble排序)算法(附完整源码)
  5. 夸奖对方代码写的好_怎样写好代码(三)
  6. 楼层效果_1一28高楼最好最吉利的楼层是哪层?选楼层要注意什么?
  7. java性能测试jmh
  8. Kotlin入门到放弃
  9. 工信部强化车联网安全监管、上云可有效阻止勒索攻击|全球网络安全热点
  10. 【Excel从头开始】-3 从网页导出数据到Excel
  11. 2009年国家质监局公布的禁用化妆品名单
  12. 工作效率-十五分钟让你快速学习Markdown语法到精通排版实践备忘
  13. java基础,进阶(二)
  14. 古往今来中国最经典的50句名言
  15. win10 安装虚拟机和乌班图
  16. python-turtle(海龟绘图)圣诞树
  17. 【pytorch】|tensor grad
  18. java入门基础学习(三)
  19. c语言单片机定时器的应用程序,51单片机定时器中断程序(C语言)
  20. iOS 利用openCV拼接照片实现拍摄全景照片

热门文章

  1. val, lazy, def
  2. 锁分区提升并发,以及锁等待实例
  3. Codeforce C. Buns
  4. 如何將Clonezilla live放到一個已經有其他作業系統存在的硬碟中
  5. 记录今天学习SQL遇到的一个小问题
  6. c 语言中下标运算符,详解C++中二进制求补运算符与下标运算符的用法
  7. 天津大学计算机科学学院夏令营,天津大学计算机科学与技术学院(专业学位)计算机技术保研夏令营...
  8. ajax文件上传报400,js ajaxfileupload.js上传报错的解决方法
  9. java jpa hibernate_java - JPA和Hibernate - Criteria与JPQL或HQL
  10. android 上下滚动文字_android高仿今日头条富文本编辑(发布文章)