前言

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

内容概览

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

效果图如下:

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

  • geoserver默认WFS服务是没有编辑操作权限的,所以需要在geoserver设置权限,允许编辑操作才行,截图如下:



  • 部分核心代码:

//绘制geojson图层样式
var geoJsonStyle = {
stroke: Cesium.Color.YELLOW,
strokeWidth: 3,
fill: Cesium.Color.YELLOW.withAlpha(0.1)
};
var geoserverUrl = 'http://localhost:8080/geoserver/WebGIS';
var image_Source = new Cesium.UrlTemplateImageryProvider({
//url: 'http://mt0.google.cn/vt/lyrs=t,r&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',
//url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
//tilingScheme : new Cesium.GeographicTilingScheme(),
credit: ''
});
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
}); //加载geoserver wms服务
var wms = new Cesium.WebMapServiceImageryProvider({
url: geoserverUrl+'/wms',
layers: 'WebGIS:testLayer',
parameters: {
service : 'WMS',
format: 'image/png',
transparent: true,
}
});
viewer.imageryLayers.addImageryProvider(wms); viewer._cesiumWidget._creditContainer.style.display = "none";
viewer.scene.globe.enableLighting = false;
//viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.scene.globe.showGroundAtmosphere = false; viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(113.90271877, 22.95186415,30000.0)
}); var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var ellipsoid = viewer.scene.globe.ellipsoid;
handler.setInputAction(function (movement) {
//通过指定的椭球或者地图对应的坐标系,将鼠标的二维坐标转换为对应椭球体三维坐标
cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid);
if (cartesian) {
//将笛卡尔坐标转换为地理坐标
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
//将弧度转为度的十进制度表示
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
var point = longitudeString + ',' + latitudeString;
queryByPoint(point,'testLayer',callbackLastQueryWFSService);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); var drawTool = new DrawTool({
viewer: viewer,
hasEdit: false
}); //绘制矩形
$("#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){
var content = '<span>名称:</span><input type="text" id="estate_num" /></br><span>备注:</span><input type="text" id="holder_nam" /></br><button type="button" id="addBtn">新增</button>';
$("#infowindow").show();
$("#infowindow").empty();
$("#infowindow").append(content);
$("#addBtn").click(function(){
console.log('点击事件响应');
addLayers(polygon,$("#estate_num").val(),$("#holder_nam").val(),callbackAddLayersWFSService);
});
}
}
});
});
  • 图层新增函数
/*图层新增
*@method addLayers
*@param polygon 图形
*@param fieldValue1 字段1值
*@param fieldValue2 字段2值
*@return callback
*/
function addLayers(polygon,fieldValue1,fieldValue2, callback){
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">';
……

更多详情见下面链接文章

小专栏此文章

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

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. openlayers6结合geoserver利用WFS服务实现图层新增功能(附源码下载)

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

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

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

  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. [bzoj4417] [洛谷P3990] [Shoi2013] 超级跳马

    Description 现有一个n行m列的棋盘,一只马欲从棋盘的左上角跳到右下角.每一步它向右跳奇数列,且跳到本行或相邻行.跳越期间,马不能离开棋盘.例如,当n = 3, m = 10时,下图是一种可 ...

  2. 1、python3.x安装(windows)

    现在大部分自动化测试已经使用python3.x版本,与Python2的区别这里就不多说了,如有兴趣可以自行百度. 一.下载 官网:https://www.python.org/downloads/,下 ...

  3. Mixing .NET

  4. MYGUI3.2改造——完善windows下的文字显示

    MYGUI 3.2 是支持中文显示的——往“MyGUI_Fonts.xml”文件里添加上中文的编码范围即可,这个网上有很多. 能显示中文后,再添加中文的自动换行,这个网上有:http://blog.s ...

  5. c#数字图像处理(十二)图像的腐蚀与膨胀

    背景知识 腐蚀与膨胀基本原理:就是用一个特定的结构元素来与待处理图像按像素做逻辑操作:可以理解成拿一个带孔的网格板(结构元素矩阵中元素为1的为孔)盖住图像的某一部分,然后按照各种不同的观察方式来确定操 ...

  6. c#数字图像处理(一)Bitmap类、 Bitmapdata类和 Graphics类

    Bitmap类. Bitmapdata类和 Graphics类是C#图像处理中最重要的3个类,如果要用C#进行图像处理,就一定要掌握它们. 1.1 Bitmap类Bitmap对象封装了GDI+中的一个 ...

  7. 尼姆博弈+SG函数

    博弈这个东西真的很费脑诶.. 尼姆博奕(Nim Game):游戏者轮流从一堆棋子(或者任何道具)中取走一个或者多个,最后不能再取的就是输家.当指定相应数量时,一堆这样的棋子称作一个尼姆堆 当n堆棋子的 ...

  8. SSM 配置文件 分析

    spring 配置文件(主要整合的是spring 和 mybatis 的配置文件) 问题: 两者之间没有整合在一起的时候是怎么样的 spring配置文件:    Spring配置文件是用于指导Spri ...

  9. ElasticSearch系列专栏

    最近我们公司因业务发展较快,不少服务遇到了一些瓶颈,影响最大的就是数据量的暴增带来的搜索效率的问题.虽然建立索引以及利用好缓存可以有效地缓解该问题,但是随着业务的发展,业务的复杂度也逐渐提升,原有的技 ...

  10. svn: Can't connect to host '': 由于目标机器积极 原因及解决办法

    在dos环境下输入命令“svnserve -d --listen-port 3690 -r d:\svn” 这里“d:\svn” 是你在svn中创建的版本库路径,然后执行命令,记住窗口不能关闭,关闭之 ...