<!DOCTYPE html>
<html>
<head>
<title>cesium结合geoserver利用WFS服务实现图层新增</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<link href="lib/Cesium/Widgets/widgets.css" rel="stylesheet" />
<script type="text/javascript" src="lib/Cesium/Cesium.js"></script>
<link href="lib/prompt/movePrompt.css" rel="stylesheet" />
<script type="text/javascript" src="lib/prompt/movePrompt.js"></script>
<script type="text/javascript" src="lib/drawPlot/drawTool.js"></script>
<script type="text/javascript" src="lib/drawPlot/createRectangle.js"></script>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<div style="position:absolute;top:50px;left:60px;z-index:999;">
<button type="button" id="rect_btn">绘制矩形</button>
<button type="button" id="clear_btn">清空</button>
</div>
<div id="infowindow" style="position:absolute;top:10px;right:10px;z-index:999;background:#fff;width:200px;height:130px;font-size:13px;display:none;line-height:25px;">
</div>
<script>
//绘制geojson图层样式
var geoJsonStyle = {
stroke: Cesium.Color.YELLOW,
strokeWidth: 3,
fill: Cesium.Color.YELLOW.withAlpha(0.1)
};
var geoserverUrl = 'http://39.108.127.92: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">';
xml += '<wfs:Insert handle="WebGIS">';
xml += '<opengis:testLayer>';
xml += '<opengis:the_geom>';
xml += '<gml:MultiPolygon srsName="EPSG:4326">';
xml += '<gml:polygonMember>';
xml += '<gml:Polygon>';
xml += '<gml:outerBoundaryIs>';
xml += '<gml:LinearRing>';
xml += '<gml:coordinates decimal="." cs="," ts=" ">' + polygon + '</gml:coordinates>';
xml += '</gml:LinearRing>';
xml += '</gml:outerBoundaryIs>';
xml += '</gml:Polygon>';
xml += '</gml:polygonMember>';
xml += '</gml:MultiPolygon>';
xml += '</opengis:the_geom>';
xml += '<opengis:estate_num>' + fieldValue1 + '</opengis:estate_num>';
xml += '<opengis:holder_nam>' + fieldValue2 + '</opengis:holder_nam>';
xml += '</opengis:testLayer>';
xml += '</wfs:Insert>';
xml += '</wfs:Transaction>';
$.ajax({
url: geoserverUrl+'/wfs',
async: true,
data:xml,
type:'Post',
contentType: 'text/xml',
success(result) {
callback(result);
},
error(err) {
console.log(err);
}
})
}
/*
* 图层新增回调函数
*/
cesium结合geoserver利用WFS服务实现图层新增.zip （374个子文件） 
widgets.css 21KB lighter.css 5KB InfoBoxDescription.css 3KB Animation.css 2KB CesiumInspector.css 2KB BaseLayerPicker.css 2KB Cesium3DTilesInspector.css 2KB NavigationHelpButton.css 2KB lighter.css 2KB shared.css 2KB SceneModePicker.css 2KB InfoBox.css 2KB Geocoder.css 1KB movePrompt.css 1KB Viewer.css 1KB Timeline.css 1KB ProjectionPicker.css 1KB CesiumWidget.css 986B lighterShared.css 878B lighter.css 863B lighter.css 598B lighter.css 391B SelectionIndicator.css 332B lighter.css 325B lighter.css 263B PerformanceWatchdog.css 250B FullscreenButton.css 101B VRButton.css 93B
info-loading.gif 723B
index - 副本.html 11KB index.html 11KB
waterNormals.jpg 287KB StarBurst.jpg 191KB tycho2t3_80_mz.jpg 179KB tycho2t3_80_py.jpg 165KB tycho2t3_80_pz.jpg 165KB tycho2t3_80_my.jpg 164KB tycho2t3_80_px.jpg 135KB tycho2t3_80_mx.jpg 131KB DirtMask.jpg 111KB waterNormalsSmall.jpg 33KB moonSmall.jpg 18KB 2.jpg 16KB 2.jpg 16KB 2.jpg 16KB 3.jpg 15KB 1.jpg 15KB 3.jpg 15KB 0.jpg 14KB 1.jpg 13KB 1.jpg 13KB 1.jpg 13KB 3.jpg 12KB 1.jpg 12KB 1.jpg 12KB 2.jpg 12KB 0.jpg 12KB 3.jpg 12KB 3.jpg 12KB 3.jpg 12KB 2.jpg 11KB 2.jpg 11KB 1.jpg 11KB 1.jpg 11KB 2.jpg 11KB 3.jpg 11KB 0.jpg 10KB 0.jpg 10KB 0.jpg 10KB 3.jpg 10KB 1.jpg 10KB 1.jpg 10KB 0.jpg 9KB 0.jpg 9KB 1.jpg 9KB 0.jpg 9KB 0.jpg 8KB 0.jpg 8KB 2.jpg 8KB 0.jpg 8KB 0.jpg 7KB 0.jpg 7KB 1.jpg 7KB 0.jpg 6KB Cesium.js 3.26MB draco_decoder.js 771KB google-earth-dbroot-parser.js 202KB transcodeCRNToDXT.js 144KB Transforms-5119c07b.js 107KB draco_wasm_wrapper.js 65KB GeometryPipeline-bb485d83.js 30KB createVerticesFromHeightmap.js 27KB decodeGoogleEarthEnterprisePacket.js 26KB inflate.js 22KB Cartesian2-ba70b51f.js 22KB FrustumGeometry-1b28344c.js 21KB createGroundPolylineGeometry.js 19KB cesiumWorkerBootstrapper.js 18KB createCorridorGeometry.js 17KB deflate.js 17KB共 374 条
- 1
- 2
- 3
- 4
资源评论
skyJ
- 粉丝: 3207
最新资源
- 制作Excel表格简易教程(1).doc
- 医院门诊管理系统数据库课程设计论文.doc
- 实验二利用matlab进行时域分析.doc
- 数据库建设技术方案要点.doc
- 毕业设计基于java的邮箱管理服务器设计与实现.doc
- “互联网+”市场营销学教学改革研究.docx
- 医药管理系统-医药管理软件-对企业发展所起的关键作用.doc
- JAVA编程要点和编程规范.ppt
- 第6章--通信功能与总线接口附件-CANopen协议简介与应用开发-(课堂PPT).ppt
- 水库工程管理信息化建设建议.doc
- 软件食堂方案简短(1).docx
- 软件测试年终总结怎么写.doc
- 计算机编程方式改进及优化策略.docx
- 学校信息化建设发展规划66584.doc
- 网站特约记者合约书.doc
- 各种自动化传感器的使用 PPT.ppt
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
