本文主要是介绍WebGL绘制面并转为地理坐标二维多边形存储到数据库，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
SuperMap WebGL绘制面并转为地理坐标二维多边形存储到数据库，主要用途是完成数据采集工作。记录了空间笛卡尔坐标转地理坐标并组装成JSON请求体的过程。
<!DOCTYPE html>
<html lang="cn">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>绘制</title><link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet"><link href="./css/bootstrap.min.css" rel="stylesheet"><link href="./css/pretty.css" rel="stylesheet"><script src="./js/jquery.min.js"></script><script src="./js/bootstrap.min.js"></script><script src="./js/bootstrap-select.min.js"></script><script src="./js/tooltip.js"></script><script src="./js/config.js"></script><script type="text/javascript" src="../Build/Cesium/Cesium.js"></script><!--
帮助文档http://support.supermap.com.cn:8090/iserver/help/html/zh/index.htm
json_parse.js 提供了 JSON 字符串的解析函数 json_parse，
toJSON.js 提供了获取 XMLHttpRequest 对象的函数 getcommit、将 JavaScript 对象转化为 JSON 字符串的函数 toJSON
--><script type="text/javascript" src="./js/toJSON.js"></script><script type="text/javascript" src="./js/json_parse.js"></script></head>
<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>
</div>
<div id="toolbar" class="param-container tool-bar"><button type="button" id="point" class="button black">绘制点</button><button type="button" id="polyline" class="button black">绘制线</button><button type="button" id="polygon" class="button black">绘制面</button><button type="button" id="marker" class="button black">添加地标</button><button type="button" id="clear" class="button black">清除</button>
</div>
<script type="text/javascript">function onload(Cesium) {// 初始化viewer部件var viewer = new Cesium.Viewer('cesiumContainer', {infoBox: false,selectionIndicator: false});viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({url: 'https://dev.virtualearth.net',mapStyle: Cesium.BingMapsStyle.AERIAL,key: URL_CONFIG.BING_MAP_KEY}));var scene = viewer.scene;scene.shadowMap.darkness = 1.275; //设置第二重烘焙纹理的效果（明暗程度）scene.skyAtmosphere.brightnessShift = 0.4; //修改大气的亮度scene.debugShowFramesPerSecond = true;scene.hdrEnabled = false;scene.sun.show = false;// 01设置环境光的强度-新处理CBD场景scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);// 添加光源var position1 = new Cesium.Cartesian3.fromDegrees(116.261209157595, 39.3042238956531, 480);//光源方向点var targetPosition1 = new Cesium.Cartesian3.fromDegrees(116.261209157595, 39.3042238956531, 430);var dirLightOptions = {targetPosition: targetPosition1,color: new Cesium.Color(1.0, 1.0, 1.0, 1),intensity: 0.55};directionalLight_1 = new Cesium.DirectionalLight(position1, dirLightOptions);scene.addLightSource(directionalLight_1);try {// 打开所发布三维服务下的所有图层var promise = scene.open(URL_CONFIG.SCENE_CBD);Cesium.when(promise, function (layers) {// 设置相机位置、视角，便于观察场景scene.camera.setView({destination: new Cesium.Cartesian3.fromDegrees(116.4563, 39.8969, 553),orientation: {heading: 5.901089214916513,pitch: -0.40668579780875524,roll: 6.281842456812987}});for (var i = 0; i < layers.length; i++) {layers[i].selectEnabled = false;}if (!scene.pickPositionSupported) {alert('不支持深度纹理,无法拾取位置！');}}, function (e) {if (widget._showRenderLoopErrors) {var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';widget.showErrorPanel(title, undefined, e);}});} catch (e) {if (widget._showRenderLoopErrors) {var title = '渲染时发生错误，已停止渲染。';widget.showErrorPanel(title, undefined, e);}}var clampMode = 0;var tooltip = createTooltip(document.body);var handlerPoint = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);handlerPoint.activeEvt.addEventListener(function (isActive) {if (isActive == true) {viewer.enableCursorStyle = false;viewer._element.style.cursor = '';$('body').removeClass('drawCur').addClass('drawCur');} else {viewer.enableCursorStyle = true;$('body').removeClass('drawCur');}});handlerPoint.movingEvt.addEventListener(function (windowPosition) {tooltip.showAt(windowPosition, '<p>点击绘制一个点</p>');});handlerPoint.drawEvt.addEventListener(function (result) {tooltip.setVisible(false);});/*划线start*/var handlerLine = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Line);handlerLine.activeEvt.addEventListener(function (isActive) {if (isActive == true) {viewer.enableCursorStyle = false;viewer._element.style.cursor = '';$('body').removeClass('drawCur').addClass('drawCur');} else {viewer.enableCursorStyle = true;$('body').removeClass('drawCur');}});handlerLine.movingEvt.addEventListener(function (windowPosition) {if (handlerLine.isDrawing) {tooltip.showAt(windowPosition, '<p>左键点击确定折线中间点</p><p>右键单击结束绘制</p>');} else {tooltip.showAt(windowPosition, '<p>点击绘制第一个点</p>');}});handlerLine.drawEvt.addEventListener(function (result) {tooltip.setVisible(false);//捕获线点位console.log(result);console.log(result.object._length);console.log(result.object._positions);let my_cartesian3 = new Cesium.Cartesian3();my_cartesian3.x = result.object._positions[0].x;my_cartesian3.y = result.object._positions[0].y;my_cartesian3.z = result.object._positions[0].z;let ellipsoid = viewer.scene.globe.ellipsoid;let cartographic = ellipsoid.cartesianToCartographic(my_cartesian3);let lat = Cesium.Math.toDegrees(cartographic.latitude);let lng = Cesium.Math.toDegrees(cartographic.longitude);let alt = cartographic.height;console.log(lat);console.log(lng);console.log(alt);});/*划线end*/var handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, clampMode);//clampMode换成数字0表示空间多边形、1贴地、2贴对象handlerPolygon.activeEvt.addEventListener(function (isActive) {if (isActive == true) {viewer.enableCursorStyle = false;viewer._element.style.cursor = '';$('body').removeClass('drawCur').addClass('drawCur');} else {viewer.enableCursorStyle = true;$('body').removeClass('drawCur');}});handlerPolygon.movingEvt.addEventListener(function (windowPosition) {if (handlerPolygon.isDrawing) {tooltip.showAt(windowPosition, '<p>点击确定多边形中间点</p><p>右键单击结束绘制</p>');} else {tooltip.showAt(windowPosition, '<p>点击绘制第一个点</p>');}});handlerPolygon.drawEvt.addEventListener(function (result) {tooltip.setVisible(false);//捕获多边形点位console.log(result);console.log(result.object.positions);// 实体let NewFeature = {"fieldNames": ["SMUSERID","Z_value"],"fieldValues": ["0",0],"geometry": {"parts": null,"points": [// {"x": 0, "y": 0},// {"x": 0, "y": 20}],"style": null,"type": "REGION"}}//组装JSONfor (let i = 0; i < result.object.positions.length; i++) {let my_cartesian3 = new Cesium.Cartesian3();my_cartesian3.x = result.object.positions[i].x;my_cartesian3.y = result.object.positions[i].y;my_cartesian3.z = result.object.positions[i].z;let ellipsoid = viewer.scene.globe.ellipsoid;let cartographic = ellipsoid.cartesianToCartographic(my_cartesian3);let lat = Cesium.Math.toDegrees(cartographic.latitude);let lng = Cesium.Math.toDegrees(cartographic.longitude);let alt = cartographic.height;console.log(lat);console.log(lng);console.log(alt);let point = {"x": lng, "y": lat};NewFeature.geometry.points.push(point);NewFeature.fieldValues[1] = alt;}NewFeature.geometry.points.push(NewFeature.geometry.points[0]);//JSON组装完成，其他属性可以继续从这里添加NewFeature = JSON.stringify(NewFeature);//JSON转为字符串console.log(NewFeature);addline(NewFeature);//提交到后台数据库});// 添加要素到数据库function addline(NewFeature) {var commit = getcommit();//数据服务地址var uri = "http://localhost:8090/iserver/services/data-mymap/rest/data/datasources/name/mydata/datasets/name/Region2d/features.rjson";//欲增加的要素信息集合（包含1个要素）var entity = [NewFeature];commit.open("POST", encodeURI(uri) + "?returnContent=true", false, "", "");commit.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");commit.send(toJSON(entity));//解析从服务器端返回的 json 字符串，解析为一个 JavaScript 对象。var response = json_parse(commit.responseText, null);console.log(response);//提示结果if (response.length > 0) {alert("创建要素成功，添加的要素资源的 ID 为：" + response[0])} else {alert("创建要素失败")}}var handlerMarker = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Marker);handlerMarker.activeEvt.addEventListener(function (isActive) {if (isActive == true) {viewer.enableCursorStyle = false;viewer._element.style.cursor = '';$('body').removeClass('drawCur').addClass('drawCur');} else {viewer.enableCursorStyle = true;$('body').removeClass('drawCur');}});handlerMarker.movingEvt.addEventListener(function (windowPosition) {tooltip.showAt(windowPosition, '<p>点击绘制地标</p>');});handlerMarker.drawEvt.addEventListener(function (result) {tooltip.setVisible(false);});$('#point').click(function () {deactiveAll();handlerPoint.activate();});$('#polyline').click(function () {deactiveAll();handlerLine.activate();// console.log("handlerLine");});$('#polygon').click(function () {deactiveAll();handlerPolygon.activate();});$('#marker').click(function () {deactiveAll();handlerMarker.activate();});$('#clear').click(function () {clearAll();});$('#toolbar').show();$('#loadingbar').remove();function deactiveAll() {handlerLine.deactivate();handlerPoint.deactivate();handlerPolygon.deactivate();handlerMarker.deactivate();}function clearAll() {handlerLine.clear();handlerPoint.clear();handlerPolygon.clear();handlerMarker.clear();}if (!scene.pickPositionSupported) {alert('不支持深度拾取,无法进行鼠标交互绘制！');}}if (typeof Cesium !== 'undefined') {window.startupCalled = true;onload(Cesium);}
</script>
</body>
</html>
这篇关于WebGL绘制面并转为地理坐标二维多边形存储到数据库的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
