前言

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

内容概览

1.cesium结合geoserver利用WFS服务实现图层编辑功能
2.源代码demo下载

效果图如下:

本篇主要是在上一篇cesium结合geoserver利用WFS服务实现图层新增(附源码下载)基础上实现的,cesium通过调用geoserver发布的地图服务WFS来达到图层编辑记录的目的。与GeoServer的WFS进行基于Rest交互关键就在于请求参数,值得注意的是这些请求最好采用POST方法发送。查询可以采用json,但增加,删除,修改都只能采用XML形式Transaction

  • 部分核心代码,完整的见源码demo下载
  1. //绘制geojson图层样式
  2. var geoJsonStyle = {
  3. stroke: Cesium.Color.YELLOW,
  4. strokeWidth: 3,
  5. fill: Cesium.Color.YELLOW.withAlpha(0.1)
  6. };
  7. var geoserverUrl = 'http://localhost:8080/geoserver/WebGIS';
  8. var image_Source = new Cesium.UrlTemplateImageryProvider({
  9. //url: 'http://mt0.google.cn/vt/lyrs=t,r&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',
  10. //url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
  11. url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
  12. //tilingScheme : new Cesium.GeographicTilingScheme(),
  13. credit: ''
  14. });
  15. var viewer = new Cesium.Viewer('map', {
  16. geocoder: false,
  17. homeButton: false,
  18. sceneModePicker: false,
  19. fullscreenButton: false,
  20. vrButton: false,
  21. baseLayerPicker: false,
  22. infoBox: false,
  23. selectionIndicator: false,
  24. animation: false,
  25. timeline: false,
  26. shouldAnimate: true,
  27. navigationHelpButton: false,
  28. navigationInstructionsInitiallyVisible: false,
  29. imageryProvider: image_Source
  30. });
  31.  
  32. //加载geoserver wms服务
  33. var wms = new Cesium.WebMapServiceImageryProvider({
  34. url: geoserverUrl+'/wms',
  35. layers: 'WebGIS:testLayer',
  36. parameters: {
  37. service : 'WMS',
  38. format: 'image/png',
  39. transparent: true,
  40. }
  41. });
  42. viewer.imageryLayers.addImageryProvider(wms);
  43.  
  44. viewer._cesiumWidget._creditContainer.style.display = "none";
  45. viewer.scene.globe.enableLighting = false;
  46. //viewer.scene.globe.depthTestAgainstTerrain = true;
  47. viewer.scene.globe.showGroundAtmosphere = false;
  48.  
  49. viewer.camera.flyTo({
  50. destination : Cesium.Cartesian3.fromDegrees(113.90271877, 22.95186415,30000.0)
  51. });
  52.  
  53. var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  54. var ellipsoid = viewer.scene.globe.ellipsoid;
  55. handler.setInputAction(function (movement) {
  56. //通过指定的椭球或者地图对应的坐标系,将鼠标的二维坐标转换为对应椭球体三维坐标
  57. cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid);
  58. if (cartesian) {
  59. //将笛卡尔坐标转换为地理坐标
  60. var cartographic = ellipsoid.cartesianToCartographic(cartesian);
  61. //将弧度转为度的十进制度表示
  62. var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
  63. var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
  64. var point = longitudeString + ',' + latitudeString;
  65. queryByPoint(point,'testLayer',callbackLastQueryWFSService);
  66. }
  67. }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  68.  
  69. /*点查图层
  70. *@method queryByPoint
  71. *@param point 点查
  72. *@param typeName 图层名称
  73. *@return null
  74. */
  75. function queryByPoint(point, typeName, callback){
  76. var filter =
  77. '<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">';
  78. filter += '<Intersects>';
  79. filter += '<PropertyName>the_geom</PropertyName>';
  80. filter += '<gml:Point>';
  81. filter += '<gml:coordinates>' + point + '</gml:coordinates>';
  82. filter += '</gml:Point>';
  83. filter += '</Intersects>';
  84. filter += '</Filter>';
  85. var urlString = geoserverUrl + '/ows';
  86. var param = {
  87. service: 'WFS',
  88. version: '1.0.0',
  89. request: 'GetFeature',
  90. typeName: typeName,
  91. outputFormat: 'application/json',
  92. filter: filter
  93. };
  94. var geojsonUrl = urlString + getParamString(param, urlString);
  95. $.ajax({
  96. url: geojsonUrl,
  97. async: true,
  98. type:'GET',
  99. dataType: 'json',
  100. success(result) {
  101. callback(result);
  102. },
  103. error(err) {
  104. console.log(err);
  105. }
  106. })
  107. }
  108.  
  109. function getParamString(obj, existingUrl, uppercase){
  110. var params = [];
  111. for (var i in obj) {
  112. params.push(encodeURIComponent(uppercase ? i.toUpperCase() : i) + '=' + encodeURIComponent(obj[i]));
  113. }
  114. return ((!existingUrl || existingUrl.indexOf('?') === -1) ? '?' : '&') + params.join('&');
  115. }
  116.  
  117. /*
  118. * 点查图层回调函数
  119. */
  120. function callbackLastQueryWFSService(data){
  121. console.log('data',data);
  122. if(data && data.features.length>0){
  123. clearGeojsonLayer();
  124. loadGeojsonLayer(data);
  125. //气泡窗口显示
  126. var properties = data.features[0].properties;
  127. var id = data.features[0].id;
  128. var geometry = data.features[0].geometry;
  129. //var content = '名称:'+properties.estate_num+'</br>备注:'+properties.holder_nam;
  130. var content = '<span>名称:</span><input type="text" id="estate_num" value = "'+properties.estate_num+'" /></br><span>备注:</span><input type="text" id="holder_nam" value = "'+properties.holder_nam+'" /></br><button type="button" id="editBtn">编辑</button>';
  131. $("#infowindow").show();
  132. $("#infowindow").empty();
  133. $("#infowindow").append(content);
  134. $("#editBtn").click(function(){
  135. //console.log('编辑按钮点击事件');
  136. if(id)
  137. {
  138. //构造polygon
  139. var polygon = '';
  140. var data = geometry.coordinates[0][0];
  141. for(var i=0;i<data.length;i++){
  142. var item = data[i];
  143. polygon += item[0] + ',' + item[1] + ' ' ;
  144. }
  145. polygon += data[0][0] + ',' + data[0][1];
  146. //只编辑属性信息,默认图形信息不变,感兴趣的,读者你们可自行编辑图形变化信息,这里预留图形参数传值了的
  147. editLayers(id,polygon,$("#estate_num").val(),$("#holder_nam").val(),callbackEditLayersWFSService);
  148. }
  149. });
  150. }
  151. else{
  152. //clearMap();
  153. $("#infowindow").hide();
  154. }
  155. }
  156. /*
  157. * 绘制图形函数
  158. */
  159. function loadGeojsonLayer(geojson){
  160. var promise = Cesium.GeoJsonDataSource.load(geojson,geoJsonStyle);
  161. promise.then(function(dataSource) {
  162. viewer.dataSources.add(dataSource);
  163. //viewer.zoomTo(dataSource);
  164. }).otherwise(function(error){
  165. window.alert(error);
  166. });
  167. }
  168. /*
  169. * 清空绘制图形函数
  170. */
  171. function clearGeojsonLayer(){
  172. viewer.dataSources.removeAll();
  173. }
  174.  
  175. function clearMap(){
  176. if (drawTool) {
  177. drawTool.destroy();
  178. }
  179. clearGeojsonLayer();
  180. }
  181. /*图层编辑
  182. *@method editLayers
  183. *@param polygon 图形
  184. *@param fid 记录fid值
  185. *@param fieldValue1 字段1值
  186. *@param fieldValue2 字段2值
  187. *@return callback
  188. */
  189. function editLayers(fid,polygon,fieldValue1,fieldValue2, callback){
  190. var xml = '<wfs:Transaction service="WFS" version="1.0.0" xmlns:opengis="http://webgis.com" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd">';
  191. xml += '<wfs:Update typeName="WebGIS:testLayer">';
  192. xml += '<wfs:Property>';
  193. xml += '<wfs:Name>the_geom</wfs:Name>';
  194. ……
    ……
  195.  
  196. }

几点说明:
1.WebGIS,geoserver工作区;
2.testLayer,操作图层名称;
3.fid,操作图层的默认固有属性字段。
4.estate_num,holder_nam,操作图层属性字段。
图层编辑回调函数,操作成功或者失败,可以在网页的控制台网络看请求结果

完整demo源码见小专栏文章尾部小专栏

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

cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)的更多相关文章

  1. cesium结合geoserver利用WFS服务实现图层删除(附源码下载)

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

  2. cesium结合geoserver利用WFS服务实现图层新增(附源码下载)

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

  3. leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  4. openlayers6结合geoserver利用WFS服务实现图层新增功能(附源码下载)

    内容概览 1.openlayers6结合geoserver利用WFS服务实现图层新增功能2.源代码demo下载 效果图如下: 本篇主要是openlayers6通过调用geoserver发布的地图服务W ...

  5. leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  6. Cesium专栏-地形开挖2-任意多边形开挖(附源码下载)

    “任意多边形地形开挖” 是“地形开挖”的补充篇,在这节里,我们介绍关于如何使用任意多边形对地形进行开挖,同时,由于有不少小伙伴也咨询了关于“地形开挖”篇后序内容中的填充地形的效果,之前没放出来,是想让 ...

  7. Cesium专栏-空间分析之坡向分析(附源码下载)

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

  8. cesium 入门开发系列矢量瓦片加载展示(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...

  9. Cesium专栏-裁剪效果(基于3dtiles模型,附源码下载)

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

随机推荐

  1. java 数据类型:<泛型>在方法中和在构造器中的应用

    背景: Java不允许我们把对象放在一个未知的集合中. import java.util.ArrayList; import java.util.List; /** * @ClassName Meth ...

  2. Paramiko模块学习

    #!/usr/bin/env python # Author:Zhangmingda import paramiko '''创建ssh对象''' ssh = paramiko.SSHClient() ...

  3. 使用docker-compose一起安装kafka(zookeeper)

    要先安装docker-compose Linux安装docker-compose 参考:https://www.cnblogs.com/pxblog/p/15049362.html 创建docker- ...

  4. Mybatis一对一、一对多级联查询使用

    在A对象的xml配置文件中 一对一<association property="shop" column="shop_id" select="c ...

  5. js(JQuery)引入select2

    官方项目地址:https://select2.org/ 引入css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/sele ...

  6. Caused by: redis.clients.jedis.exceptions.JedisDataException: READONLY You can't write against a read only slave.

    Caused by: redis.clients.jedis.exceptions.JedisDataException: READONLY You can't write against a rea ...

  7. RabbitMQ学习笔记三:Java实现RabbitMQ之与Spring集成

    搭建好maven项目环境,加入RabbitMQ依赖包 <dependency> <groupId>org.springframework.amqp</groupId> ...

  8. Normalization Methods

    目录 概 主要内容 Batch Normalization Layer Normalization Instance Normalization Group Normalization Ioffe S ...

  9. Hadoop开启Kerberos安全模式

    Hadoop开启Kerberos安全模式, 基于已经安装好的Hadoop的2.7.1环境, 在此基础上开启Kerberos安全模式. 1.安装规划 已经安装好Hadoop的环境 10.43.159.7 ...

  10. 集合不安全之 ArrayList及其三种解决方案【CopyOnWriteArrayList 、synchronizedList、Vector 】

    @ 目录 一.前言 二.为什么线程不安全 三.解决方案一CopyOnWriteArrayList (推荐,读多写少场景) 四.Collections.synchronizedList(加锁) 五.Ve ...